var colorb = 30;

var colorbdir = 1;

var colorgdir = 1;

var Windy = function (_x1, _y1, _x2, _y2, _x3, _y3) {

  this.x1 = _x1;

  this.y1 = 200;

  this.x2 = _x2;

  this.y2 = _y2;

  this.x3 = _x3;

  this.y3 = _y3;

​

  this.x1dir = random(-1, 1);

  this.y1dir = random(-1, 1);

​

  this.draw = function () {

    ellipse(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);

  };

​

  //the range of movement changes acording to the height of each triangle x1

  this.sopla = function () {

    if (this.x1 <= 0 || this.x1 > windowWidth) {

      this.x1dir *= -1;

    }

    this.x1 += this.x1dir;

  };

};

​

//Duplicate the object using an array and make as many as you like!

var pelo = [];

​

function setup() {

  createCanvas(windowWidth, 400);

  //added this.x3 and it wont draw

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

    pelo[i] = new Windy(width / 2, 0, 400, height);

  }

  onmousedown = "https://wwwreginacantu.com/rsca-discoveries";

}

​

function draw() {

  background(0, colorg, colorb);

  colorg += colorgdir;

  colorb += colorbdir;

​

  if (colorb >= 255 || colorb <= 2) {

    colorbdir *= -1;

  }

  if (colorg >= 155 || colorg <= 5) {

    colorgdir *= -1;

  }

  var mousePos = map(mouseX, 0, width, 0, 255);

  fill(mousePos, mouseY, 100, 60);

  noStroke();

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

    pelo[i].draw();

    pelo[i].sopla();

  }

}

​