Update: Question has been solved. Here's the working instantiated code in case anybody needs it for help/reference: https://editor.p5js.org/Rod1C/sketches/iaKn9CKCS
I'm new to p5.js and have been trying to load multiple sketches onto a web page. This of course is problematic as I can't load different JavaScript files with the same function names. For this type of problem, p5 has something called 'Instance Mode'.
I've been trying to 'instantiate' my code, which basically means writing it in this instance mode, however I keep getting plenty of errors – this is a bit out of my reach!
This is my working p5.js code (not instantiated): https://editor.p5js.org/Rod1C/sketches/bXxGdhRPl
class Particle {
constructor(l) {
this.acceleration = createVector(0, 0);
this.velocity = createVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));
this.position = l ? l.copy() : createVector(Math.random()*(windowWidth*0.8), Math.random()*(windowHeight*0.7),);
this.home = this.position.copy();
}
run() {
this.update();
this.display();
}
// Method to update position
update() {
this.acceleration.x = -0.01*(this.position.x - this.home.x);
this.acceleration.y = -0.01*(this.position.y - this.home.y);
this.velocity.add(this.acceleration);
this.velocity.mult(0.9);
this.position.add(this.velocity);
// lifespan -= 1.0;
}
// Method to display
display() {
noStroke();//stroke(255, lifespan);
//fill(255, lifespan);
var notblue = map(abs(this.velocity.mag()),0,5,27,255);
fill(notblue,27,27);
ellipse(this.position.x, this.position.y, 15, 15);
}
}
class ParticleSystem {
constructor(position) {
this.origin = position.copy();
this.particles = [];
}
addParticle() {
//this.particles.push(new Particle(this.origin));
this.particles.push(new Particle());
}
run() {
for (let i = this.particles.length-1; i >= 0; i--) {
this.particles[i].run();
// if (p.isDead()) {
// particles.remove(i);
// }
}
}
move_away_from(x, y){
for (let i = 0; i < this.particles.length; i++) {
let p = this.particles[i];
let d = dist(x*0.5,y, p.position.x*0.5, p.position.y);
if( d < 200 ){
p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
}
}
}
}
var ps;
function setup() {
var canvas = createCanvas(windowWidth*0.7, windowHeight*0.7);
ps = new ParticleSystem(createVector(width/2, 50));
for (var i=0; i<1200; i++) {
ps.addParticle();
}
}
function draw() {
background(255);
ps.move_away_from(mouseX, mouseY);
ps.run();
}
function windowResized() {
resizeCanvas(windowWidth*0.8, windowHeight*0.7);
}
And this is how far I've gotten with instantiating it, although as you can see I'm kind of at a dead end as I can't seem to fix the new errors that pop up: https://editor.p5js.org/Rod1C/sketches/E0QS422xy
var sketch = function( p ) {
class Particle {
constructor(l) {
this.acceleration = p.createVector(0, 0);
this.velocity = p.createVector(0,0); //random(-0.0001, 0.00001), random(-0.001, 0.0001));
this.position = l ? l.copy() : createVector(Math.random()*(windowWidth*0.8), Math.random()*(windowHeight*0.7),);
this.home = this.position.p.copy();
}
run() {
this.p.update();
this.p.display() ;
}
// Method to update position
update() {
this.acceleration.x = -0.01*(this.position.x - this.home.x);
this.acceleration.y = -0.01*(this.position.y - this.home.y);
this.velocity.p.add(this.acceleration);
this.velocity.p.mult(0.9);
this.position.p.add(this.velocity);
// lifespan -= 1.0;
}
// Method to display
display() {
p.noStroke();
var notblue = map(abs(this.velocity.mag()),0,5,27,255);
p.fill(notblue,27,27);
p.ellipse(this.position.x, this.position.y, 15, 15);
}
}
class ParticleSystem {
constructor(position) {
this.origin = position.p.copy();
this.particles = [];
}
addParticle() {
//this.particles.push(new Particle(this.origin));
this.particles.push(new Particle());
}
run() {
for (let i = this.particles.length-1; i >= 0; i--) {
this.particles[i].p.run();
}
}
move_away_from(x, y){
for (let i = 0; i < this.particles.length; i++) {
let p = this.particles[i];
let d = p.dist(x*0.5,y, p.position.x*0.5, p.position.y); }
if( d < 200 ){
p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
}
}
}
var ps;
p.setup = function() {
var canvas = p.createCanvas(p.windowWidth*0.7, p.windowHeight*0.7);
ps = new ParticleSystem(p.createVector(p.width/2, 50));
for (var i=0; i<1200; i++) {
ps.p.addParticle() }
}
p.draw = function() {
p.background(255);
ps.p.move_away_from(mouseX, mouseY);
ps.p.run();
}
p.windowRecreateCanvasd = function() {
p.recreateCanvasCanvas(windowWidth*0.8, windowHeight*0.7);
}
};
var godspeed = new p5(sketch);
So if anybody could either point me in the right direction (tell me what I'm doing wrong) or fix the existing mistakes, that would be great!
Note: I'm aware that I can embed them through iFrames, however that will not work for the effect I'm looking for.
Your code contains a few inconsistencies related to how you're using the p variable.
The p variable (which I would have called sketch to make it more obvious) is a reference to the sketch itself. You can think of the sketch as containing all of the variables and functions that come from the p5.js library.
That means that anytime you previously used a variable or function that came from p5.js, in instance mode you should go through your sketch variable. I see a few things you're still referencing in the "global" mode style:
windowWidth should be p.windowWidthwindowHeight should be p.windowHeightcreateVector() should be p.createVector()map() should be p.map()abs() should be p.abs()On the other hand, you do not need to reference the sketch when you're going through a variable or function that didn't come from p5.js. Specifically, there are a few things you're adding p to that don't need it:
this.p.update() should be this.update()this.velocity.p.add() should be this.velocity.add()ps.p.addParticle() should be ps.addParticle()These are not exhaustive lists; there are probably other things you need to fix.
Taking a step back, the best advice I can give you is to work in smaller steps. Try starting with a blank sketch and getting instance mode working for a smaller example. Then add a small amount of code (just one or two lines) and make sure that works before moving on. Good luck.