Processing Workshop 2010

void setup(){
 size(400, 400);
 smooth();
}

void draw(){
  //die variable mousePressed wir automatisch vom system generiert
  //wenn die maus gedrueckt wird (egal ob rechts oder links) dann
  //ist "mousePressed" gleich "true", wenn nicht dann "false"
  if(mousePressed == false){
    background(255);
  }else{
    ellipseMode(CENTER);
    noFill();
    stroke(0);
    //die variablen "mouseX" und "mouseY" enthalten immer die aktuelle
    //maus position in unserem programm
    ellipse(mouseX, mouseY, 20, 20);
  }
}

void setup(){
  size(400, 400);
  //smooth(); sorgt dafuer, dass das antialiazing aktiviert wird
  //und die objekte weichgezeichnet und nicht so pixelig sind
  smooth();
}

void draw(){
  background(255);
  //der befehl "for" leitet eine schleife ein
  //in den klammern werden darauf folgend drei dinge angebene
  //int i=0; definiert eine variable und setzt diese auf "0"
  //i < 10; definiert das die schleife so lange ausgefuehrt wird
  //wie die variable "i" kleiner 10 ist.
  //i++ gibt an, dass die variable i nachdem die schlaufe durch-
  //laufen wurde um "1" erhoeht wird.
  //in diesem fall wird die schleife also 10 mal ausgefuehrt.
  //beim ersten durchlaufen ist die variable "i" noch "0" beim
  //letzten durchlaufen ist die variable "i" dann "9" sobald die
  //variable "i" den wert "10" erreicht wird die schleife beendet
  for(int i=0; i < 10; i++){
    for(int j=0; j < 10; j++){
      //mit dem befehlt rect(x-position, y-position, breite, hoehe)
      //koennen wir ein rechteck mit der angegeben breite & hoehe
      //zeichnen, die linke obere ecke ist dabei an der angegebenen
      //x- & y-position
      rect(20+i*30, 20+j*30, 20, 20);
    }
  }
}

Für alle die nicht weiterkommen oder noch ein wenig Anregung brauchen hier noch ein paar Code-Beispiele.

//zwei schraegstriche sorgen dafuer das alles ws in der selben zeile
//steht vom programm spaeter ignoriert wird, so kann man einzelne
//befehle deaktivieren oder notizen in den code einfuegen.

//außerhalb der setup() & draw() funktion
//werden globale variablen definiert

//int definiert das die variable "zaehler"
//nur mit ganzen zahlen gefüllt werden darf
int zaehler = 0;
int kreis_groesse = 0;

//boolean definiert das die variable "richtung"
//nur "false" oder "true" sein kann
boolean richtung = false;

//die setup-funktion wird zu beginn des programms einmal ausgeführt
void setup(){
  //mit size(breit, hoehe); können wir
  //die größe unsers programms definieren
  size(400, 400);
}

//die draw-funktion wird so lange das programm läuft
//immer wieder aufgerufen
void draw(){
  //mit background können wir die hintergrundfarbe angeben
  //farben können immer wie folgt angegeben werden
  //background(0); bis background(255); : "weiß" bis "schwarz"
  //background(rot, gruen, blau); jeweils 0 bis 255
  //background(rot, gruen, blau, transparenz); s.o. plus die
  //transparenz ebenfalls 0 bis 255
  background(255);

  //stroke() gibt die linienfarbe an. genau wie bei background
  //kann man die angabe der farbe variieren
  stroke(0);

  //strokeWeight() gibt die linienstaerke an, diese wird in
  //Pixeln definiert
  strokeWeight(10);

  //noStroke() sorgt dafuer das keine linien gezeichnet werden
  //noStroke();

  //strokeJoin() gibt an was gemalt werden soll wenn zwei linien
  //aufeinander stossen. weitere angaben ausser "ROUND" findet ihr
  //auf http://processing.org/reference/strokeJoin_.html
  strokeJoin(ROUND);

  //strokeCap() gibt an wie die enden der linien aussehen sollen
  //weitere angaben ausser "ROUND" findet ihr auf
  //http://processing.org/reference/strokeCap_.html
  strokeCap(ROUND);

  //mit ellipseMode() koennen wir definieren wo die x- und
  //y-koordinaten liegen die wir beim malen der ellipse angeben
  //bei "CENTER" liegt der nullpunkt in der mitte des kreises
  //wenn wir "CORNER" schreiben, liegt der nullpunkt oben links
  ellipseMode(CENTER);

  //fill() gibt die fuellung an, hier gelten wieder die selben
  //regeln wie bei background & stroke
  fill(255,8,128);

  //noFill() sorgt dafuer das gezeichnete objekte keine fuellung haben
  //noFill();

  //ellipse(x-position, y-position, breite, hoehe) zeichnet
  //eine ellipse an die angegebene x- & y-position mit der
  //entsprechenden breite und hoehe
  ellipse(200, 200, kreis_groesse, kreis_groesse);

  //wenn wir bei einer variable die eine zahl enthaelt
  //"++" hinter die zahl schreiben wird zu der zahl die
  //in der variable gespeichert ist "1" dazu addiert.
  //schreiben wir "--" wird "1" subtrahiert.
  //wollen wir einen anderen wert als "1" nehmen, können
  //wir "+=5" für addieren und "-=5" fuer subtrahieren nutzen
  zaehler++;

  //if(){} ist eine wenn-dann funktion
  //wenn das was in der runden klammer steht zutrifft werden
  //die zeilen die darauf folgend in den geschwungenen klammern
  //stehen ausgefuehrt, trifft es nicht zu werden diese ueber-
  //sprungen. in diesem fall kann die funktion wie folgt gelesen
  //werden: wenn "richtung" gleich "true" dann subtrahiere 1 von "kreis_groesse"
  //"==" sorgt also dafuer das ueberprueft wird ob zwei werte bzw.
  //variablen gleich sind andere moegliche ueberpruefungen sind:
  //>= groesser gleich
  // groesser
  if(richtung == true){
    kreis_groesse--;
  }

  if(richtung == false){
    kreis_groesse++;
  }

  if(zaehler >= 100){
    zaehler = 0;
    if(richtung == true){
      richtung = false;
    //}else{ ist ein zusatz zur else funktion es als wenn-nicht-dann
    //gelesen werden. wenn das was in der ersten if-funktion stand
    //NICHT zutrifft dann wird das ausgefuehrt was nach else in den
    //geschweiften klammern steht
    }else{
      richtung = true;
    }
  }

}

Source Code zum download

Bis zum nächsten Termin am 02. November sollte euer Kozept so weit sein, dass ihr in die finale Programmierung einsteigen könnt.

Sucht euch außerdem eine Library aus, die ihr vorstellen wollt. Nichts großes, nur kurz Erläutern wozu die Library gut ist ein paar Beispiele und ein Code-Beispiel wie man sie benutzt.

Bitte dokumentiert eure Prototypen mit Screenshots.

Falls ihr spezielle Daten für euer Konzept benötigt, meldet euch.

Bitte fertig bis zu unserem nächsten Termin am 02. November 4 verschiedene
Processing Sketche an und schickt diese bis spätestens 29.10 an mich.

Auf der Website www.processing.org findet ihr weiteres Material zum Arbeiten mit Processing:

• Erläuterung aller Befehle
• Tutorials

In einem Kurs von einem befreundeten Dozenten an der FH Köln sind auch Arbeiten entstanden. Dient als Inspiration für euch.

YouTube – Kanal von mikoeln.


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

}


}