No sé por qué mis partículas no aparecen en la pantalla, cuando reproduzco el boceto, todo se congela en su lugar y las partículas no salen. Se supone que las partículas salen de los círculos, mientras que el círculo es un visualizador de audio de la canción. Estoy siguiendo un tutorial y haciendo algunos ajustes por mi cuenta para poder aprender el código, pero no puedo mostrar las partículas en la pantalla.
const { Part } = require("c:/users/12403/.vscode/extensions/samplavigne.p5-vscode-1.2.8/p5types"); var song var fft var img var particles = [] function preload(){ song = loadSound('Clair de Lune With Rain.mp3') img = loadImage('rain.jpg') } function setup() { createCanvas(windowWidth, windowHeight); angleMode(DEGREES) imageMode(CENTER) img.filter(BLUR, 2) fft = new p5.FFT() } function draw() { background(0) stroke(255) strokeWeight(3) noFill() translate(width/2, height/2) image(img, 0, 0, width, height) fft.analyze() amp = fft.getEnergy(20,200) var wave = fft.waveform() for (var t = -1; t <= 1; t += 2){ beginShape() for(var i = 0; i <= 180; i+= 0.3){ var index = floor (map(i, 0, width, 0 , wave.length-1)) var r = map(wave[index], -1, 1, 150, 350) var x = r*sin(i) * t var y = r*cos(i) vertex(x,y) } endShape() } var p = new Particle() particles.push(p) for(var i=0; i<particles.length; i++){ particles[i].show() } } function mouseClicked(){ if (song.isPlaying()){ song.pause() } else{ song.play() loop() } } class Particle{ constructor(){ this.pos = p5.Vector.random2D().mult(250) } show(){ noStroke() fill(random) ellipse(this.pos.x, this.pos.y, 4) } }Tu código fallaba porque esto no es válido:
fill(random) La función de fill espera un color o un número, y random es una función, por lo que debe invocar la función aleatoria para obtener un valor numérico. Algo así como fill(random(0, 255)) .
Con eso arreglado, su boceto se ejecuta y dibuja las partículas, pero claramente falta algo de lógica:
Su pregunta es demasiado vaga para averiguar lo que realmente quiere que suceda, y claramente necesita tomar algunos pasos más para que suceda (como configurar la posición de cada partícula de acuerdo con los valores de FFT de audio, o actualizar la posición de cada partícula cada fotograma). Además, definitivamente necesita una forma de limitar la cantidad de partículas, de lo contrario, su boceto eventualmente se detendrá.
var song var fft var img var particles = [] function preload() { // Audio licensed Creative Commons Attribution Non-Commercial // by apoxode https://apoxode.bandcamp.com/releases // http://dig.ccmixter.org/files/Apoxode/63948 song = loadSound('https://www.paulwheeler.us/files/Apoxode_-_halcyon.mp3'); img = loadImage('https://www.paulwheeler.us/files/windows-95-desktop-background.jpg'); } function setup() { createCanvas(windowWidth, windowHeight); angleMode(DEGREES) imageMode(CENTER) img.filter(BLUR, 2) fft = new p5.FFT() } function draw() { background(0) stroke(255) strokeWeight(3) noFill() translate(width / 2, height / 2) image(img, 0, 0, width, height) fft.analyze() amp = fft.getEnergy(20, 200) var wave = fft.waveform() for (var t = -1; t <= 1; t += 2) { beginShape() for (var i = 0; i <= 180; i += 0.3) { var index = floor(map(i, 0, width, 0, wave.length - 1)) var r = map(wave[index], -1, 1, 150, 350) var x = r * sin(i) * t var y = r * cos(i) vertex(x, y) } endShape() } var p = new Particle() particles.push(p) for (var i = 0; i < particles.length; i++) { particles[i].show() } } function mouseClicked() { if (song.isPlaying()) { song.pause() } else { song.play() loop() } } class Particle { constructor() { this.pos = p5.Vector.random2D().mult(250) } show() { noStroke() fill(random()) ellipse(this.pos.x, this.pos.y, 4) } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>