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.
