//

Processing.js expirmentation. [SEIZURE WARNING]

HTML

<title>Basic Processing</title>
<script id="processingcode" type="application/processing">
 float[] pos = new float[50];
void setup(){
  size(window.innerWidth,window.innerHeight, P3D);
  for(int i = 0; i < pos.length; i++){
    pos[i] = -100*i;
  }
  noFill();
}
void draw(){
  background(#fd8989);
  for(int i = 0; i < pos.length; i++){
    pushMatrix();

    rotateY(map(mouseX, 0, width, -PI/4f, PI/4f));
    rotateX(map(mouseY, 0, height, PI/4f, -PI/4f));
    translate(0, 0, pos[i]);
    ellipse(window.innerWidth/2, window.innerHeight/2, mouseX*2, mouseY*2);
    popMatrix();
    if(pos[i] > 500){
      pos[i] = -100*pos.length+500;
    }
    else{
      pos[i] += 4;
    }
  }
}
void mouseWheel(MouseEvent event) {
  float wheel = event.getAmount();
  for(int i = 0; i < pos.length; i++){
    if (wheel==1) pos[i] -= 20;
    else if (wheel==-1)pos[i] += 20;
  }
}

</script>

<canvas id="canvas1"> </canvas>

CSS

body{
    overflow:hidden;
    background:#000;
}

JavaScript

new Processing(document.getElementById("canvas1"),
               document.getElementById("processingcode").text);