p5 js in react : Expected an assignment or function call and instead saw an expression no-unused-expressions about react HOT 3 CLOSED

Your code is very hard to read but there are some things I have noticed:

1. You don't need to use window.onresize, you can just use p5.windowResized which is the p5 version and thus best to use for sketches
2. You repeatedly initialise your canvas in the draw loop, you should instead move the canvas initialisation and styling into the setup function
3. You are missing p5.[something] declarations within your code in places

As an example, I tidied some things up but your code is quite a mess in the draw loop so I leave that up to you to fix as I really don't know what it's meant to do. Here are some of the fixes I made though for you to take away and work on:

export default function sketch(p5) {
  let t = 0;
  let canvas = null;
  let w = window.innerWidth;
  let h = window.innerHeight;
  let x, y, d, T;

  function centerCanvas(x, y) {
    canvas.position(x, y);
  }

  function setDimensions() {
    w = p5.windowWidth;
    h = p5.windowHeight;
  }

  p5.setup = () => {
    canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight);
    setDimensions();
    centerCanvas(w / 2, h / 2);
    t = 0;
  }

  p5.windowResized = () => {
    p5.resizeCanvas(p5.windowWidth, p5.windowHeight);
    setDimensions();
    centerCanvas(w / 2, h / 2);
  }

  p5.draw = () => {
    t += .01;
    for (var j = 2; x = y = j--;) {
      for (var i = w; d = p5.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6) {
        j ? i - w / 2 || (T = p5.translate)(-x, -y) : p5.push() + T(x + w / 2, y + w / 2) + p5.rotate(d + Math.PI / 4) + p5.line(-600, 100, 600, 100) + p5.pop(i % 100 || p5.scale(80));
      }
    }
  }
}

If you need further help, please tidy the code and be more specific by including line numbers and a description of what you have tried thusly. Hope this gave some insights for you though!

from react.

Hi James ,
I just solved , turns out your wrapper doesn't accept the + operator for a reason i ignore
Here is the snippet of the correct working code :

export default function sketch(p){
  let t;
  let canvas ; 
  let w = window.innerWidth;
  let h = window.innerHeight;  
  let x ; let y ; let d ; 
  p.setup=()=>{

      canvas =p.createCanvas(w-50, h-50);
      canvas.style('display','block');
    // put setup code here
    t=0; 
    const x_center = (p.windowWidth - w) / 2;
    const y_center = (p.windowHeight - h) / 2;
    canvas.position(x_center, y_center);
    
  }
  p.draw = () => {
    p.background(255);
    t += .0008;
    
    for (let j = 2; x = y = j--;){  // j >0
      for (let i = w-200; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6, i>0){  // i >0
           if (j){ i - w / 2 || (p.translate)(-x, -y) ;
          }else{ 
                p.push() ;
                p.translate(x + w / 2, y + w / 2) ;
                p.rotate  (d + Math.PI / 4)    ;
                p.line(-600, 100, 600, 100) ;
                p.pop(i % 100 || p.scale(80) + 
                p.text("Testing", Math.cos(i) * 12 - 7, Math.sin(i - t) * 1));
            }  
    }

    }
  }
}

from react.

react-p5-wrapper doesn't affect any operators, it is pure JavaScript. The code itself was the issue in that case. Either way I am glad you could resolve the issue, raise another ticket if you require further support 😄!

from react.