Обновление: Вопрос решен. Вот рабочий экземпляр кода на тот случай, если кому-нибудь понадобится помощь / справка: https://editor.p5js.org/Rod1C/sketches/iaKn9CKCS
Я новичок в p5.js и пытаюсь загрузить несколько эскизов на веб-страницу. Это, конечно, проблематично, так как я не могу загрузить разные файлы JavaScript с одинаковыми именами функций. Для такого типа проблем в p5 есть что-то под названием «Режим экземпляра».
Я пытался «создать экземпляр» своего кода, что в основном означает его написание в этом режиме экземпляра, однако я продолжаю получать множество ошибок- это немного вне моей досягаемости!
Это мой рабочий код p5.js (не реализован): 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);
}
И вот как далеко я продвинулся в его создании, хотя, как вы можете видеть, яЯ как бы зашел в тупик, так как я не могу исправить новые всплывающие ошибки: 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);
Так что, если кто-нибудь может указать мне правильное направление (скажите мне, чтоЯ делаю неправильно) или исправляю существующие ошибки, это было бы здорово!
Примечание: я знаю, что могу встраивать их через iFrames, однако это не сработает для эффекта, который я ищу.