Gatsby + p5.js

Are you looking to use p5.js with Gatsby JS? You have come to the right place. Here you will find the exact instructions to get you started. Also, consider watching my Youtube video where I create an example Gatsby JS application with p5.js

Install latest node.js for Mac

Follow this link for steps on how to install the latest version of Nodejs https://nodesource.com/blog/installing-nodejs-tutorial-mac-os-x/

Install Gatsby client

sudo npm install -g gatsby-cli

Create Gatsby project

Create new gatsby project using example app:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Start gatsby website in development mode

gatsby develop to run website in local development web server

gatsby developnpm install react-p5-wrapper - save
npm install @loadable/component
npm install p5

Created files in components directory

components/sketchSnowflakes.js

export default function SketchSnowflakes(p5) {
let snowflakes = []; // array to hold snowflake objects p5.setup = () => {
p5.createCanvas(400, 600);
p5.fill(240);
p5.noStroke();
} p5.draw = () => {
p5.background('brown');
let t = p5.frameCount / 60; // update time // create a random number of snowflakes each frame
for (let i = 0; i < p5.random(5); i++) {
snowflakes.push(new snowflake()); // append snowflake object
} // loop through snowflakes with a for..of loop
for (let flake of snowflakes) {
flake.update(t); // update snowflake position
flake.display(); // draw snowflake
}

} // snowflake class
function snowflake() { // initialize coordinates
this.posX = 0;
this.posY = p5.random(-50, 0);
this.initialangle = p5.random(0, 2 * p5.PI);
this.size = p5.random(2, 5); // radius of snowflake spiral
// chosen so the snowflakes are uniformly spread out in area
this.radius = p5.sqrt(p5.random(p5.pow(p5.width / 2, 2)));
this.update = function(time) {
// x position follows a circle
let w = 0.6; // angular speed
let angle = w * time + this.initialangle;
this.posX = p5.width / 2 + this.radius * p5.sin(angle); // different size snowflakes fall at slightly different y speeds
this.posY += p5.pow(this.size, 0.5); // delete snowflake if past end of screen
if (this.posY > p5.height) {
let index = snowflakes.indexOf(this);
snowflakes.splice(index, 1);
}
}; this.display = function() {
p5.ellipse(this.posX, this.posY, this.size);
};
}
}

components/p5.js

import React, { Component } from "react"
import {loadableP5 as P5Wrapper} from './loadable';
import SketchSnowflakes from './SketchSnowflakes';export default class App extends Component{ render() {
return
}

components/loadable.js

import Loadable from "@loadable/component";export const loadableP5 = Loadable(() => import('react-p5-wrapper'));

pages/index.js

import React from “react”; import P5 from “../components/p5”;
const IndexPage = () => (
)
export default IndexPage

Resources:

https://www.gatsbyjs.com/docs/quick-start/

https://semortea.wordpress.com/2020/04/06/p5-js-with-gatsbyjs-tutorial/

https://semortea.wordpress.com/2020/04/06/p5-js-with-gatsbyjs-tutorial/


Posted

in

by

Tags: