How to persist value using abstracted updateWithProp functions

[hanhanxue]

Hello!

So I have this state hue I'm passing as props to P5Wrapper like so <NextReactP5Wrapper sketch={sketch} hue={hue} />

Inside my sketch function I created a hue variable that keeps track of the hue state using updateWithProps

const sketch = (p5: P5CanvasInstance) => {

  let hue = 0

  p5.updateWithProps = (props:IProps) => {
    if(props.hue) {
      hue = props.hue
    }
    palette(p5, hue)
  }
  
  p5.setup = () => {
    p5.createCanvas(WIDTH, HEIGHT)
    p5.background(BG)
  }

  p5.windowResized = () => {
    palette(p5, hue)
  }

and this works well, but I'm wondering how would the code look like if I want to use abstracted functions:

const sketch = (p5: P5CanvasInstance) => {

  let hue = 0

  p5.updateWithProps = updateWithProps(p5)
  p5.setup = setup(p5)
  p5.windowResized = windowResized(p5)

How would I set and get the hue variable in updateWithProps and windowResized?

[jamesrweb]

You would need to do it inside those functions before the returned function which takes the props inside there. Just like in the non-abstracted version. Does that make sense?

[hanhanxue]

sorry but I'm still confused..

In the minimal example above:

const sketch = (p5: P5CanvasInstance) => {

  let hue = 0

  p5.updateWithProps = updateWithProps(p5)
  p5.setup = setup(p5)
  p5.windowResized = windowResized(p5)
}

Would you be able to show an example? I'm trying but have no idea how to pass the let hue variable inside sketch..

const updateWithProps = (p5: P5CanvasInstance) => {
  return (props: IProps) => {
    tonalPalette(p5, 12, props.hue)
  }
}

const windowResized = (p5: P5CanvasInstance) => {
  return (props: IProps) => {
    tonalPalette(p5, 12, props.hue)
  }
}

Right now when I resize the window the let hue variable resets (which makes sense)

[hanhanxue]

I'm going to give all these a proper look tonight, thank you so much for the examples <3

[jamesrweb]

No problem, if there's anything else that comes to mind, just message anytime 😊👍🏻!

[hanhanxue]

I finally looked through all the examples, thanks again for providing them!!

In the end I found putting the functions directly inside sketch works best. Below is the full (still minimal) example of what I'm trying to do. Is there are better way to do this currently? My use of updateWithProps seems convoluted..

For context I'm referencing the rotation example in the docs and using updateWithProps to update internal variables. I feel it would be a common use case to leverage react to build UI and keep track of states, and have the sketch read those states and update accordingly.

"use client"


import { P5CanvasInstance } from "@p5-wrapper/react"
import { NextReactP5Wrapper } from "@p5-wrapper/next"

import { useState } from "react"

import UISidebar from "@/components/UI/UISidebar/UISidebar"
import UISlider from "@/components/UI/UISlider"

import { Hct } from "@material/material-color-utilities"

const BG = "#e5e5e5"
const SWATCHDIMENSIONS = { width: 100, height: 162 }

const swatch = (
  p5: P5CanvasInstance,
  x: number,
  y: number,
  rounded: boolean,
  hue: number,
  chroma: number,
  tone: number,
  step: number,
) => {

  const color = { hue, chroma, tone};
  const hctObj = Hct.from(color.hue, color.chroma, color.tone);
  const hctArgb = hctObj['argb']
  const rgbHex = hctArgb.toString(16).slice(2)


  p5.strokeWeight(0)
  p5.fill(`#${rgbHex}`)

  p5.rect(x, y, SWATCHDIMENSIONS.width, SWATCHDIMENSIONS.height, rounded)

  const textColor = tone <= 50 ? "white" : "black"
  p5.fill(textColor)
  p5.textSize(18)
  p5.textAlign(p5.CENTER, p5.CENTER)
  p5.text(tone, x + SWATCHDIMENSIONS.width * .5, y + SWATCHDIMENSIONS.height * .5)
}

const tonalPalette = (p5: P5CanvasInstance, steps: number, hue: number, chroma: number) => {

  const tonalPaletteWidth = SWATCHDIMENSIONS.width * steps
  const tonalPaletteHeight = SWATCHDIMENSIONS.height

  const anchorX = (p5.width - tonalPaletteWidth) * 0.5
  const anchorY = (p5.height - tonalPaletteHeight) * 0.5

  for (let i = 0; i < steps; i++) {

    const tone = Math.floor(100 / (steps - 1) * i)

    swatch(p5, 
      i * SWATCHDIMENSIONS.width + anchorX, 
      anchorY, 
      false, 
      hue,
      chroma,
      tone,
      i)
  }
}

interface IProps {
  hue: number
  steps: number
  chroma: number
}



/////////////////////////////////////////////////
const sketch = (p5: P5CanvasInstance) => {
  
  const HEROCONTAINER = document.getElementById("heroContainer")
  let hue = 0
  let chroma = 0
  let steps = 0

  p5.updateWithProps = (props: IProps) => {
    hue = props.hue
    steps = props.steps
    chroma = props.chroma

    p5.background(BG)
    tonalPalette(p5, steps, hue, chroma)
  }

  p5.setup = () => {
    const WIDTH = HEROCONTAINER?.clientWidth
    const HEIGHT = HEROCONTAINER?.clientHeight

    p5.createCanvas(WIDTH, HEIGHT)
    p5.background(BG)
  }

  p5.windowResized = () => {
    const WIDTH = HEROCONTAINER?.clientWidth
    const HEIGHT = HEROCONTAINER?.clientHeight

    p5.resizeCanvas(WIDTH, HEIGHT)
    p5.background(BG)

    tonalPalette(p5, steps, hue, chroma)
  }
}

export default function Sketch() {
  const [hue, setHue] = useState(180)
  const [chroma, setChroma] = useState(50)
  const [steps, setSteps] = useState(12)

  return (
    <>
      <UISidebar.Root>
        <UISidebar.Group title="Palette">
        <UISlider
            value={steps}
            onValueChange={setSteps}
            label="Steps"
            min={4}
            max={16}
          />

          <UISlider
            value={hue}
            onValueChange={setHue}
            label="Hue"
            min={0}
            max={360}
            unit="°"
          />

<UISlider
            value={chroma}
            onValueChange={setChroma}
            label="Chroma"
            min={0}
            max={120}
            unit=""
          />

        </UISidebar.Group>
      </UISidebar.Root>

      <NextReactP5Wrapper sketch={sketch} hue={hue} steps={steps} chroma={chroma}/>
    </>
  )
}

[jamesrweb]

I refactored your solution a little:

"use client";

import { P5CanvasInstance, SketchProps } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";
import React, { useState, useMemo } from "react";
import UISidebar from "@/components/UI/UISidebar/UISidebar";
import UISlider from "@/components/UI/UISlider";
import { Hct } from "@material/material-color-utilities";

type SwatchDimensions = {
  width: number;
  height: number;
};

type IProps = SketchProps & {
  hue: number;
  steps: number;
  chroma: number;
  swatchDimensions: SwatchDimensions;
};

type TonalPaletteConfig = {
  p5: P5CanvasInstance<IProps>;
  steps: number;
  hue: number;
  chroma: number;
  swatchDimensions: SwatchDimensions;
};

type ElementWithDimensions = {
  element: HTMLElement;
  dimensions: DOMRect;
};

// TODO: Should be held by react also
const BG = "#e5e5e5";

function renderTonalPalette(config: TonalPaletteConfig) {
  const tonalPaletteWidth = config.swatchDimensions.width * config.steps;
  const tonalPaletteHeight = config.swatchDimensions.height;
  const anchorX = (config.p5.width - tonalPaletteWidth) * 0.5;
  const anchorY = (config.p5.height - tonalPaletteHeight) * 0.5;

  for (let i = 0; i < config.steps; i++) {
    const tone = Math.floor((100 / (config.steps - 1)) * i);
    const color = { hue: config.hue, chroma: config.chroma, tone };
    const hctObj = Hct.from(color.hue, color.chroma, color.tone);
    const hctArgb = hctObj["argb"];
    const rgbHex = hctArgb.toString(16).slice(2);
    const textColor = tone <= 50 ? "white" : "black";
    const x = i * config.swatchDimensions.width + anchorX;
    const y = anchorY;

    config.p5.strokeWeight(0);
    config.p5.fill(`#${rgbHex}`);
    config.p5.rect(
      x,
      y,
      config.swatchDimensions.width,
      config.swatchDimensions.height,
    );
    config.p5.fill(textColor);
    config.p5.textSize(18);
    config.p5.textAlign(config.p5.CENTER, config.p5.CENTER);
    config.p5.text(
      tone,
      x + config.swatchDimensions.width * 0.5,
      y + config.swatchDimensions.height * 0.5,
    );
  }
}

function getElementByIdWithDimensions(id: string): ElementWithDimensions {
  const element = document.getElementById(id);

  if (element === null) {
    throw new Error(`The element with id '#${id}' does not exist.`);
  }

  return {
    element,
    dimensions: element.getBoundingClientRect(),
  };
}

function setup(p5: P5CanvasInstance<IProps>, container: ElementWithDimensions) {
  return () => {
    const WIDTH = container.dimensions.width;
    const HEIGHT = container.dimensions.height;

    p5.createCanvas(WIDTH, HEIGHT);
    p5.background(BG);
  };
}

function updateWithProps(
  p5: P5CanvasInstance<IProps>,
  props: IProps,
): [
  hue: number,
  chroma: number,
  steps: number,
  swatchDimensions: SwatchDimensions,
] {
  const hue = props.hue;
  const steps = props.steps;
  const chroma = props.chroma;
  const swatchDimensions = props.swatchDimensions;

  p5.background(BG);
  renderTonalPalette({ p5, steps, hue, chroma, swatchDimensions });

  return [hue, chroma, steps, swatchDimensions] as const;
}

function windowResized(
  p5: P5CanvasInstance<IProps>,
  propsFactory: () => IProps,
  container: ElementWithDimensions,
) {
  return () => {
    const WIDTH = container.dimensions.width;
    const HEIGHT = container.dimensions.height;
    const { steps, hue, chroma, swatchDimensions } = propsFactory();

    p5.resizeCanvas(WIDTH, HEIGHT);
    p5.background(BG);
    renderTonalPalette({ p5, steps, hue, chroma, swatchDimensions });
  };
}

const sketch = (p5: P5CanvasInstance<IProps>) => {
  const container = getElementByIdWithDimensions("hero_Container");
  let hue = 0;
  let chroma = 0;
  let steps = 0;
  let swatchDimensions = { width: 0, height: 0 };

  p5.updateWithProps = (props: IProps) => {
    [hue, chroma, steps, swatchDimensions] = updateWithProps(p5, props);
  };
  p5.setup = setup(p5, container);
  p5.windowResized = windowResized(
    p5,
    () => ({ hue, chroma, steps, swatchDimensions }),
    container,
  );
};

export default function Sketch() {
  const [hue, setHue] = useState(180);
  const [chroma, setChroma] = useState(50);
  const [steps, setSteps] = useState(12);
  const swatchDimensions = useMemo(() => ({ width: 100, height: 162 }), []);

  return (
    <>
      <UISidebar.Root>
        <UISidebar.Group title="Palette">
          <UISlider
            value={steps}
            onValueChange={setSteps}
            label="Steps"
            min={4}
            max={16}
          />

          <UISlider
            value={hue}
            onValueChange={setHue}
            label="Hue"
            min={0}
            max={360}
            unit="°"
          />

          <UISlider
            value={chroma}
            onValueChange={setChroma}
            label="Chroma"
            min={0}
            max={120}
            unit=""
          />
        </UISidebar.Group>
      </UISidebar.Root>

      <NextReactP5Wrapper
        sketch={sketch}
        hue={hue}
        steps={steps}
        chroma={chroma}
        swatchDimensions={swatchDimensions}
      />
    </>
  );
}

I didn't test it though but in general, this should roughly work 👍🏻. The global BG variable should ideally be controlled by react also but I leave that to you. Feel free to adapt to your needs or take some ideas from this but as I said, I never tested it yet. I will close this conversation now anyway since it seems to be resolved with your previous answer and with the raising of #372 ☺️!