# Array releasing particles in specific intervals

**URL:** <https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836>\
**Category:** Coding Questions\
**Created:** [September 17, 2022, 9:00pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836 "2022-09-17T21:00:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [September 17, 2022, 9:00pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/1 "2022-09-17T21:00:51Z")

</div>

Hi,  
I have made an array of particles and I initiate the particles in the draw function to get a particle stream.

But what I really want is to release the particles from the array at specific intervals. Like every second or so. The best would be if I could decide how many particles per interval.

I am working with particles attracted by the flowfield. Here is the full code I am working with:

sketch.js

```auto
var fr;

var inc = 0.06;
var scl = 33;
var cols, rows;

var zoff = 0;

var start = 0;

var flowfield;

let particles = [];

function setup() {
  createCanvas(800, 800);
  pixelDensity(1);

  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP("");

  //particle array
  // p = new Particle();
  // for (var i = 0; i < 200; i++) {
  // particles[i] = new Particle();

  //flowfield array
  flowfield = new Array(cols * rows);
}

function draw() {
  background(20);
  let p = new Particle();
  particles.push(p);
  var yoff = 0;

  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;

      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(0.1);

      flowfield[index] = v;

      xoff += inc;
      strokeWeight(2);
      stroke(70, 100, 0);
      push();
      translate(x * scl, y * scl);
      rotate(v.heading());
      line(0, 0, scl, 0);

      pop();
    }
    yoff += inc;

    zoff += 0.000045;
  }

  for (var i = particles.length-1; i >= 0; i--) {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].show();
    particles[i].edges();
    if (particles[i].finished()) {
      //remove this particle
      particles.splice(i, 1);
      
    }
  }
}

```

particle.js

```auto
function Particle() {
  this.pos = createVector((mouseX+random(-20,20)),(mouseY+random(-20,20)));
  this.vel = createVector(0.2,2);
  this.acc = createVector(0, 0);
  this.r = 30;
  this.maxspeed = 5;
  this.alpha = 255;
  
  // when alpha less than 0 function is true 
  //for particle delete
  this.finished = function () {
    return this.alpha < 0;
 }
  
  
  this.update = function () {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.alpha -= 1;
  }
  
  

  
  this.follow = function(vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x +y * cols;
    var force = vectors[index];
    this.applyForce(force);
  }
  

  this.applyForce = function (force) {
    this.acc.add(force);
  };

  this.show = function () {
    noStroke();
    fill(200, 50, 50, this.alpha);
    circle(this.pos.x, this.pos.y, 10);
  };

  this.edges = function () {
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
  };
}

```

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 17, 2022, 9:38pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/2 "2022-09-17T21:38:28Z")

</div>

One praticle every 5 seconds, comments in the code.

```auto
var fr;

var inc = 0.06;
var scl = 33;
var cols, rows;

var zoff = 0;

var start = 0;

var flowfield;

let particles = [];

// a var to track elapsed time
let elapsed = 0;

// one for how many particles 
let particles_to_release = 1;

// and one for interval to release
// 1000 = 1seg (milliseconds)
let interval = 5000;

function setup() {
  createCanvas(800, 800);
  pixelDensity(1);

  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP("");

  //particle array
  // p = new Particle();
  // for (var i = 0; i < 200; i++) {
  // particles[i] = new Particle();

  //flowfield array
  flowfield = new Array(cols * rows);
  
  //all set, lets reset our timer
  elapsed = millis();
}

function draw() {
  background(20);

  //if current time minus stored is 
  // bigger than interval, release particles
  if (millis() - elapsed > interval) {
    //count released particles and stop after limit
    for (let i = 0; i < particles_to_release; i++) {
      let p = new Particle();
      particles.push(p);
    }
    //reset de clock...
    //voila :)
    elapsed = millis();
  }
  var yoff = 0;

  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;

      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(0.1);

      flowfield[index] = v;

      xoff += inc;
      strokeWeight(2);
      stroke(70, 100, 0);
      push();
      translate(x * scl, y * scl);
      rotate(v.heading());
      line(0, 0, scl, 0);

      pop();
    }
    yoff += inc;

    zoff += 0.000045;
  }

  for (var i = particles.length - 1; i >= 0; i--) {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].show();
    particles[i].edges();
    if (particles[i].finished()) {
      //remove this particle
      particles.splice(i, 1);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 17, 2022, 10:26pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/3 "2022-09-17T22:26:18Z")

</div>

> [@vkbr](#):
>
> One particle every 5 seconds,

A much simpler alternative solution combines [_frameCount_](https://p5js.org/reference/#/p5/frameCount) w/ the [remainder](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder) `%` operator:

```javascript
const FPS = 60, FRAMES = 5 * FPS; // 5 seconds of frames elapse (300 frames)
var particles = [];

function draw() {
  // ...

  frameCount % FRAMES || particles.push(new Particle); // 1 new particle each 5s

  // ...
}

```

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [September 18, 2022, 10:54am UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/4 "2022-09-18T10:54:11Z")

</div>

perfect thank you, @GoToLoop !

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [September 18, 2022, 10:57am UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/5 "2022-09-18T10:57:22Z")

</div>

Thanks a lot! This is what I was looking for. Now I tried to implement a lifespan for each particle and implemented your timer into the particle.js but did not succeed. Here is what I did:

sketch.js

```auto
var fr;

var inc = 0.04;
var scl = 40;
var cols, rows;

var zoff = 0;

var start = 0;

var flowfield;

let particles = [];

// a var to track elapsed time
let elapsed = 0;

// one for how many particles 
let particles_to_release = 1;

// and one for interval to release
// 1000 = 1seg (milliseconds)
let interval = 500;

function setup() {
  createCanvas(800, 800);
  pixelDensity(1);

  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP("");

  //particle array
  // p = new Particle();
  // for (var i = 0; i < 200; i++) {
  // particles[i] = new Particle();

  //flowfield array
  flowfield = new Array(cols * rows);
  
  //all set, lets reset our timer
  elapsed = millis();
}

function draw() {
  background(20);
  
  if (millis() - elapsed > interval) {
  for (let i = 0; i < particles_to_release; i++) {
      let p = new Particle();
      particles.push(p);
    }
    //reset de clock...
    //voila :)
    elapsed = millis();
  }
  
  var yoff = 0;

  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;

      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(0.6);

      flowfield[index] = v;

      xoff += inc;
      strokeWeight(2);
      stroke(70, 100, 0);
      push();
      translate(x * scl, y * scl);
      rotate(v.heading());
      line(0, 0, scl, 0);

      pop();
    }
    yoff += inc;

    zoff += 0.000445;
  }

  for (var i = particles.length-1; i >= 0; i--) {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].show();
    particles[i].edges();
    
    if (particles[i].finished()) {
      //remove this particle
      particles.splice(i, 1);
      
    }
  }
}

```

particle.js

```auto
// a var to track elapsed time
let particleelapsed = 0;

// and one for interval to release
//1000 = 1seg (milliseconds)
let particleinterval = 100;

function Particle() {
  this.pos = createVector(mouseX + random(-20, 20), mouseY + random(-20, 20));
  this.vel = createVector(0.2, 2);
  this.acc = createVector(0, 0);
  this.r = 30;
  this.maxspeed = 20;
  this.alpha = 255;

  // when alpha less than 0 function is true
  //for particle delete

  //all set, lets reset our timer
  particleelapsed = millis();

  this.finished = function () {
    return this.alpha < 0;
  };

  this.update = function () {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);

    if (millis() - particleelapsed > particleinterval) {
      this.alpha -= 10;
    }
    particleelapsed = millis();
  };

  this.follow = function (vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];
    this.applyForce(force);
  };

  this.applyForce = function (force) {
    this.acc.add(force);
  };

  this.show = function () {
    noStroke();
    fill(200, 50, 50, this.alpha);
    circle(this.pos.x, this.pos.y, 10);
  };

  this.edges = function () {
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
  };
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 18, 2022, 11:19am UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/6 "2022-09-18T11:19:17Z")

</div>

Hello @Tilman,

> [@Tilman](#):
>
> lifespan

Try a search for _time to live_ in this forum.

`:)`

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 18, 2022, 3:08pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/7 "2022-09-18T15:08:55Z")

</div>

You missed the `this.` in some vars at particle.js so each one would know it’s own timer. And also have reset the timer outside the loop resetting the timer every frame, meaning time never will pass because `elapsed` is = `milli()` always.

```auto
function Particle() {
  this.pos = createVector(mouseX + random(-20, 20), mouseY + random(-20, 20));
  this.vel = createVector(0.2, 2);
  this.acc = createVector(0, 0);
  this.r = 30;
  this.maxspeed = 20;
  this.alpha = 255;

  this.particleinterval = 100;

  //all set, lets reset our timer
  this.particleelapsed = millis();

  this.finished = function () {
    return this.alpha < 0;
  };

  this.update = function () {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);

    if (millis() - this.particleelapsed > this.particleinterval) {
      this.alpha -= 10;
      this.particleelapsed = millis();
    }
  };

  this.follow = function (vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];
    this.applyForce(force);
  };

  this.applyForce = function (force) {
    this.acc.add(force);
  };

  this.show = function () {
    noStroke();
    fill(200, 50, 50, this.alpha);
    circle(this.pos.x, this.pos.y, 10);
  };

  this.edges = function () {
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
  };
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 18, 2022, 3:41pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/8 "2022-09-18T15:41:37Z")

</div>

I’ve got this Countdown class in “countdown.js” file which sets its property _done_ to `true` after property _delay_ has elapsed via [**setTimeout()**](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout):

> **[Countdown Class](http://bl.ocks.org/GoSubRoutine/1a0d21828319cf18fecf44101764bd60)**
>
> GoSubRoutine’s Block 1a0d21828319cf18fecf44101764bd60

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [September 18, 2022, 7:13pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/9 "2022-09-18T19:13:31Z")

</div>

Thank you @GoToLoop !

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [September 18, 2022, 7:19pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836/10 "2022-09-18T19:19:41Z")

</div>

This.dot! Thank you @vkbr This fixed it and is working now. Awesome. Thank you!