Bring me the Letter
Wie lang dieser String ist und was drin steht ist unerheblich. Einfache Operationen wie zum Beispiel ein Zeilenumbruch lassen sich mit \n realisieren. Weiter liefert String auch bereits Methoden um z.B. die Position eines Zeichen in einem String zu ermitteln oder wiederzugeben charAt().
Damit Buchstabe um Buchstabe manipulieren kann, ist im folgenden Beispiel der String in einen Array currentLetterObj[] abgelegt. Die Größe des Arrays beträgt genau so viel wie der String lang ist myString.length().

Mit text(myString,150,50); wird der komplette Text wiedergegeben.
Buchstabe um Buchstabe wird hier jedoch mit dem Array currentLetterObj, der bei jedem Mausklick ein neues Buchstabenobjekt BringMeTheLetter erzeugt. In der Klasse BringMeTheLetter wird der Buchstaben erzeugt und in der drawLetter() Methode animiert. Mit der Stringfunktion charAt() und dem Zähler counter rückt der Zeiger immer um ein Zeichen weiter und arbeitet den kompletten String ab.

Zum Anzeigen bitte auf das Vorschaubild links klicken.

BringMeTheLetter[] currentLetterObj;
 
String myString = "i am here";
PFont myFont;
int counter = 0;
char currentChar;
boolean start = false;
 
void setup(){
  size(320, 240);
  frameRate(30);
  myFont = createFont("ArnoPro-ItalicSubhead",40,true);
  textFont(myFont);
  textAlign(LEFT);
  fill(0,80);
  smooth();
 
  currentLetterObj = new BringMeTheLetter[myString.length()];
}
 
void draw(){
  background(255);
  text(myString,100,120);
  float w = textWidth(currentChar);
  fill(0,w*5);
 
  if(start){
    for (int i = 0; i < counter; i++){
      currentLetterObj[i].drawLetter();
      currentLetterObj[i].falling();
    }
  }
}
 
void  mouseClicked(){
  start = true;
  currentChar = myString.charAt(counter);
  int posX = mouseX;
  int posY = mouseY;
  currentLetterObj[counter] = new BringMeTheLetter(currentChar, posX, posY);
 
  if(counter >= myString.length()-1){
    counter = 0;
  }
  else{
    counter++;
  }
}
 
class BringMeTheLetter {
  char myChar;
  int x;
  int y;
  int alpha;
 
  BringMeTheLetter(char _char,int _x, int _y){
    myChar = _char;
    x = _x;
    y = _y;
    alpha = 100;
  }
 
  void drawLetter(){
    alpha--;
    fill(0,alpha);
    text(myChar,x,y);
  }
 
  void falling(){
    y++;
  }
}

Vielen Dank an Patrick Paul und Dennis Kochlick deren Beispiele hier zum Teil Pate standen und deren Buch “Gestalten mit Code” sehr inspirierend ist.

In der setup() Methode werden in einer for-Schleife die Anzahl der Linien N generiert und gleich beim Erstellen über den Parameter side als Linie definiert die sich nach links oder nach rechts bewegen soll. Die Variable side kennt zwei Zustände; true und false. Ich habe definiert, dass eine Bewegung nach link false und eine Bewegung nach rechts true ist. Die Abfrage kann dann einfach if(side) oder if(!side) lauten.

Zum Ansehen bitte auf das Vorschaubild klicken!

VertLine[] myVertLines;
int N = 100; //Anzahl Linien für die linke Seite
boolean side; //left = false, right = true
 
void setup(){
  size(340,400);
  frameRate(25);
  float xPos = 10;
  myVertLines = new VertLine[N*2];
 
  for(int i=0;i<N*2;i++){
    float xPosLeft = width/2;
    float speedLeft = random(-1,1);
    int trans;
 
    if(i<N){
      side = false;
    }
    else{
      side = true;
    }
    myVertLines[i] = new VertLine(xPosLeft, speedLeft, side);
  }
 }
 
 void draw(){
  background(255);
  for(int i=0;i<N*2;i++){
    myVertLines[i].run();
  }
}
 
//Klasse für die Linien
class VertLine{
  float xPosLeft;
  float speedLeft;
  boolean side;
  int trans;
  int thickness;
 
  VertLine(float _xPosLeft, float _speedLeft, boolean _side){
    xPosLeft = _xPosLeft;
    side = _side;
    speedLeft = _speedLeft;
  }
 
  void run(){
    // println(side);
 
    /*
     * Die Linien sollen in der Mitte jeweils Dicke = 1 und 
     * opacity = 255, und am Rand dick und transparent sein
     */
    if (!side){//Linke hälfte
        xPosLeft = xPosLeft + speedLeft;
 
      //einzeilige if-Bedingungen können ohne geschweifte Klammer geschrieben werden
      if(xPosLeft < 0)
        speedLeft =- speedLeft;
 
      if(xPosLeft > width/2)
        speedLeft =- speedLeft;
 
      /*
       * innen dunkel / 255 alpha
       * aussen alpha 20
       * differenz = 235
       */
      float trans = (235/(width/2))*xPosLeft;
      stroke(0,0,0,trans);
 
      /*
      * Breite in der Mitte = 1
      * aussen = 10
      */
      float thickness = (width/2) / (xPosLeft+(width/10));
      strokeWeight(thickness);
      drawShape();
    }
    else{//rechte Hälfte
      xPosLeft = xPosLeft + speedLeft;
 
      if(xPosLeft > width)
        speedLeft =- speedLeft;
 
      if(xPosLeft < width/2)
        speedLeft =- speedLeft;
 
      /*
       * innen dunkel / 255 alpha
       * aussen alpha 20
       * differenz = 235
       */
      float trans = width-(235/(width/2))*xPosLeft;
      stroke(0,0,0,trans);
 
      /*
      * Breite in der Mitte = 1
      * aussen = 10
      */
      float thickness = (width/2) / ((width - xPosLeft)+(width/10));
      strokeWeight(thickness);
      drawShape();
    }
  }
 
  void drawShape(){
    line(xPosLeft,0,xPosLeft,height);
  }
}

In diesem Beispiele will ich Kreise auf der Screen verteilen. In der setup() Methode wird jedem Kreis ein zufällig generierter Wert für seine Startposition (x/y), seine Geschwindigkeit (vx/vy) und seine Größe (radius) erzeugt.

Der Kreis selber ist in einer Klasse mit dem Namen Ball beschrieben. Eine Klasse beginnt mit der Definition class Name{ und der Methode zum Aufruf der Klasse, hier Ball(){. Ob die Klasse im selben Script wie die Hauptklasse steht oder eine eigene Datei, spielt keine Rolle. Bei der Namensgebung ist lediglich wichtig, dass die Datei gleich heißt wie die Klasse auch. In der Regel beginnen Klassen mit einem Großbuchstaben.

Im Processingeditor können zusätzlich Dateien als Tabs abgelgt werden. Erstellt weden die Tabs mit dem Pfeil rechts oben.

In der sogenannten Superklasse, im Beispielbild oben die Datei _01, kann Ball nun wie ein Datentyp behandelt werden. Da ich die Möglichkeit für mehrere Bälle haben will, definiere ich Ball als Array Ball[] und gebe den Instanznamen myBalls. Damit der Array myBalls überhaupt zum Leben gebracht wird, muss ich ihn, ähnlich wie die Kugeln später auch, über das Schlüsselwort new erzeugen. Damit der Array auch weiß, wie viel Speicher für ihn reserviert werden soll, wird mit der Variable N für die Anzahl der Kugeln auch festgelegt, wie viele Kreise myBalls[] beinhalten kann.

In einer for-Schleife werden danach die Kreise ebenfalls mit new erzeugt
myBalls[i] = new Ball(x, y, vx, vy, radius);
und jeweils aus dem Code der Klasse Ball eine Instanz erzeugt. In der Klasse selber werden in diesem Beispiel lediglich die übertragenen Parameter x, y, vx, vy, radius in global definierten Variablen, für jeden Ball einzeln, abgelegt. Global definierte Variablen können überall in der Klasse verwendet werden, die lokale Variable _x hingegen könnte nur in der Methode Ball{} verwendet werden.
Die Zählervariable i dient gleichzeitig zum durchnummerieren der einzelnen Kreise. Beim ausführen des Codes, sind die Kreise nun alle im Speicher vorhanden, aber noch nicht sichtbar.

Make the things move
Den kontinuierlichen Aufruf der Methode draw() kann ich nun auch gleich benutzen, um den Kreis zu bewegen. Damit alle Kreise angezeigt werden, müssen in jedem Renderzyklus immer alle Kreise über eine for-Schleife abgearbeitet werden. Bei einer Framerate von 25 Zyklen pro Sekunden und 100 Kreisen müssen also je fünfunzwanzigstel Sekunde 100 Kreise gerendert werden.

Bewegt werden die Kreise in der Ball Klasse. In der Superklasse wird die Methode run() über die Punktsyntax aufgerufen
myBalls[i].run();
und jeweils mit der jeder Kugel eigenen Geschwindigkeit vx und vy bewegt, indem bei jedem Aufruf der Wert vx rsp. vy zur aktuellen Position hinzuaddiert wird.
x = x + vx;

Erreicht der Kreis den Screenrand, muss die Richtung umgedreht werden. Dazu ändert man einfach das Vorzeichen.
vx = -vx;

Um das folgende Beispiel anzuzeigen, bitte auf das Vorschaubild klicken.

Ball[] myBalls;
int N = 1; // Anzahl der Bälle
void setup(){
  size(320, 240);
  frameRate(25);
  myBalls = new Ball[N];
  for (int i = 0; i < N; i++)  {
    float x = random(0, width);
    float y = random(0, height);
    float vx = random(-7, 7);
    float vy = random(-7, 7);
    float radius = random(3, 9);
    myBalls[i] = new Ball(x, y, vx, vy, radius);
  }
}
void draw(){
  background(0);
  for (int i = 0; i < N; i++)  {
    myBalls[i].run();
  }
}
class Ball{
  float x;
  float y;
  float vx;
  float vy;
  float radius;
  Ball(float _x, float _y, float _vx, float _vy, float _radius){
    x = _x;
    y = _y;
    vx = _vx;
    vy = _vy;
    radius = _radius;
  }
  void run()  {
    drawShape();
 
    x = x + vx;
    y = y + vy;
 
    /*
    * Abfragen nach Kollisionen links, rechts, oben und unten zur Screen
    */
    if (x < radius)    {
      x = radius;
      vx = -vx;
    }
    if (x > width - radius)    {
      x = width - radius;
      vx = -vx;
    }
    if (y < radius)    {
      y = radius;
      vy = -vy;
    }
    if (y > height - radius)    {
      y = height - radius;
      vy = -vy;
    }
 
  }
  void drawShape()  {
    ellipseMode(CENTER_RADIUS);
    noStroke();
    fill(255);
    ellipse(x, y, radius, radius);
  }
}

Um das Beispiel anzuzeigen bitte auf das Vorschaubild klicken!

int size = 50;
int x = 160;
int y = 120;
void setup() {
  size(320, 240);
  rectMode(CENTER);
  noStroke();
}
void draw() {
  background(255);
  /* Boolean Abfrage /  */
  if (hittest(mouseX, mouseY)) {
    fill(255, 0, 0);
  }
  else {
    fill(127);
  }
  /* Button malen */
  rect(x, y, size, size);
}
boolean hittest(int theX, int theY) {
  if (theX > x - size / 2 &&
    theX < x + size / 2 &&
    theY > y - size / 2 &&
    theY < y + size / 2 ) {
    return true;
 
  }
  else {
    return false;
  }
}

Dieser Grenzwert ist in diesem Beispiel dynamisch an die X-Position des Mauszeigers gekoppelt und gibt einen Wert zwischen 0 und 255 aus
float myThreshold = (float)mouseX / width * 255;

Nachdem das Bild geladen ist
myImage = loadImage("data/manfred-pecki.png");
und als Hintergrundbild wiedergegeben ist
background(myImage);

kann ich mit loadPixels() jedes einzelne Pixel meiner Anwendung in einem Array zur Verfügung stellen, verändern und dieses veränderte Pixel mit updatePixels() neu auf die Screen rendern.

Das passiert alles in der draw() Methode in einer for-Schleife, die genau so lang ist wie das Bild Pixel hat. Diese Länge erhalte ich in einem Array mit pixels.length. Bei welchem Pixel ich mich gerade befinde sagt mir der Zähler myPixelPosition.

In jedem Schleifendurchlauf wird die Funbktion setPixelFromBitmap() aufgerufen, die entscheidet ob ein Pixel weiß oder schwarz werden soll.
Ist die Schleife abgearbeitet, wird das Ergebnis mit updatePixels(); auf die Screen gerendert.

Hier wird auch deutlich, das die Länge und Breite des Bildes für die Verarbeitung keine Rolle spielt, sondern das Bild einfach eine lineare Aneinanderreihung von einzelnen Pixeln ist.

Um diesen Prozess auch visuell wahrzunehmen, können wir die Schleife dahingehend ändern, nicht das gesamte Bild je Renderzyklus in draw() zu verändern, sondern entweder Zeilenweise
for (int i=0; i < width; i++) {
oder Pixelweise
for (int i=0; i < 1; i++) {

Um dieses Beispiel anzuzeigen bitt auf das Vorschaubild klicken!

PImage myImage;
 
int myPixelPosition;
 
void setup() {
  size(176,247);//Screnn in der Größe des importieren Bildes
  frameRate(60);
 // myImage = loadImage("http://ifdblog.org/ba-om2010/data_processingblog");
  myImage = loadImage("data/manfred-pecki.png");
  background(myImage);
}
void draw() {
  /* lädt die komplette Screen in den Array pixels[] von myImage */
  loadPixels();
 
  /* den "Schwellwert" festlegen
  *  Operation ergibt einen Wert von 0 - 255
  */
  float myThreshold = (float)mouseX / width * 255;
 
  for (int i=0; i < pixels.length; i++) {
    setPixelFromBitmap(myThreshold);
    /*
    * Inkrement von myPixelPosition und mit dem *Modulo* wird
    * garantierrt, dass der Array in seinen Grenzen bleibt
    */
    myPixelPosition++;
    myPixelPosition%= pixels.length;
  }
  /* alle Pixels darstellen */
  updatePixels();
}
 
void setPixelFromBitmap(float theThreshold) {
  /*
  * das aktuelle Pixel abfragen
  * myPixePosition ist global definiert und kann deshalb überall verwendet werden
  */
  int myImagePixel = myImage.pixels[myPixelPosition];
 
  /*
  * Abfrage, ob aktuelle Pixel größer oder kleiner ist als der Schwellwert...
  * entsprechend wird der Farbwert invertiert
  */
  if (brightness(myImagePixel) < theThreshold) {
    pixels[myPixelPosition] = color(0);
  }
  else {
    pixels[myPixelPosition] = color(255);
  }
}

Modulo
Der Modulo gibt mir den Rest einer Division zurück.
5 Modulo 2 = 1
5 % 2 = 1
Damit kann ich einen Zähler erstellen, der nie über einen Bestimmten Wert wächst und einen Array out of Bounds Fehler produziert, also einen Arrayindex abfragt der größer wäre als der Arry tatsächlich ist:
myPixelPosition%= pixels.length;
wo_befinde_ich_mich_im_array %= gesamtlänge_des_arrays

int[] myArray;
int myArrayPosition;
void setup() {
  size(320, 240);
  frameRate(5);
  rectMode(CENTER);
 
  myArray = new int[]{
    40, 80, 120, 160, 200, 240, 280  };
}
void draw() {
  background(255);
  myArrayPosition++;
  myArrayPosition %= myArray.length;
  println(myArrayPosition);
  rect(myArray[myArrayPosition], height / 2, 40, height / 2);
}

Reihungen können unter anderem mit der for-Schleife erstellt werden. Die for-Schleife wiederholt sich so lange, bis eine definierte Bedingung erfüllt ist. Dazu werden in der Klammer nach for drei “Gesetze” aufgestellt;
for(wie beginnt die Schleife, wann endet die Schleife; was verändert sich in jedem Durchlauf)
Dazu definiert man einen Startwert, einen Endwert. Kontrolliert wird die Schleife durch den Zähler, der sich in jedem Schleifendurchlauf ein klein wenig verändert, z.B. um 1 erhöht. Zugleich kann der Zähler, da er sich nach meinen Wünschen verändert, für die Programmsteuerung verwendet werden. Z.B:

for(Zähler bekommt einen Anfangswert; Zähler kleiner als Endwert?; dann wird der Zähler nochmal ein wenig größer)

Ist der Zähler nicht mehr kleiner als der Endwert, wir die Schleife einfach verlassen und der Programmablauf geht zum nächsten Schritt.

Methode
Um immer wiederkehrende Aufgaben nicht mehrmals programmieren zu müssen, können diese in sogenannte Methoden gepackt werden. Methoden sind wie setup() und draw() in sich geschlossene Blöcke die mit einer geschweiften Klammer beginne und enden. Dazwischen liegt der Methodenrumpf.
Im Beispiel unten sind
drawHalfWay()
getAverage()
solche Methoden, die von jeder beliebigen Stelle aus aufgerufen werden können.

int numLines = 40;
int distLine;
 void setup(){
 size(600,600);
 distLine = width/numLines;
}
 
void draw(){
 background(255);
 /* Line malen, aber erst die Hälfte berechnen...*/
 for(int x=0;x<=numLines;x++){
  for(int y=0;y<=numLines;y++){
   drawHalfWay(x*distLine,y*distLine);
  }
 }
}
 
void drawHalfWay(int theX, int theY){
 int  myHalfX = getAverage(mouseX, theX);
 int  myHalfY = getAverage(mouseY, theY);
 line(theX, theY, myHalfX, myHalfY);
}
 
int getAverage(int theA, int theB){
 int myHalfWay = ((theA + theB) / 2);
 return myHalfWay;
}

Die Beispiele lehnen sich an Tutorials von Patrick Paul und Dennis Kochlick an.

Teil 2: Schleifen und Methoden
Teil 3: Pixeldaten verarbeiten und Arrys
Teil 4: Hittest und Button
Teil 5: Objekt und Bewegung
Teil 6: Spiegeln
Teil 7: Stringoperation

setup und draw
Die Grundzüge einer einfachen processing Anwendung besteht aus dem setup() und dem draw(). Das setup() wird in der Programmausführung einmal durchlaufen und legt die ersten Einstellungen wie der Größe des Darstellungsfensters fest. Die draw() wird zyklisch durchlaufen wobei jeder Zyklus neue Bedingungen erfüllen kann, z.B. die Mausposition in eine Ellipsengröße umwandeln.

void setup(){
 size(300,300);
}
 
void draw(){
 ellipseMode(CENTER);
 ellipse(mouseX, mouseY, pmouseX, pmouseY);
}