opArtParticles<br>

// opArtParticles

// No interaction. 

// particle system, particles, boolean, vector, color, array, grayscale, Bridget Riley, square, rect

// From Bridget Riley's "Movement in Squares" (1961).

//

'use strict'

var generatorsRght, generatorsLft;;

var yPos, goRight;

var strtCol, black, white;

//

//

function setup() {

  createCanvas(1200, 650);

  black = color(0);

  white = color(245);

  strtCol = black;

  goRight = true;

  yPos = 75;

  generatorsRght = [];

  //

  for (var i = 0; i < 10; i++) {

    generatorsRght.push(new ParticleGenerator(createVector(250, yPos), strtCol, goRight));

    if (strtCol === black) strtCol = white;

    else strtCol = black;

    yPos += 50;

  }

  goRight = false;

  yPos = 75;

  generatorsLft = [];

  for (var i = 0; i < 10; i++) {

    generatorsLft.push(new ParticleGenerator(createVector(1085, yPos), strtCol, goRight));

    if (strtCol === black) strtCol = white;

    else strtCol = black;

    yPos += 50;

  }

}

​

function draw() {

  background(255);

  for (var i = 0; i < 10; i++) {

    var gr = generatorsRght[i];

    var gl = generatorsLft[i];

    gr.run();

    gl.run();

  }

  drawCurtains();

}

​

function drawCurtains() {

  noStroke();

  fill(255);

  rect(0, 0, 300, 650);

  rect(900, 0, 300, 650);

}

//

//

// %%%%%%%%%%%% "classes" %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

//

var ParticleGenerator = function (pgpos, c, grght) {

    this.origin = pgpos.copy();

    this.particles = [];

    this.index = 0;

    this.col = c;

    this.particles.push(new Particle(this.origin, this.col, grght)); // prime the generator

    //

    this.run = function () {

      var p = this.particles[this.index];

      //

      // insert  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

      if (grght) {

        if (p.pos.x >= this.origin.x + 50) {

          if (this.col === black) this.col = white;

          else this.col = black;

          this.particles.push(new Particle(this.origin, this.col, grght));

          this.index = this.particles.length - 1;

        }

      }

      else { // goRight is false

        if (p.pos.x + p.wdth <= this.origin.x) {

          if (this.col === black) this.col = white;

          else this.col = black;

          this.particles.push(new Particle(this.origin, this.col, grght));

          this.index = this.particles.length - 1;

        }

      }

      //

      // dress the squares shoulder to shoulder %%%%%%%%%%%%%%%

      if (this.particles.length >= 2) {

        for (var i = 0; i < this.particles.length - 1; i++) {

          var lead = this.particles[i];

          var next = this.particles[i + 1];

          if (grght) lead.pos.x = next.pos.x + next.wdth;

          else lead.pos.x = next.pos.x - lead.wdth;

        }

      }

      //

      //

      // run/remove %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

      for (var i = this.particles.length - 1; i >= 0; i--) {

        var p = this.particles[i];

        p.run();

        if (p.wdth <= 0) {

          this.particles.splice(i, 1);

          this.index--;

        }

      }

    }

  }

  //

  //

function Particle(p, c, gr) {

  this.wdth = 50;

  if (gr === true) this.vel = createVector(.5, 0);

  else this.vel = createVector(-.5, 0);

  this.pos = p.copy();

  //

  this.run = function () {

    this.wdth -= .031;

    this.pos.add(this.vel);

    if (c != black && this.wdth < 30) c = color(map(this.wdth, 30, 0, 255, 120));

    fill(c);

    stroke(140, 50);

    strokeWeight(3);

    rect(this.pos.x, this.pos.y, this.wdth, 50);

  }

}