First Animation

<head> 

<script src="//cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js">

</script>

</head>

<body>

<script data-processing-target="mycanvas" type="text/processing">

void setup(){ 

  size (600, 600); 

  background(66, 134, 244);

}

float degree = 0.0;

void draw(){ 

  pushMatrix(); 

  translate(width/2, height/2); 

  rotate(degree); 

  color c = color(244, random(184, 255), 65, 10); 

  fill(c); 

  stroke(200, 100, 200, 10); 

  rect(cos(degree)*80+degree, cos(degree)*80+degree, 60, 60); 

  popMatrix(); 

  degree += 0.1;

}

void setup() {
  size(455, 455);
}

int j = 0;
int k = 0;
int l = 0;

void draw() {
  if (j>450) {
  j=0;
} else {
  j=j+10;
}
  if (k>450) {
  k=0;
} else {
  k=k+1;
}

  if (l>450) {
  l=0;
} else {
  l=l+25;
}

  color c= color(random(193), 43, random(199));
  fill(c);
  rect(j, j+2, 70, 70);
  color d = color(random(123)/5,41,random(255));
  fill(d);
  rect(k, 100, 10, 70);
      rect(k+200, 300, 10, 70);
  color f = color(random(255),random(255),random(255));
  fill(f);
  rect(450-l, l, 70, 10);
  color g = color(155, 255, 200, 30);
  fill(g);
  rect(450-k, k, 100, 100);
}

void mouse_Pressed() {
background(random(255), random(255), random(255));
}



</script><canvas id="mycanvas"></canvas></body>