javascriptp5.js

p5.js went blank when I tried to run my code


I'm trying to embed 2 p5 code on the same page, so I modified my original p5 code to give an id to the canvas. However, when I tried to run the code, the whole p5 online editor page went blank.

The code runs well before I added the id. Can anyone let me know what the issue is?

I added an id for the canvas and include the id name on html.

var s1 = function(f) {
  var particles2 = [];
  var viscosity2;
  var c2;
  var canvas;

  f.setup = function() {
    canvas = f.createCanvas(f.windowWidth, f.windowHeight);
    f.frameRate(60);
    f.noStroke();

    c2 = f.color(13, 104, 167);
    viscosity2 = 0.8;

    // increase the density of particles
    for (var i = 0; i < 900; i++) {
      particles2.push(new Particle2(f.random(f.width / 8, f.width / 4), f.random(f.height - f.height / 18, f.height + f.height / 15), c2));
    }
  };

  f.keyPressed = function() {
    if (f.key === ' ') {
      f.noLoop();
    }
    if (f.key === 's') {
      f.save();
    }
  };

  f.draw = function() {
    f.background(0);

    // makes the particles attract/repel each other
    f.handleFooterInteractions();

    // moves each particle, then draws it
    for (var i = 0; i < f.particles2.length; i++) {
      f.particles2[i].move();
      f.particles2[i].display();
    }
  };

  f.Particle2 = function(x, y, c)  {
    this.xPos = x;
    this.yPos = y;
    this.xVel = 0;
    this.yVel = 0;

    //particle size
    this.mass = f.random(0.005, 0.02);
    this.colour = c;

    // moves the particle
    this.move = function() {
      this.xPos += this.xVel;
      this.yPos += this.yVel;
    };

    // displays the particle
    this.display = function() {
      f.fill(this.colour);
      f.ellipse(this.xPos, this.yPos, this.mass * 1000, this.mass * 1000);
    };
  }

  f.handleFooterInteractions = function() {
    for (var i = 0; i < f.particles2.length; i++) {
      var accX = 0;
      var accY = 0;

      // particle interaction
      for (var j = 0; j < f.particles2.length; j++) {
        if (i !== j) {
          var x = f.particles2[j].xPos - f.particles2[i].xPos;
          var y = f.particles2[j].yPos - f.particles2[i].yPos;
          var dis = f.sqrt(x * x + y * y);
          if (dis < 1) dis = 1;

          //adjust circle size
          var force = (dis - 600) * f.particles2[j].mass / dis;
          accX += force * x;
          accY += force * y;
        }

        // mouse interaction
        var x = mouseX - f.particles2[i].xPos;
        var y = mouseY - f.particles2[i].yPos;
        var dis = f.sqrt(x * x + y * y);

        // adds a dampening effect
        if (dis < 40) dis = 40;
        if (dis > 50) dis = 50;

        var force = (dis - 50) / (5 * dis);
        accX += force * x;
        accY += force * y;
      }
      f.particles2[i].xVel = f.particles2[i].xVel * viscosity2 + accX * f.particles2[i].mass;
      f.particles2[i].yVel = f.particles2[i].yVel * viscosity2 + accY * f.particles2[i].mass;
    }
  }

};

var myp5 = new p5(s1, 'footer');


Solution

  • On the one hand there are way too many f. in your code, on the other hand some are missing. You must distinguish between the functions, properties, and classes populated by p5, which must be addressed by f., and your own functions, properties, and classes, which have their own scope:

    var s1 = function(f) {
      var particles2 = [];
      var viscosity2;
      var c2;
      var canvas;
    
      f.setup = function() {
        canvas = f.createCanvas(f.windowWidth, f.windowHeight);
        f.frameRate(60);
        f.noStroke();
    
        c2 = f.color(13, 104, 167);
        viscosity2 = 0.8;
    
        // increase the density of particles
        for (var i = 0; i < 900; i++) {
          particles2.push(new Particle2(f.random(f.width / 8, f.width / 4), f.random(f.height - f.height / 18, f.height + f.height / 15), c2));
        }
      };
    
      f.keyPressed = function() {
        if (f.key === ' ') {
          f.noLoop();
        }
        if (f.key === 's') {
          f.save();
        }
      };
    
      f.draw = function() {
        f.background(0);
    
        // makes the particles attract/repel each other
        handleFooterInteractions();
    
        // moves each particle, then draws it
        for (var i = 0; i < particles2.length; i++) {
          particles2[i].move();
          particles2[i].display();
        }
      };
    
      Particle2 = function(x, y, c)  {
        this.xPos = x;
        this.yPos = y;
        this.xVel = 0;
        this.yVel = 0;
    
        //particle size
        this.mass = f.random(0.005, 0.02);
        this.colour = c;
    
        // moves the particle
        this.move = function() {
          this.xPos += this.xVel;
          this.yPos += this.yVel;
        };
    
        // displays the particle
        this.display = function() {
          f.fill(this.colour);
          f.ellipse(this.xPos, this.yPos, this.mass * 1000, this.mass * 1000);
        };
      }
    
      handleFooterInteractions = function() {
        for (var i = 0; i < particles2.length; i++) {
          var accX = 0;
          var accY = 0;
    
          // particle interaction
          for (var j = 0; j < particles2.length; j++) {
            if (i !== j) {
              var x = particles2[j].xPos - particles2[i].xPos;
              var y = particles2[j].yPos - particles2[i].yPos;
              var dis = f.sqrt(x * x + y * y);
              if (dis < 1) dis = 1;
    
              //adjust circle size
              var force = (dis - 600) * particles2[j].mass / dis;
              accX += force * x;
              accY += force * y;
            }
    
            // mouse interaction
            var x = f.mouseX - particles2[i].xPos;
            var y = f.mouseY - particles2[i].yPos;
            var dis = f.sqrt(x * x + y * y);
    
            // adds a dampening effect
            if (dis < 40) dis = 40;
            if (dis > 50) dis = 50;
    
            var force = (dis - 50) / (5 * dis);
            accX += force * x;
            accY += force * y;
          }
          particles2[i].xVel = particles2[i].xVel * viscosity2 + accX * particles2[i].mass;
          particles2[i].yVel = particles2[i].yVel * viscosity2 + accY * particles2[i].mass;
        }
      }
    
    };
    
    var myp5 = new p5(s1);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>