Traffic Lights

let theShader, vert, frag;

let rec = [],

  maxS = 5

let nr = 10

let w

​

function preload() {

  vert = loadStrings('shader.vert');

  frag = loadStrings('shader.frag');

}

​

function setup() {

  w = min(windowWidth, windowHeight)

  createCanvas(w, w, WEBGL);

  pixelDensity(1)

  for (let i = 0; i < nr; i++) rec[i] = new recta(0, 0)

  theShader = createShader(vert.join('\n'), frag.join('\n').replace('%%n_val%%', nr));

}

​

function draw() {

  theShader.setUniform('u_resolution', [width, height]);

  theShader.setUniform('u_t', frameCount);

​

  let arr = new Array(4 * nr).fill(0).map((x, i) => ((i % 4 == 0) ? (rec[floor(i / 4)].x) : (i % 4 == 1) ? (rec[floor(i / 4)].y) : (i % 4 == 2) ? (rec[floor(i / 4)].wi) : (rec[floor(i / 4)].he)))

  theShader.setUniform(`u_cir`, arr)

  let crr = new Array(3 * nr).fill(0).map((x, i) => (i % 3 == 0) ? rec[(i / 3) | 0].c[0] : (i % 3 == 1) ? rec[(i / 3) | 0].c[1] : rec[(i / 3) | 0].c[2])

  theShader.setUniform(`u_cirC`, crr)

  shader(theShader)

  rect(0, 0, width, height)

  for (let r of rec)r.move()

}

​

class recta {

  constructor(x, y) {

    this.i = rec.length;

    let minR = (w * 0.333) / 2;

    let maxR = (w * 0.5) / 2;

    this.he = minR + (maxR - minR) * f();

    this.wi = Number.EPSILON

    this.x = (2 * this.i + 1) * w / (nr * 2)

    this.y = this.he / 2 + (w - this.he) * f();

    this.speY = maxS * .2 + maxS * .8 * f()

    this.speY *= f() > .5 ? 1 : -1

    this.c = [360 * f(), 100, 40]

  }

  move() {

    if (f() < 1 / 60 / nr) this.c = [360 * f(), 100, 40]

    if (this.y + this.he / 2 < 0) this.y = w + this.he / 2

    else if (this.y - this.he / 2 > w) this.y = -this.he / 2

    this.y += this.speY

  }

}

let f = () => random()

​

function mousePressed() {

  for (let i = 0; i < nr; i++) rec[i].c = [360 * f(), 100, 40]

}