The Clash 5 - OpenProcessing

mySketch
xxxxxxxxxx
 
var poster;
var montserratbold;
​
function preload(){
  poster = loadImage("the_clash.jpg");
  montserratbold = loadFont("Montserrat-Bold.ttf ");
}
​
function setup() {
  createCanvas(568,800);
  background(239,52,35);
  rectMode(CENTER);
  frameRate(6);
}
​
function draw() {
  
  //image(poster, 0,0);
  
  //Hintergrundrechteck wegen transparenten Kreisen
  noStroke();
  fill(239,52,35);
  rect(284,400,568,800);
  
  fill(0,0,0);
  textFont(montserratbold);
  textSize(62);
  text("the clash",18,215);
  
  textSize(10);
  text("£2.25 / friday",27,36);
  text("december 22 1978",27,52);
  text("christmas party",142,36);
  text("with the slits and the innocents", 142,52);
  text("friars aylesbury at maxwell hall",355,36);
  text("aylesbury, buckinghamshire, england",355,52);
  
  noStroke();
  
  translate(73,303);
  for(x=0; x<700; x+=141.5){
    for(y=0; y<700; y+=141.5)
    {
      if(mouseIsPressed){
       push();
       translate(x,y);
       rotate((PI/4)-mouseX/1500);
      
       //weiße Rechtecke
       fill(255,255,255);
       rect(0,0,100,100);
       pop();
      }
      else
      {
       push();
       translate(x,y);
       rotate(PI/4);
      
       //weiße Rechtecke
       fill(255,255,255);
       rect(0,0,100,100);
       pop();
      }
    
      //hintergrundfarbene Kreise
      push();
      translate(x,y);
      //rotate(PI/4);
      fill(239,52,35);
      ellipse(0,0,90,90);
      pop();
      
​
    }
  }
  
    //zweite for-Schleife, weil blaue Kreise im Hintergrund waren
    for(x=0; x<700; x+=141.5){
    for(y=0; y<700; y+=141.5)
    {
      //blaue transparente Kreise, die sich leicht hin und her bewegen
      if(mouseIsPressed){
       push();
       translate(x,y);
       fill(0,100,155,90);
       ellipse(26+mouseX/15,26+mouseX/15,90,90);
       pop();
      }
      else{
       var h = random(3);
       push();
       translate(x,y);
       fill(0,100,155,90);
       ellipse(26+h,26+h,90,90);
       pop();
      }
    }
  }
  
  //weitere for-Schleife, weil graue Kreise im Hintergrund waren
  for(x=0; x<700; x+=141.5){
    for(y=0; y<700; y+=141.5)
    {
      if(mouseIsPressed){
       push();
       //graue transparente Kreise
       translate(x,y);
       var i = random(3);
       fill(80,80,80,80);
       ellipse(97-mouseX/20,97-mouseX/20,90,90);
       pop();
      }
      else{
       push();
       //graue transparente Kreise
       translate(x,y);
       var i = random(3);
       fill(80,80,80,80);
       ellipse(97+i,97+i,90,90);
       pop();
      }
    }
  }
  
}