generative-art-tools
Utilities for creating generative art
Table of contents
What
generative-art-tools
is a collection of utility functions to create generative art. It provides -
-
a set of helper functions to create generative art using React
-
and math functions that can be use to animate the sketches
Install
npm install --save generative-art-tools
Functions
Processing (p5.js)
;
Render p5.js sketches using React.
Example usage
;;; { let pause = true; p5Instance { p5Instance; p5Instance; p5Instancebackground255; p5Instance; p5Instance; }; p5Instance { pause = !pause; }; p5Instance { if !pause p5Instance; p5Instance; p5Instance; const circleResolution = ; const radius = p5InstancemouseX - p5Instancewidth / 2; const angle = 2 * MathPI / circleResolution; p5Instance; for let i = 0; i <= circleResolution; i++ const x = Math * radius; const y = Math * radius; p5Instance; p5Instance; p5Instance; p5Instance; };} const Shapes = ; { return <Shapes id="Shapes" />;} ReactDOM;
createP5Sketch
ReactComponent
This function accepts only one argument which is p5.js
sketch function and returns a React component. The sketch function receives three parameters, the p5.js
instance, the returned component's props and the wrapper element that wraps the sketch.
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) -
callback: (p5Instance) => void
- A callback function that receives the p5.js instance. Use this callback to do some extra stuff with the sketch
Two.js
;
Render Two.js sketches using React
Example usage
import React from "react";import ReactDOM from "react-dom";import createTwoJSDesign random from "generative-art-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 = twoJSInstance componentProps wrapperElement const circles = ; twoJSInstance;; const Circles = ; { return <Circles ="Shapes" = = />;} ReactDOM;
createTwoJSDesign
ReactComponent
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.
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) -
callback: (twoJSInstance) => void
- A callback function that receives the Two.js instance. Use this callback to do extra work with the sketch
Shaders
;
Render shaders using React
Example usage
import React Component from "react"; import createShaderCanvas from "generative-art-tools"; const shader = ` #ifdef GL_ES precision mediump float; #endif uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; float expStep( float x, float k, float n ){ return exp( -k*pow(x,n) ); } void main() { vec2 point = gl_FragCoord.xy / u_resolution.xy; float px = 1.0 / u_resolution.y; vec2 cp = vec2(cos(u_time),sin(u_time)) * 0.618 + 0.620; float l = expStep(point.x, , ); vec3 color = vec3(smoothstep(l, l+px, point.y), sin(u_time), cos(cp.y) * 0.5); gl_FragColor = vec4(color, 1.0); }`; const ShaderComponent = ; state = timeSync: false ; this; { const timeSync = thisstate; return <div => <ShaderComponent ="exponential-step-curve" = /> </div> ; }
createShaderCanvas
ReactComponent
createShaderCanvas
takes a shader as an input and returns a React component which renders the shader. The shader function gets passed the component props.
The returned React component accepts the following props -
-
id
(Required) -id
of the canvas element. This is required to render the canvas -
height
(Optional) - height of the canvas. -
width
(Optional) - width of the canvas. -
style
(Optional) - canvas style.
Random
Returns a random number between a range.
; ;
Shaping functions
Shaping functions are mathematical functions that lets you control the flow of values. These functions can be used to interpolate values between a defined range for example.
Reference
-
Detailed reference guide on what and how to use shaping functions.
-
Inigo Quilez's blog explains the use cases for shaping functions such as - animations, or making envelopes for music.
The below functions were authored by Inigo Quilez. I have just ported them to code so that they can be used in creating animations.
Gain
(x: number, y: number) => number
;
Implementation
const gain = x: number y: number: { const a = 05 * Math; return x < 05 ? a : 1 - a;};
Impulse
(x: number, y: number) => number
;
Implementation
const impulse = x: number y: number: { const h = y * x; return h * Math;};
Parabola
(x: number, y: number) => number
;
Implementation
const parabola = x: number y: number: Math;
Sine
(x: number, y: number) => number
;
Implementation
const sine = x: number y: number: { const a = 31459265359 * y * x - 1; return Math / a;};
Power
(x: number, y: number, a: number) => number
;
Implementation
const power = x: number a: number b: number: { const k = Math / Math * Math; return k * Math * Math;};
Exponential step
(x: number, y: number, n: number) => number
;
Implementation
const expStep = x: number y: number n: number: { return Math;};
Cubic pulse
(x: number, y: number, a: number) => number
;
Implementation
const cubicPulse = x: number y: number a: number: { x = Math; if x > y return 0; x /= y; return 1 - x * x * 3 - 2 * x;};
License
MIT © nitin42