Installation
-
npm
npm i --save @react-p5/utils
-
yarn
yarn add @react-p5/utils
Usage
createGrain/createOverlay
Both createGrain
and createOverlay
are meant to be added as the last line(s) of your draw
function.
For example:
// sketch.tsx
import Sketch from "@react-p5/core"
import { createGrain, createOverlay } from "@react-p5/utils"
import type { FC } from "react"
import type { Graphics } from "p5"
import type { P5 } from "@react-p5/core"
interface YourProps {
// any
}
let grain: Graphics
let overlay: Graphics
const YourComponent: FC<YourProps> = props => {
const setup = (p5: P5, canvasParentRef: Element) => {
p5.createCanvas(400, 400).parent(canvasParentRef)
grain = createGrain(p5)
overlay = createOverlay(p5)
}
const draw = (p5: P5) => {
p5.background(255)
p5.ellipse(p5.width * 0.5, p5.height * 0.5, 100, 100)
p5.image(overlay, 0, 0, p5.width, p5.height)
p5.image(grain, 0, 0, p5.width, p5.height)
}
return <Sketch setup={setup} draw={draw} />
}
convertSeed
convertSeed
will take a string as an input, convert it to a bite array, and then sum that array to generate a number you can pass as a seed value to p5.randomSeed()
and/or p5.noiseSeed()
. This is useful for creating more personalized seeds to reign in the chaos of random()
and noise()
For example:
// sketch.tsx
import Sketch from "@react-p5/core"
import { convertSeed } from "@react-p5/utils"
import type { FC } from "react"
import type { Graphics } from "p5"
import type { P5 } from "@react-p5/core"
interface YourProps {
// any
}
const seedPhrase = "p5 rules!"
const seed = convertSeed(seedPhrase)
const YourComponent: FC<YourProps> = props => {
const setup = (p5: P5, canvasParentRef: Element) => {
p5.createCanvas(400, 400).parent(canvasParentRef)
p5.noiseSeed(seed)
p5.randomSeed(seed)
}
const draw = (p5: P5) => {
p5.background(255)
// draw random array of ellipses at random vectors with random diameters
Array.from({ length: Math.floor(p5.random(50)) }, () => {
const x = p5.random(p5.width)
const y = p5.random(p5.height)
p5.ellipse(x, y, p5.random(25), p5.random(25))
})
}
return <Sketch setup={setup} draw={draw} />
}
linearGradient
linearGradient
leverages the canvas API to apply a gradient fill to any p5 shape.
For example:
// sketch.tsx
import Sketch from "@react-p5/core"
import { createGrain, linearGradient } from "@react-p5/utils"
import type { FC } from "react"
import type { Graphics } from "p5"
import type { P5 } from "@react-p5/core"
import type { ColorValue } from "@react-p5/utils"
interface YourProps {
// any
}
const gradientArc = (
p5: P5,
x: number,
y: number,
w: number,
h: number,
start: number,
stop: number,
c1: ColorValue,
c2: ColorValue
): void => {
const lx1: number = x - w
const ly1: number = y - h
const lx2: number = x + w * 0.5
const ly2: number = y + h * 0.5
p5.push()
p5.noStroke()
linearGradient(p5, lx1, ly1, lx2, ly2, c1, c2)
p5.arc(x, y, w, h, start, stop)
p5.pop()
}
const YourComponent: FC<YourProps> = props => {
const background: ColorValue = [255, 253, 252]
let grain: Graphics
let margin: number
const setup = (p5: P5) => {
grain = createGrain(p5)
}
const draw = (p5: P5) => {
margin = p5.width * 0.1
const cx: number = p5.width * 0.5
const cy: number = p5.height * 0.5
const scale: number = 120
const ellipseUnit: number = p5.width * 0.175
p5.background(background)
Array.from({ length: 10 }, (_, i) => {
const unit: number = p5.width * 0.05 * (10 - i)
gradientArc(
p5,
cx,
cy,
unit,
unit,
p5.PI + p5.HALF_PI,
p5.HALF_PI,
[255, 0, 0],
background
)
})
Array.from({ length: 10 }, (_, i) => {
const unit: number = p5.width * 0.05 * (10 - i)
gradientArc(
p5,
cx,
cy,
unit,
unit,
p5.HALF_PI,
p5.PI + p5.HALF_PI,
background,
0
)
})
p5.push()
p5.ellipseMode(p5.CORNERS)
const e1x1 = margin
const e1y1 = p5.height - margin
const e1x2 = margin + ellipseUnit
const e1y2 = p5.height - margin - ellipseUnit
linearGradient(
p5,
e1x2 + scale,
e1y2 - scale,
e1x1,
e1y1,
[255, 0, 0],
background
)
p5.stroke(20, 10)
p5.strokeWeight(5)
p5.ellipse(e1x1, e1y1, e1x2, e1y2)
p5.pop()
p5.push()
p5.ellipseMode(p5.CORNERS)
const e2x1 = p5.width - margin
const e2y1 = margin
const e2x2 = p5.width - margin - ellipseUnit
const e2y2 = margin + ellipseUnit
linearGradient(
p5,
e2x1,
e2y1,
e2x2 - scale * 1.3,
e2y2 + scale * 1.3,
background,
0
)
p5.stroke(255, 0, 0, 10)
p5.strokeWeight(5)
p5.ellipse(e2x1, e2y1, e2x2, e2y2)
p5.pop()
p5.image(grain, 0, 0, p5.width, p5.height)
}
return <Sketch setup={setup} draw={draw} />
}