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

[y-71]

When running this script on p5 js's sandbox it's working really fine
When trying to use it inside react i get : Expected an assignment or function call and instead saw an expression no-unused-expressions

I checked previous questions and found out that most of the problems are syntax ones due to not using brackets or semicolons . I did all the good syntax practices but didn't get to make it function

Here is my sketch code on react :

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

        // put setup code here
        t=0; 
        
      }
      p.draw = () => {
        canvas =p.createCanvas(w-50, h-50);
        canvas.style('display','block');
        
        var x_center = (p.windowWidth - w) / 2;
        var y_center = (p.windowHeight - h) / 2;
        canvas.position(x_center, y_center);
        
       t += .01;
        
        for (var j = 2; x = y = j--;){
          for (var i = w; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6){
               j ? i - w / 2 || ( T = p.translate)(-x, -y) : p.push() + T(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));
          
          }  
        }
      }

      window.onresize = function() {
        // assigns new values for width and height variables
        w = window.innerWidth;
        h = window.innerHeight;  
        canvas.size(w,h);
      }
}

[jamesrweb]

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!

[y-71]

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));
            }  
    }

    }
  }
}

[jamesrweb]

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 😄!