mobile - OpenProcessing

mySketch
xxxxxxxxxx
 
var shapes = [];
var numShapes = 4;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
​
  strokeCap(ROUND);
  makeMobile();
  noLoop();
​
}
​
function mouseClicked(){
  makeMobile();
}
​
function makeMobile() {
  background(255);
  
  shapes = [];
​
  for(var n = 0; n < numShapes; n++){
    var shape = new Shape(width/4+n*(width/2/numShapes), random(height * 2/5, height * 3/5), random(height/10, height/8));
    shapes.push(shape);
  }
  
  var nRed = int(random(numShapes));
  
  for(var n = 0; n < numShapes; n++){
    if(n == nRed) {
      fill(231,48,55);
      stroke(231,48,55);
    }
    else{
      fill(0);
      stroke(0);
    }
    shapes[n].draw();
  }
  
  
  noFill();
  stroke(0);
  strokeWeight(1);
  for(var n = 0; n < numShapes; n++){
    line(shapes[n].center, shapes[n].y, shapes[n].center, shapes[n].y - height/10);
  }
  
  for(var n = 0; n < numShapes - 2; n++){
    push()
    translate(0, -height/10);
    beginShape();
    vertex(shapes[n].center, shapes[n].y);
    quadraticVertex((shapes[n].center+shapes[n+2].center)/2, 
                    shapes[n+2].y-(shapes[n].y+shapes[n+2].y)/10, 
                    shapes[n+2].center, 
                    shapes[n+2].y
                   );
    endShape();
    pop();
  }
}
​
class Shape{
  constructor(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
    this.pointA = createVector(0,0);
    this.pointB = createVector(random(this.r/2, this.r), 0);
    this.pointC = createVector(random(this.r), random(this.r/2, this.r));
    this.mass = this.pointB.x*this.pointC.y/2;
    this.center = x + this.pointB.x/2
  }
  
  draw(){
    strokeWeight(this.r);
    push();
      console.log(this.x, this.y, this.r);
      translate(this.x, this.y);
      line(this.pointA.x, this.pointA.y, this.pointB.x, this.pointB.y);
      line(this.pointB.x, this.pointB.y, this.pointC.x, this.pointC.y);
      line(this.pointC.x, this.pointC.y, this.pointA.x, this.pointA.y);
    pop();
  }
}