var counter = 0;

var nFramesInLoop = 100;

function setup() {

  createCanvas(canvW, canvW);

  cam = new Camera();

  makeBall();

}

​

function makeBall() {

  col = [random(255),random(255),random(255),255];

  col2 = [random(255),random(255),random(255),255];

  j = int(1 + random(20));

  ball = new Ball(0,100,10+random(80),25+random(50),5+random(15),0,col,col2, j, dX = 2+random(5), a = 0.01 + random(0.1));

}

​

class Camera {

  constructor() {

    this.x = 0;

    this.y = 0;

    this.w = canvW;

    this.h = canvW;

  }

  reset() {

    this.x = 0;

    this.y = 0;

    this.w = canvW;

    this.h = canvW;

  }

  setW(nw) {

    var dw = (this.w - nw);

    this.x += (dw/2);

    this.y += (dw/2) * (this.h/this.w);

    this.h = nw * (this.h/this.w);

    this.w = nw;

  }

  setX(nx) {

    this.x = nx; 

  }

  setY(ny) {

    this.y = ny; 

  }

  zoomIn(dw) {

    this.x += dw/2;

    this.w -= dw;

    this.y += (dw/2) * (this.h/this.w);

    this.h -= dw * (this.h/this.w);

  }

  zoomOut(dw) {

    this.x -= dw/2;

    this.w += dw;

    this.y -= (dw/2) * (this.h/this.w);

    this.h += dw * (this.h/this.w);

  }

  ellFromArcsCam(ex, ey, ew, eh,c){

    var dx = ((ex - this.x)/(this.w)) * width;

    var dy = ((ey - this.y)/(this.h)) * height;

    var dw = (ew/this.w) * width;

    var dh = (ew/this.h) * height;

    if (dx+dw/2 >= 0 && dy+dh/2 >= 0 && dx-dw/2 <= width && dy-dy/2 <= height){

      ellFromArcs(dx,dy,dw,dh,c);

    }

  }

  rectFromArcsCam(rx, ry, rw, rh){

    var dx = ((rx - this.x)/(this.w)) * width;

    var dy = ((ry - this.y)/(this.h)) * height;

    var dw = (rw/this.w) * width;

    var dh = (rw/this.h) * height;

    if (dx+dw >= 0 && dy+dh >= 0 && dx <= width && dy <= height){

      rectFromArcs(dx,dy,dw,dh);

    }

  }

  lineFromArcsCam(x1,y1,x2,y2){

    var dx1 = ((x1 - this.x)/(this.w)) * width;

    var dy1 = ((y1 - this.y)/(this.h)) * height;

    var dx2 = ((x2 - this.x)/(this.w)) * width;

    var dy2 = ((y2 - this.y)/(this.h)) * height;

    lineFromArcs(dx1,dy1,dx2,dy2);

  }

}

​

class Ball {

  constructor(x, y, r1, r2, r3, theta, c1, c2, j, dX = 1, dY = 0, a = 0.2, b = 0.7, g = 600) {

    this.x = x;

    this.y = y;

    this.r1 = r1;

    this.r2 = r2;

    this.r3 = r3;

    this.theta = theta;

    this.c1 = c1;

    this.c2 = c2;

    this.dX = dX;

    this.dY = dY;

    this.a = a;

    this.b = b;

    this.g = g;

    this.j = j;

  }

  physics() {

    this.dY += this.a;

    if (this.y +this.r1 > this.g) {

      this.y = -this.r1 + this.g - (this.y+this.r1 - this.g)*this.b;

      if (abs(this.dY * this.b) < this.a*5) {

        this.dY = 0; 

      }

      this.dY = -this.dY*this.b;

    }

    this.x += this.dX;

    this.y += this.dY;

  }

  rotateByAngle(dt) {

    this.theta += dt;

  }

  rotateByCirc(dc) {

    this.theta += dc/this.r1;

  }

  drawBall() {

    cam.ellFromArcsCam(this.x,this.y,this.r1*2,this.r1*2,this.c1);

​

    for (var i = 0; i < TWO_PI; i += TWO_PI/(float(this.j))){

      var cx = this.x + this.r2*cos(i+this.theta);

      var cy = this.y + this.r2*sin(i+this.theta);

      cam.ellFromArcsCam(cx,cy,this.r3,this.r3,this.c2);

    }

  }

}

​

function draw() {

  background(220);

  /*

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

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

      cam.rectFromArcsCam(100*i,100*j,100,100);

    }

  }*/

  ball.drawBall();

  ball.rotateByCirc(ball.dX);

  ball.physics();

  cam.setW(500+140*sin(millis()/1000));

  cam.setY(height/2);

  cam.lineFromArcsCam(0,ball.g,width,ball.g);

  if (ball.x-ball.r1-ball.r3 > cam.x + cam.w) {

     makeBall(); 

  }

  //cam.setX(width/4 + width/4*cos(counter/1000));

  //cam.setY(height/4 + height/4*sin(counter/1000));

}

​

function ellFromArcs(ex, ey, ew, eh, c){

  fill(c[0],c[1],c[2],c[3]);

  arc(ex,ey,ew,eh,0,TWO_PI);

}

​

function rectFromArcs(rx, ry, rw, rh){

  //rect(rx,ry,rw,rh);

  fill(0,0,0,0);

  arc(rx,ry+rh/2,rw,rh,-HALF_PI, HALF_PI, CHORD);

  arc(rx+rw,ry+rh/2,rw,rh,HALF_PI,-HALF_PI, CHORD);

  arc(rx+rw/2,ry,rw,rh,0,-PI,CHORD);

  arc(rx+rw/2,ry+rh,rw,rh,-PI,0,CHORD);

}

​

function lineFromArcs(x1,y1,x2,y2){

  fill(0,0,0,0);

  dX = x2-x1;

  dY = y2-y1;

  var r = ((dX)^2 + (dY)^2)^0.5;

  arc(x1,y1,r*2,r*2,atan(dY/dX),atan(dY/dX)+0.0001,PIE);

}

​

​