int []oldpixels;
int []expixels;
int c=0;
PGraphics pg;
float  j;
float k=0;
String s;
int o =0;

void setup()
{
  size(500, 500);
  noStroke();
  smooth();
  strokeCap(SQUARE);
  frameRate(10); //as fast as it can
  oldpixels = new int[width*height];
  expixels = new int[width*height];
  pg = createGraphics(width, height, JAVA2D);
}

void draw()
{
  // zuerst hintergrund ganz ganz helle farbe machen (wird dann durchsichtig gemacht)
  background(255,255,254);

  //eine weißen kreis zeichnen (äußerster rand von der ganzen grafik)
  fill(255);
  stroke(0);
  strokeWeight(width/250.0);
  ellipse(width*0.5, height*0.5, height*0.95,width*0.95);

  //einen schwarzen kreis zeichnen (innere vom ziffernblatt)
  noStroke();
  fill(0,0,0);
  ellipse(width*0.5, height*0.5, height*0.9,width*0.9);

  //einen grauen kreis zeichnen (dass man erkennt, dass sich der sekunden zeiger was eigenes ist)
  //noStroke();
  //fill(40);
  //ellipse(width*0.5, height*0.5, height*0.5,width*0.5);
  fill(255);

  //die strichchen für die stunden zeichnen (der weiße rand vom ziffernplatt wird noch mal unterteilt)
  stroke(0,0,0); // 0;
  strokeWeight(height/100.0);
  for(float i=1; i<=12 ; i++)
  {
    line(width*0.5 + width*0.951*0.5*cos(TWO_PI * i/12.0), width*0.5 + width*0.951*0.5*sin(TWO_PI * i/12.0), width*0.5 + width*0.89*0.5*cos(TWO_PI * i/12.0), width*0.5 + width*0.89*0.5*sin(TWO_PI * i/12.0));
  }

  noStroke();


  if (o<=0)
  {
  
    //kleinen punkte zeichnen (hier werden 12 kleine weiße punkte gezeichent) für die minuten!
    for(float i=1; i<=12 ; i++)
    {
      ellipse(width*0.5 + ( 0.35 * width * cos(-PI*0.5 + j + (TWO_PI * i/12.0))), height*0.5 + (0.35 * height * sin(-PI*0.5 + j + (TWO_PI * i/12.0))), width/50.0, height/50.0);
    }

    // für die sekunden: kleinen punkte zeichnen (hier werden 60 kleine weiße punkte gezeichent)
    for(float i=1; i<=60 ; i++)
    {
      ellipse(width*0.5 + ( 0.5*0.5 * width * cos(-PI*0.5 +  k + (TWO_PI * i/60.0))), height * 0.5 + (0.5* 0.5 * height * sin(-PI*0.5 + k + (TWO_PI * i/60.0))), width/100.0, height/100.0);
    }

    // jetzt wieder teile davon verdecken
    // jetzt wird über die kleinen weißen punkte von einem schwarzer kreis verdekct,
    // dieser hat aber genau 11 lücken und verdeckt damit immer 
    // einige der kleinen kreise
    stroke(0,0,0);
    strokeWeight(height/20.0);
    noFill();

    // minuten stehen fest!
    for(float i=1; i<=11 ; i++)
    {
      arc(width*0.5, height*0.5, width*0.7, height*0.7, i/11.0 * TWO_PI - PI/2 + atan(2*width/50.0 / (width*0.7) ),  (i+1.0)/11.0 * TWO_PI - PI/2 - atan(2*width/50.0 / (width*0.7) ));
    }

    // jetzt das ganze noch für die sekunden // die mnüssen aber mit dem grau verdekct werden
    stroke(0);
    for(float i=1; i<=59 ; i++)
    {
      arc(width*0.5, height*0.5, width*0.5, height*0.5, (i/59.0) * TWO_PI - PI/2 + 0.01 ,  (i+1.0)/59.0 * TWO_PI - PI/2 - 0.01);
    }


    noFill();
    //stunden punkt zeichnen (der große weiße kreis)
    stroke(255); strokeWeight(width/200.0);
    ellipse(width*0.5 + (0.35 * width * cos(j-PI/2)), height*0.5 + (0.35 * height * sin(j-PI/2)), width/10, width/10);
    noStroke();
    fill(255);


    //debugg sachen
    if (0==1)
    {
      // zum debuggen 60 striche für die miuten
      stroke(128,255,0);
      strokeWeight(height/100.0);
      for(float i=1; i<=60 ; i++)
        line(width*0.5 + width*0.5*cos(TWO_PI * i/60.0), width*0.5 + width*0.5*sin(TWO_PI * i/60.0), width*0.5 + width*0.95*0.5*cos(TWO_PI * i/60.0), width*0.5 + width*0.95*0.5*sin(TWO_PI * i/60.0));
      // zum debuggen sekunden,minuten und stunden zeiger
      stroke(255,0,0);
      line(width*0.5, height*0.5, width*0.5+0.5*width * cos((-PI * 0.5) + k),  height*0.5+0.5 * height * sin((-PI * 0.5) + k));
      stroke(0,255,0);
      line(width*0.5, height*0.5, width*0.5+0.5*width * cos((-PI * 0.5) + k*60),  height*0.5+0.5 * height * sin((-PI * 0.5) + k*60));
      stroke(0,0,255);
      line(width*0.5, height*0.5, width*0.5+0.5*width * cos((-PI * 0.5) + j),  height*0.5+0.5 * height * sin((-PI * 0.5) + j));
    }
  }

  if (0==0)
  {
    //jetzt ist das bild so weit fertig, jetzt laden wir es in den speicher
    loadPixels();

    //jetzt schauen wir uns jeden pixel des bildes an, und vergleichen es mit dem pixel des vorherigen bildes
    for(int i=0; i < pixels.length; i++)
    {
      //wenn der pixel des vorherigen bildes gleich dem pixel des jetzigen bildes ist, macht er diesen punkt transparent bzw. wenn es nicht
      // das erste bild ist wenn der pixel die farbe 0,0,3 hat, wird er auch transparent siehe ganz am anfang mit dem background
      if (((pixels[i] == oldpixels[i])&&(c != 0))||(pixels[i]==color(255,255,254)))
        expixels[i] = color(0,0,0,0);
      //wenn es nicht transparent ist, macht er es in der farbe, in der das aktuelle bild ist.
      else
        expixels[i] = pixels[i];
    }
    c ++;

    //jetzt wird das bild, das gerade errechnet wurde gespeichert
    arrayCopy(pixels,oldpixels);
    pg.beginDraw();
    pg.loadPixels();
    arrayCopy(expixels, pg.pixels);
    pg.updatePixels();
    pg.save("sekunden_neu/"+c+".png");
    pg.endDraw();
  }

  //hier tickt die zeit
  if(j <= (TWO_PI/12.0))
  {
    k = k + TWO_PI/(60*60/3.0);
    j = j + TWO_PI/(12*60*60/3.0);
    //float sec = round(j*12*60*60 / TWO_PI);
    //int tsec = int(sec) % 60;
    //int tmin = int(sec/60) % 60;
    //int th = int(sec/60/60);
    // println(th + ":" + tmin + ":" + tsec + " " + k);
  }
  //     j = j + PI/float(10000);
  else if (o<=10)
  {
    o ++;
  }
  else
  {
    println("der erste teil der animation ist geschafft. jetzt die pngs in gif umwandeln und dann folgenden befehl ausführen:");
    println(""); //leerzeile
    s = "";
    for (int i = 1; i<=10+(12*60*60/3.0)/12.0;i++)
      s = s + " "+i+".gif";
    print("gifsicle -l  -d 10 -D asis "+s+" >_animation.gif");
    noLoop(); // hier endet das programm
  }


}