p5tree.jsx

import { useEffect, useRef } from 'react'

export default function Ani ({ parentContainerRef, className }) {
  const canvasRef = useRef()

  useEffect(() => {
    const parentContainer = parentContainerRef?.current

    if (!parentContainer) return

    const canvasWidth = parentContainer.getBoundingClientRect().width
    const canvasHeight = parentContainer.getBoundingClientRect().height


    const sketch = new p5((s) => {
      s.setup = () => {
        s.createCanvas(canvasWidth, canvasHeight, s.WEBGL)
        s.angleMode(s.DEGREES)
        s.noLoop()
      }

      s.draw = () => {
        // s.randomSeed(1)
        s.background(255)
        s.translate(0, canvasHeight / 2, 0)
        // s.rotateY(s.frameCount)
        branch(canvasHeight / 4)
      }

      function branch (len) {
        s.strokeWeight(s.map(len, 10, 100, .5, 5))
        s.stroke(70, 40 , 20)
        s.line(0, 0, 0, 0, -len - 2, 0)

        s.translate(0, -len, 0)

        if (len > 10) {
          for (let i = 0; i < 2; i ++) {
            s.rotateY(s.random(100, 140))
            s.push()
            s.rotateZ(s.random(20, 50))
            branch(len * 0.7)
            s.pop()
          }
        } else {
          let r = 180 + s.random(-20, 20)
          let g = 200 + s.random(-20, 20)
          let b = 80 + s.random(-20, 20)
          s.fill(r, g, b)
          s.translate(0, 0, 0)
          s.rotateZ(45)
          s.beginShape()
          for (let i = 45; i < 135; i ++) {
            let rad = 16
            let x = rad * s.cos(i)
            let y = rad * s.sin(i)
            s.vertex(x, y)
          }

          for (let i = 135; i > 45; i --) {
            let rad = 16
            let x = rad * s.cos(i)
            let y = rad * s.sin(-i) + rad
            s.vertex(x, y)
          }
          s.endShape(s.CLOSE)
        }
      }
    }, canvasRef.current)

    return () => {
      sketch.remove()
    }
  })

  return (
    <div ref={canvasRef} className={className}></div>
  )
}