How do you pass value in props over to a vanilla .js class? about react

[and-who]

Im not sure if I understand your Problem.

You want to have the testValue from the props to be available in the p.setup Function?

e.g.:

  p.setup = function () {
    console.log(testValue)
  };

This is currently not Possible, since the 'setup' Function is called via the p5 constructor and at this point the testValue is not yet set by the myCustomRedrawAccordingToNewPropsHandler

[vennsoh]

Yes, I'm trying to figure how can I pass the prop value over into setup().
As it's fairly common to generate a bunch of particles off a .js class.

I created my UI in React so that I can manipulate the parameters (propValue)
The value is needed in the .js class.

If this is currently not possible, do you know if there's any hacky way? Or on top of your mind any pseudo code steps you could school me so I can go investigate?

let propValue; 

p.setup = () => {
    p.createCanvas(640, 360)
    for (let i = 0; i < 10; i++) {
        flock.push(new Particle(p, propValue))
    }
}

p.myCustomRedrawAccordingToNewPropsHandler = props => {
    if (props.propValue) {
        propValue = props.propValue
    }
}

It's interesting that it works in draw() but not setup() ?

[and-who]

You can write your own init() Function and call this in the draw function.

e.g.:

  initialized = false;
  init = function () {
    console.log(propValue);
  }

  ...

  p.draw = function () {
    if( !initialized ) {
      init();
      initialized = true;
    }
    ...
  };

[vennsoh]

Thanks @and-who
I tried but it didn't work. The prop value is able to get passed into init function scope but not into the setup(). I believe setup() is only run once. If I use the OOTB createSlider from p5 it'll work but I can't hook it up with my own React UI.

import Particle from "./Particle"
import "p5/lib/addons/p5.dom.min"

export default function sketch(p) {
    let bug1, bug2, diameter
    diameter = 10
    
    const init = () => {
        console.log("here0 " + diameter)
        p.setup = () => {
            p.createCanvas(710, 400)
            // diameter = p.createSlider(10, 30, 15, 1)
            bug1 = new Particle(p, diameter)
            bug2 = new Particle(p, diameter)
        }
    }
    init()

    p.myCustomRedrawAccordingToNewPropsHandler = function(props) {
        if (props.diameter) {
            diameter = props.diameter
        }
    }

    p.draw = () => {
        init()
        p.background(50, 89, 100)
        bug1.move()
        bug1.display()
        bug2.move()
        bug2.display()
    }
}

Particle.js

export default class Particle {
    constructor(p5, diameter) {
        this.p5 = p5
        this.diameter = diameter
        this.x = this.p5.random(300)
        this.y = this.p5.random(300)
        this.speed = 1
    }

    move() {
        this.x += this.p5.random(-this.speed, this.speed)
        this.y += this.p5.random(-this.speed, this.speed)
    }

    display() {
        this.p5.ellipse(
            this.x,
            this.y,
            // this.diameter.value(),
            // this.diameter.value()
            this.diameter,
            this.diameter
        )
    }
}

[shtrih]

   p.myCustomRedrawAccordingToNewPropsHandler = function(props) {
        if (props.diameter) {
            bug1.diameter = props.diameter;
            bug2.diameter = props.diameter;
        }
    }

[vennsoh]

@shtrih Oh awesome! I didn't know you can call your particles in the p.myCustom... function.
Now my slider is able to manipulate the value. 1 step closer!

Sketch.tsx

import Particle from "./Particle";

export default p => {
  let bug1;

  p.setup = () => {
    p.createCanvas(710, 400);
    bug1 = new Particle(p);
  };

  p.myCustomRedrawAccordingToNewPropsHandler = function(props) {
    if (props.diameter) {
      bug1.diameter = props.diameter;
    }
    console.log(bug1);
  };

  p.draw = () => {
    p.background(50, 89, 100);
    bug1.move();
    bug1.display();
  };
};

Particle.js

export default class Particle {
    constructor(p5) {
        this.p5 = p5
        this.x = this.p5.random(300)
        this.y = this.p5.random(300)
        this.speed = 1
        this.diameter = 10
    }

    move() {
        this.x += this.p5.random(-this.speed, this.speed)
        this.y += this.p5.random(-this.speed, this.speed)
    }

    display() {
        this.p5.ellipse(
            this.x,
            this.y,
            this.diameter,
            this.diameter
        )
    }
}

But, not sure why...

The ellipse is this weird shape?

[vennsoh]

The newly adjusted value is passed to the particle (the shape is getting bigger)
When first initialise, the particle is getting the default diameter value that I've defined in React.
But not sure why it's getting a weird look (squashed)

[vennsoh]

Weirdly when I do the same for bug1.speed (just a single digit number) it works nicely. The React slider is able to adjust the speed for the particle.

[vennsoh]

Okay, figure that out, because it's returning a string, the string should be converted --> number.

bug1.diameter = Number(props.diameter);

Thanks @shtrih @and-who