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
.
;;; { let pause = true; p5 { p5; p5; p5background255; p5; p5; }; p5 { pause = !pause; }; p5 { if !pause p5; p5; p5; const circleResolution = ; const radius = p5mouseX - p5width / 2; const angle = 2 * MathPI / circleResolution; p5; for let i = 0; i <= circleResolution; i++ const x = Math * radius; const y = Math * radius; p5; p5; p5; p5; };} const Shapes = ; { return <div> <Shapes id="Shapes" /> </div> ; } ReactDOM;
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 <= instancewidth - 5; x += 15 const circle = instance; circlefill = color; circlestroke = "#dee1e3"; circles; return circles;; const drawPattern = instance props let renderedCircles = ; for let x = 20; x <= instancewidth - 28; x += propspositionOffsetOne renderedCircles; x += propspositionOffsetTwo; renderedCircles; x += propspositionOffsetThree; renderedCircles; return renderedCircles;; const offsets = positionOffsetOne: 10 positionOffsetTwo: 25 positionOffsetThree: 30; // On each update/page refresh, it displaces the circles randomlyconst renderCircles = two props wrapperEl const circles = ; two;; const Circles = ; { return <div> <Circles ="Shapes" = = /> </div> ; } ReactDOM;
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