react-generative-tools

A collection of utility functions for creating generative art with React.

Install

npm install --save react-generative-tools

Usage

p5.js

To render p5.js sketches using React, you will need to use the function createP5Sketch.

import React from "react";
import ReactDOM from "react-dom";
import { createP5Sketch } from "react-generative-tools";
 
function sketch(p5, props, wrapperEl) {
  let pause = true;
 
  p5.setup = function() {
    p5.createCanvas(500, 500);
    p5.noFill();
    p5.background(255);
    p5.stroke(0, 15);
    p5.frameRate(30);
  };
 
  p5.mousePressed = function() {
    pause = !pause;
  };
 
  p5.draw = function() {
    if (!pause) {
      p5.push();
      p5.translate(p5.width / 2, p5.height / 2);
      p5.rotate(p5.frameCount);
 
      const circleResolution = parseInt(
        p5.map(p5.mouseY + 50, 0, p5.height, 2, 10)
      );
      const radius = p5.mouseX - p5.width / 2;
      const angle = (2 * Math.PI) / circleResolution;
 
      p5.beginShape();
 
      for (let i = 0; i <= circleResolution; i++) {
        const x = Math.cos(angle * i) * radius;
        const y = Math.sin(angle * i) * radius;
 
        p5.strokeWeight(i / 2);
        p5.vertex(x, y);
      }
 
      p5.endShape(p5.CLOSE);
 
      p5.pop();
    }
  };
}
 
const Shapes = createP5Sketch(sketch);
 
class App extends Component {
  render() {
    return (
      <div>
        <Shapes id="Shapes" />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.getElementById("root"));

Using with Two.js

import React from "react";
import ReactDOM from "react-dom";
import { createTwoJSDesign, random } from "react-generative-tools";
 
const colors = {
  CIRCLE_ONE: "#ebedee",
  CIRCLE_TWO: "#7f8a93",
  CIRCLE_THREE: "#374047"
};
 
const drawCircle = (offset, color, instance) => {
  const circles = [];
 
  for (let x = 20; x <= instance.width - 5; x += 15) {
    const circle = instance.makeCircle(offset, x, random(0, 10));
    circle.fill = color;
    circle.stroke = "#dee1e3";
 
    circles.push(circle);
  }
 
  return circles;
};
 
const drawPattern = (instance, props) => {
  let renderedCircles = [];
 
  for (let x = 20; x <= instance.width - 28; x += props.positionOffsetOne) {
    renderedCircles.push(drawCircle(x, colors.CIRCLE_THREE, instance));
    x += props.positionOffsetTwo;
 
    renderedCircles.push(drawCircle(x, colors.CIRCLE_TWO, instance));
    x += props.positionOffsetThree;
 
    renderedCircles.push(drawCircle(x, colors.CIRCLE_ONE, instance));
  }
 
  return renderedCircles;
};
 
const offsets = {
  positionOffsetOne: 10,
  positionOffsetTwo: 25,
  positionOffsetThree: 30
};
 
// On each update/page refresh, it displaces the circles randomly
const renderCircles = (two, props, wrapperEl) => {
  const circles = drawPattern(two, offsets);
 
  two.render();
};
 
const Circles = createTwoJSDesign(renderCircles);
 
class App extends Component {
  render() {
    return (
      <div>
        <Circles id="Shapes" width={500} height={500} />
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.getElementById("root"));

Documentation

createTwoJSDesign

This function accepts only one argument, a two.js sketch function and it returns a React component.

The two.js sketch function receives three parameters. The Two.js instance, the returned component's props and the wrapper element that wraps the artwork.

(sketch: (Two) => any, props: {}, wrapperEl: HTMLElement) => any

The returned React component accepts the following props -

• width - Canvas width

• height - Canvas height

• id - A unique element id (useful if you're rendering multiple sketch components)

createP5Design

This function accepts only one argument which is p5.js sketch function and returns a React component. Similar to createTwoJSDesign, the sketch function receives three parameters. The Two.js instance, the returned component's props and the wrapper element that wraps the artwork.

(sketch: (Two) => any, props: {}, wrapperEl: HTMLElement) => any

The returned React component accepts the following props -

• width - Canvas width

• height - Canvas height

• id - A unique element id (useful if you're rendering multiple sketch components)

License

MIT © nitin42