Swishy

Another little Code Everyday project, that looks quite nice.

I quite fancy recreating on CSS and JS, but this is written in processing, exported as processing.js.
Drag around or click to see the effect.

Link to full page version.
code below.

int dropcount=1000;
Drop one=new Drop(10,10,10);
Drop[] drops=new Drop[dropcount];
int nowX, nowY;
int driftX, driftY;
int gap=20;
int repel=-1;
boolean reCol=false;
int c=0;

void setup(){
  size(1200,800);
  frameRate(30);
  nowY=width/2;
  nowY=height/2;
  for (int i=0; i<dropcount; i++){
    drops[i]=new Drop((int)random(width), (int)random(height), (int)random(height/3));
    //println(drops[i]);
  }
}

void draw(){
  background(0);
  driftX+=(nowX-driftX)/10;
  driftY+=(nowY-driftY)/10;
  for (int i=0; i<dropcount; i++){
    if(reCol) drops[i].reCol();
    drops[i].drawDrop();  
  }
  reCol=false;
}

void mouseDragged(){
  nowX=mouseX;
  nowY=mouseY;
}

void mouseClicked(){
  repel=-repel;
  reCol=true;
  c=(int)random(3);
}  

class Drop{
  int x, y, dlength;
  float angle=0;
  float a=0;
  float newa=0;
  float h=0;
  int col;
  int r=(int)random(200)+25;
  int g=(int)random(200)+25;
  int b=(int)random(200)+25;
  int em;

  Drop(int x_, int y_, int dlength_){
    x=x_;
    y=y_;
    dlength=dlength_;
  }

void reCol(){  
 if (c<1){
  r=(int)random(100)+125;
  g=(int)random(200)+25;
  b=(int)random(200)+25;
 }else if (c<2){   g=(int)random(100)+125;   b=(int)random(200)+25;   r=(int)random(200)+25;  }else{   b=(int)random(100)+125;   r=(int)random(200)+25;   g=(int)random(200)+25;  } } float hyp(float o, float a){   return sqrt(o*o+a*a);   }      float angle(float mx,float my){  float adj=mx-x;  float opp=my-y;  h=hyp(opp, adj);  if(adj>0)
 {
   return asin(opp/h)+PI/2*repel;
 }else{
  return PI-asin(opp/h)+PI/2*repel;
  }
}

void drawDrop(){
  newa=angle(driftX, driftY);
  a+=(newa-a)/10;
  pushMatrix();
  ellipseMode(CORNER);
  translate(x,y);
  rotate(a);
  noStroke();
  em=0;
  //if (h<dlength){em=255; /*dlength-(int)h*/;}else{em=r;}
  fill(dlength+gap<h?r:255,dlength+gap<h?g:50,dlength+gap<h?b:50,100);
  ellipse(0,0,10,dlength+gap<h?dlength:h-gap);
  popMatrix();
}  
}