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