Estoy tratando de convertir un boceto para usar el nodo y agrupar un archivo js de distribución. Supongo que algunos de los nombres de funciones en p5js deben reservarse (para combatir esto, iba a usar un indicador de desarrollo para no ofuscar el código al menos para las pruebas).
Para encapsular el código estoy usando este método:
let sketch = function(p) { p.setup = function() { ... } let myp5 = new p5(sketch); Todo parece funcionar bien, excepto que no puedo llamar a la función show desde dentro de mi clase de partículas ( ReferenceError: noStroke is not defined )
Aquí está el js completo:
let canvasBG; let particles = []; let audioFile; let amplitude; let vol; let loaded = false; let x = 0; let xoff = 0; let yoff = 0; let sketch = function(p) { p.setup = function() { canvasBG = p.createCanvas(p.windowWidth, p.windowHeight); audioFile = p.loadSound("audio/mom.mp3", p.audioLoaded); amplitude = new p5.Amplitude(); p.rectMode(p.CENTER); p.frameRate(30); canvasBG.background(255); } p.audioLoaded = function() { audioFile.play(); audioFile.loop(); loaded = true; } p.draw = function() { let nx = p.noise(xoff) * p.windowWidth; let ny = p.noise(yoff) * p.windowHeight; xoff = xoff + 0.01; yoff = yoff + 0.02; vol = amplitude.getLevel(); let volumeGate = p.map(vol, 0, 1, p.random(5,12), p.random(80, 550)); if (loaded) { let b = new Particle(nx, ny, volumeGate); particles.push(b); if (volumeGate > 75) { canvasBG.background(p.random(255), p.random(255), p.random(255)); } for (let particle of particles) { particle.show(); } if (particles.length >= 10) { particles.splice(0, 1); } } else { x+= 0.05; p.translate (p.windowWidth - 30, 30); p.rotate(x); p.noStroke(); p.rect(0, 0, 2, 40, 0.1); p.fill(0, 0, 0, x * 3); } } } class Particle { constructor(x, y, r) { this.x = x; this.y = y; this.r = r; } show() { noStroke(); // this is throwing an error fill(random(0, 255), random(0, 255), random(0, 255), random(100,255)); ellipse(this.x, this.y, this.r * 2); } } let myp5 = new p5(sketch);Puede ejecutar la demostración completa actual aquí: https://editor.p5js.org/lharby/sketches/wPF908tqX
Intenté convertir la clase en una función y pasar argumentos, de manera similar un objeto y luego adjuntar una función al objeto, pero parece que no puedo hacer que nada funcione, además prefiero mantener la clase como está.
¿Cómo es la mejor manera de hacer esto?
¡Estás súper cerca!
Debido a que está utilizando p5 en modo de instancia, las funciones p5 (como noStroke() , fill() , ellipse() ) no estarán disponibles en el ámbito global, sino a través de la referencia p .
En su clase, simplemente necesita pasar p también, de forma similar a como ya lo ha usado con el resto del código:
class Particle { constructor(x, y, r) { this.x = x; this.y = y; this.r = r; } show(p) { p.noStroke(); p.fill(p.random(0, 255), p.random(0, 255), p.random(0, 255), p.random(100,255)); p.ellipse(this.x, this.y, this.r * 2); } }y en draw pasar la referencia a p5:
//... for (let particle of particles) { particle.show(p); } //...