Single pulsating node

// OpenProcessing - Smooth pulsating objects 2207386 - WORKS

// Some simple name changes killed the code.

​

let rings = [];

​

let colors = ["#01FF2C", "#FFFFFF", "#ffff01", "#FF7E00", "#B24BF4", "#3574DB", "#D5D5D5"];

​

class Ring {

  constructor(x, y, d, num) {

    this.x = x;

    this.y = y;

    this.d = d;

    this.num = num;

    this.col = colors[num];

    this.t = 50 * num;// -50

    this.t1 = 175;

    this.t2 = this.t1 + (50 * (colors.length - 1)) - 50;

    this.sd = this.d;

    this.sd0 = this.d;

    this.sd1 = this.d * 4;

    this.sw = this.d * 0.005;

      console.log("Ring details:", num);

      console.log("colors:", colors[num]);

      console.log("colors.length:", colors.length);

      console.log("TIME unknown t:", this.t);

      console.log("Puls duration t1:", this.t1);

      console.log("Colour related t2:", this.t2);

      console.log("Ring size? sd:", this.sd);

      console.log("sd0:", this.sd0);

      console.log("Ring width sd1:", this.sd1);

      console.log("Stroke Weight sw:", this.sw);

  }

​

  show() {

    fill(this.col);

    noStroke();

    circle(this.x, this.y, this.d);

    if (this.t < this.t1) {

      noFill();

      stroke(this.col);

      strokeWeight(this.sw);

      circle(this.x, this.y, this.sd - this.sw);

    }

  }

  /* 

    lerp() stands for linear interpolation. 

    It's a mathematical function commonly used in computer graphics and animation to smoothly interpolate between two values based on a third value (usually between 0 and 1). 

    It calculates a value that lies between two given values based on a fraction that represents how far along the interpolation has progressed.

    lerp(start, end, amount)

    let nrm = norm(this.t, 0, this.t1); //nrm = time normalisation

  */

  pulse() {

    if (0 < this.t && this.t < this.t1) {

        let nrm = norm(this.t, 0.5, this.t1); // original value 0

        this.sd = lerp(this.sd0, this.sd1, nrm ** 0.75); // original value 0.75

        this.sw = lerp(this.d * 0.1, 0, nrm);// original value  0.1, 0, nrm

    }

    if (this.t > this.t2) {

        // Reset parameters for repeated pulse. I see no effect or difference

        this.t = 0.75; // Time original value 0

        this.sd = this.d * 0.5; // Stroke Weight original value this.d

        this.sw = this.d * 0.5; // Stroke Weight original value 0.1

    }

    this.t++;

} // End Pulse()

} // End Class Ring

​

function setup() {

  createCanvas(880, 880); // rectangular shape needed!

  smooth();

  shuffle(colors, false);

  let seg = 4; //max limit 8 à 10 this number else the code will crash

  let w = width / seg;

  for (let i = 1; i < seg; i++) {

    for (let j = 1; j < seg; j++) {

      let x = width / 2; // put in center

      let y = height / 2; // put in center

      let n = int(random(colors.length));

      let d = w * 0.3;

      rings.push(new Ring(x, y, d, n));

        console.log("width:", width);

        console.log("height:", height);

        console.log("ring info:", x, y, d, n);

    }

  }

  noStroke();

}

​

function draw() {

  background(0);

  for (let i of rings) {

    i.show();

    i.pulse();

  }

}