How can I make this particle code run as I want it?

Question

I'm trying to make a voice recorder visualizer where the shapes would interact with little squares that are being passed from the left to the right of the screen to make it seem like it's recording a voice note. For some reason, I cannot get the squares to space exactly how I want them to, so I decided to push one square out at a time and when that square reaches a certain part on the screen, another square would start from the beginning so they can move at the speed and have the distance between each other I would like.

The problem is when I get the square to reach a certain part on the screen, the other square does not add at all, I tried adding a fill to change the color to see what happens but it just changes the color of the current square and that's it.

var nodes;

function setup() {
  createCanvas(windowWidth, windowHeight)

  nodes = new Particle();
}

function draw() {
  background(0);

  if (!nodes.deleteParticles()) {
    nodes.draw();
    nodes.update()
  }


}

function Particle() {
  this.x = windowWidth / 2;
  this.y = windowHeight / 2;
  this.width = 20;
  this.height = 50;

  this.particles = [];
  this.draw = function() {
    background(0)
    fill(255);

    this.particles.push(rect(this.x, this.y, this.width, this.height, 5))

    if (this.update()) {
      this.particles.push(rect(this.x, this.y, this.width, this.height, 5))
    }

  }
  this.update = function() {
    this.x -= 2;

    if (this.x < (windowWidth / 2) - 300) {
      return true;
    } else {
      return false;
    }
  }
  this.deleteParticles = function() {
    if (this.x < -20) {
      return true;
    } else {
      return false;
    }
  }

}

user_229247 · Answer

I believe you have fundamentally misunderstood how the rect() function works. The rect() function, and other shape drawing functions in p5.js, do not return a value. All shapes are draw in what is called "immediate mode" which means the shapes are drawn right away and are not persistent objects that can be manipulated. If you want to move a rectangle for example you need to clear the canvas and redraw the rectangle.

Here's is the most sensible adjustment of your sketch that I could come up with:

var nodes;

function setup() {
  createCanvas(windowWidth, windowHeight)

  nodes = new Particle();
}

function draw() {
  background(0);

  if (!nodes.deleteParticles()) {
    nodes.update();
  }
  
  nodes.draw();
}

function Particle() {
  this.x = windowWidth / 2;
  this.y = windowHeight / 2;
  this.width = 20;
  this.height = 50;

  this.particles = [];
  this.draw = function() {
    fill(255);

    for (const p of this.particles) { 
      rect(p.x, p.y, p.w, p.h, 5);
    }
  }
  
  this.update = function() {
    this.x -= 2;
    
    this.particles.push({
      x: this.x,
      y: this.y,
      w: this.width,
      h: this.height
    });

    if (this.x < (windowWidth / 2) - 300) {
      return true;
    } else {
      return false;
    }
  }
  
  this.deleteParticles = function() {
    if (this.x < -20) {
      return true;
    } else {
      return false;
    }
  }
}

How can I make this particle code run as I want it?

1 Answers