The particles aren't showing up on screen

Question

I don't know why my particles won't show up on the screen, when I play the sketch everything is frozen in place and particles don't come out. Particles are supposed to come out from the circles, while the circle is an audio visualizer of the song. I'm following a tutorial and making a few tweaks on my own so I can actually learn the code, but I'm stuck on showing the particles on the screen.

 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)
  }
}

Answer 1

Your code was crashing because this is invalid:

    fill(random)

The fill function expects a color or number, and random is a function, so you need to invoke the random function to get a numeric value. Something like fill(random(0, 255)).

With that fixed your sketch runs and draws the particles, but there is clearly some logic missing:

• you create one new particle per frame
• each new particle gets a random position around a circle with a radius of 200
• each particle's position has nothing to do with the audio and never changes over time
• you never remove particles

You question is much to vague to figure out what you actually want to have happen, and you clearly need to take a few more steps to make it happen (such as setting each particle's position according to the audio FFT values, or updating each particle's position each frame). Also You definitely need a way to limit the number of particles, otherwise your sketch will eventually grind to a halt.

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>