10. November 2010

Bei dieser Vorlage haben wir den Umgang mit Bitmaps in Processing kennengelernt. Ebenfalls in diesem Zusammenhang hat Max uns den Datentyp PImage erklärt, der das Speichern von Bitmaps erlaubt. Dieser funktioniert wie ein Array und die Bilder werden mittels loadImage() in die jeweiligen Listeneinträge gespeichert. Als Erweiterung wurden wir gebeten ein Bild der Erde so einzufügen, dass dieses dem Mauszeiger folgt und der Hintergrund transparent ist. Das Einfachste war die Erde als PNG mit einem Alphakanal zu speichern und der Mausbewegung mittel Matrix und translate() folgen zu lassen.

PImage[] imageList = null;    // variable sauber initialisieren

void setup()
{
  size(600,600);      // def. fenstergroesse
  
  imageList = new PImage[4];
  imageList[0] = loadImage("./images/1.jpg");
  imageList[1] = loadImage("./images/2.jpg");
  imageList[2] = loadImage("./images/3.jpg"); 
  imageList[3] = loadImage("./images/4.png"); 
}

void draw()
{
  background(255);
  
  // static images
  pushMatrix();
    translate(10,100);
    for(int i=0;i < imageList.length-1; i++)
    {
       image(imageList[i],0,0,140,140); 
       translate(150,0);
    } 
  popMatrix();
  
  // earth follows mouse
  pushMatrix();
    translate(mouseX,mouseY);
     image(imageList[3],-70,-70,140,140);
  popMatrix();
}