p5-gradient.tsx

import * as React from "react"
import * as p5 from "p5"
import { Frame, addPropertyControls, ControlType } from "framer"

const w = 375
const h = 812
const Y_AXIS = 1
const X_AXIS = 2
let b1, b2, c1, c2

export function LinGrad(props) {
    const { width, height, color1, color2 } = props
    const p5ref = React.useRef(null)

    const sketch = (p) => {
        let x = 0
        let y = 0

        function setGradient(x, y, w, h, c1, c2, axis) {
            p.noFill()

            if (axis === Y_AXIS) {
                // Top to bottom gradient
                for (let i = y; i <= y + h; i++) {
                    let inter = p.map(i, y, y + h, 0, 1)
                    let c = p.lerpColor(c1, c2, inter)
                    p.stroke(c)
                    p.line(x, i, x + w, i)
                }
            } else if (axis === X_AXIS) {
                // Left to right gradient
                for (let i = x; i <= x + w; i++) {
                    let inter = p.map(i, x, x + w, 0, 1)
                    let c = p.lerpColor(c1, c2, inter)
                    p.stroke(c)
                    p.line(i, y, i, y + h)
                }
            }
        }

        function setNoise() {
            p.loadPixels()
            for (let x = 0; x < width; x++) {
                for (let y = 0; y < height; y++) {
                    if (p.random(1) > 0.7) {
                        const index = (x + y * width) * 20
                        p.pixels[index] = 255
                        p.pixels[index + 1] = 255
                        p.pixels[index + 2] = 255
                        p.pixels[index + 3] = 255
                    }
                }
            }
            p.updatePixels()
        }
        p.setup = () => {
            p.createCanvas(width, height)
            p.drawBackground()
            p.setupPosition()
            b1 = p.color(color1)
            b2 = p.color(color2)

            p.frameRate(3)

            // p.noLoop()
        }

        p.setupPosition = () => {
            x = w / 2
            y = h / 2
        }

        p.windowResized = () => {
            p.resizeCanvas(width, height)
            p.drawBackground()
            p.setupPosition()
        }

        p.drawBackground = () => {
            // p.background("red")
        }

        p.draw = () => {
            setGradient(0, 0, width, height, b1, b2, Y_AXIS)
            setNoise()
        }
    }

    React.useEffect(() => {
        let newp5 = new p5(sketch, p5ref.current)

        return () => {
            newp5.remove()
        }
    }, [])

    return (
        <Frame background="none" size="100%">
            <Frame ref={p5ref} background="none"></Frame>
        </Frame>
    )
}
LinGrad.defaultProps = {
    color1: "#fff",
    color2: "#000",
}

addPropertyControls(LinGrad, {
    color1: {
        title: "Color1",
        type: ControlType.Color,
        defaultValue: "#fff",
    },
    color2: {
        title: "Color1",
        type: ControlType.Color,
        defaultValue: "#fff",
    },
})

export function RadGrad(props) {
    const {
        color1,
        color2,
        breath,
        baseRadius,
        step,
        yPosOpt,
        yPos,
        width,
        height,
    } = props
    const p5ref = React.useRef(null)
    var breathAnimate = 1

    const sketch2 = (p) => {
        let dim

        function setNoise() {
            p.loadPixels()
            for (let x = 0; x < width; x++) {
                for (let y = 0; y < height; y++) {
                    if (p.random(1) > 0.7) {
                        const index = (x * 0.5 + y * width) * 40
                        p.pixels[index] = 200
                        p.pixels[index + 1] = 200
                        p.pixels[index + 2] = 200
                        p.pixels[index + 3] = 200
                    }
                }
            }
            p.updatePixels()
        }
        p.setup = () => {
            p.colorMode("RGB")
            b1 = p.color(color1)
            b2 = p.color(color2)
            p.createCanvas(w, h)
            p.drawBackground()
            p.setupPosition()
            p.ellipseMode("RADIUS")
            p.noStroke()
            p.background(b2)
            p.frameRate(3)
        }

        p.setupPosition = () => {
            // x = w / 2
            // y = h / 2
        }

        p.windowResized = () => {
            p.resizeCanvas(w, h)
            p.drawBackground()
            p.setupPosition()
        }

        p.drawBackground = () => {
            // p.background("red")
        }

        p.draw = () => {
            p.background(b2)
            if (yPosOpt === true) {
                drawGradient(w / 2, h / 2)
            } else {
                drawGradient(w / 2, yPos)
            }
            setNoise()
            if (breath === true && breathAnimate < 2) {
                breathAnimate = breathAnimate + 0.1
                // console.log(breathAnimate)
            } else if (breath === true && breathAnimate > 2) {
                breathAnimate = 0.6
                // console.log(breathAnimate)
            } else if (breath === false) {
                breathAnimate = 1
            }
        }

        function drawGradient(x, y) {
            let radius = baseRadius * breathAnimate
            for (let r = radius; r > 0; r = r - step) {
                let inter = p.map(r, 0, radius, 0, 1)
                let c = p.lerpColor(b1, b2, inter)
                p.fill(c)
                p.ellipse(x, y, r, r)
            }
        }
    }
    React.useEffect(() => {
        let newp5 = new p5(sketch2, p5ref.current)

        return () => {
            newp5.remove()
        }
    }, [])

    return (
        <Frame background="none" width={width} height={height}>
            <Frame
                ref={p5ref}
                background="none"
                width="100%"
                height="100%"
            ></Frame>
        </Frame>
    )
}