var n =12;

​

var colors = [];

var circles = [];

var margin = 100;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //createCanvas(900, 900);

  colorMode(HSB, 360,100,100);

  fps = 60;

  frameRate(fps);

  colors.push(color(180,100,100));

  colors.push(color(340,100,100));

  colors.push(color(60,100,100));

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

   circles.push(new Circle(colors[i%3],random(360,1200),height*i/n));

  }

}

​

function draw() {

  blendMode(BLEND);

  background(0,0,90);

  drawGrid();

  blendMode(MULTIPLY);

  for(var i=0;i<circles.length;i++){

    circles[i].drawCircle();

  }

}

​

function drawGrid(){

  stroke(0,0,50);

  for(var i=width*3/24;i<width-1;i+=width*3/24){

    line(i,100,i,height-100);

  }

}

​

class Circle{

  constructor(_color,_speed,_y){

    this.circolor = _color;

    this.speed = _speed/fps;

    this.x = 0;

    this.y = _y;

  }

  drawCircle(){

    noStroke();

    fill(this.circolor);

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

    this.x += this.speed;

    if(this.x>width){this.x-=(width+160);}

}

}

​

function touchStarted(){

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

   circles.push(new Circle(colors[int(random(3))%3],random(360,1200),height*i/n));

  }

}