Processing Workshop 2010

Lehrveranstaltung FH Trier Intermedia Design
Sebastian Meier

Code-Beispiele

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;
    }
  }

}

3D shape from image

Source Code zum download

Hausaufgabe Advanced

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.

Hausaufgabe Beginner

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.

Processing.org / Befehle & Tutorials

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

Bouncing Rect


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

int x_position = 0;
int y_position = 0;

int x_speed = 4;
int y_speed = 2;

boolean x_richtung = false;
boolean y_richtung = false;

void draw(){

background(150);

if(x_richtung == true){ x_position -= x_speed; }

if(x_richtung == false){ x_position += x_speed; }

if(y_richtung == true){ y_position -= y_speed; }

if(y_richtung == false){ y_position += y_speed; }

if(x_position > 350){ x_richtung = true; }

if(x_position < 0){ x_richtung = false; }

if(y_position > 350){ y_richtung = true; }

if(y_position < 0){ y_richtung = false; }

rect(x_position, y_position, 50, 50);

}

Grund-Befehle

void setup(){
//fenstergröße
//size(breite, höhe);
size(500, 500);
}

int farbeGruen = 100;
float farbeRot = 100.0;

int x_position_rechteck = 0;
int x_position_kreis = 450;

String einWort = "das Wort";

void draw(){
//background(rot, grün, blau);
background(150, 0, 0);

//fill(rot, grün, blau);
fill(255, 255, 255);

//stroke(rot, grün, blau);
stroke(255, 0, 0);

//strokeWeight(strich dicke);
strokeWeight(8);

//stroke(wie sieht die verbindung von zwei linien aus);
strokeJoin(ROUND);

//strokeCap(wie sieht das Ende einer Linie aus);
strokeCap(ROUND);

//rect(x-abstand, y-abstand, breite, höhe);
rect(x_position_rechteck, 10, 50, 50);

//Bei Zahlen sorgt ++; dafür das "plus 1" gerechnet wird
x_position_rechteck++;

//wert1 < wert2 , wert1 == wert2, wert1 >= wert2, wert1 <= wert2, wert1 != wert2
if(x_position_rechteck > 450){
x_position_rechteck = 450;
}

//ellipseMode(position des nullpuntkes); CENTER = Nullpunkt im Zentrum, CORNER = Nullpunkt oben links
ellipseMode(CORNER);

//fill(rot, grün, blau, alpha);
fill(255, 255, 255, 125);

//ellipse(x-abstand, y-abstand, breite, höhe);
ellipse(x_position_kreis, 10, 50, 50);

//Bei Zahlen sorgt --; dafür das "minus 1" gerechnet wird
x_position_kreis--;

//Text im Debug-Bereich von Procssing ausgeben
println("x_position_kreis:"+x_position_kreis);

//for(startwert; zustand damit die schleife ausgeführt wird; aktion am ende der schleife)
for(int zaehler = 0; zaehler < 10; zaehler++){
for(int anderer_zaehler = 0; anderer_zaehler < 10; anderer_zaehler++){
rect(20+zaehler*20, 100+anderer_zaehler*20, 20, 20);
}
}

}

Sketches 21.09.10

Hier die Sketches die wir heute durchgenommen haben:

processing_part1

Kursinformationen

Fachhochschule Trier — WS 2010/2011

Zum Winter-Semester-Anfang (2010/2011) wird ein Workshop zum Thema Processing angeboten. Der Workshop richtet sich an Anfänger und Fortgeschrittene (s.u.).

 

 

Für den Workshop gibt es 2SWS und 3 Credits.

Wenn Ihr Interesse habt, tragt euch bitte über StudIP ein. Bitte gebt bei eurer Anmeldung an ob Ihr Anfänger oder Fortgeschrittene seid. Bei Fragen wendet euch an processing-trier@sebastianmeier.eu.

 

 

Processing ist eine Programmierumgebung die speziell für Nicht-Programmierer entwickelt wurde. Die Software richtet sich so auch speziell an Designer. Es lassen sich sehr schnell Prototypen entwickeln, Informations- & Datenvisualisierungen aber auch Musik-Visualisierungen oder Verknüpfungen mit externen Eingabemedien wie Arduino schaffen.

 

 

Anfänger:

Im Abschnitt für Anfänger fangen wir bei NULL an. Ihr müsst noch nie programmiert haben um an diesem Abschnitt teilnehmen zu können. Wir werden Programmier-Grundlagen und die wichtigsten Processing-Befehle durchnehmen.

 

 

Fortgeschrittene:

Im Abschnitt für Fortgeschrittene werden wir uns auf eines der folgenden Themen konzentrieren und in den drei Tagen dieses Thema an Hand von kleinen Prototypen behandeln:

  • Musik Visualisierung
  • Daten Visualisierung
  • Objekt-Orientierte Programmierung (in Eclipse) & Partikel-Systeme
  • Generative Typographie & Logo/Zeichen-Entwicklung
  • ….

Ihr könnt bei eurer Anmeldung gerne noch Wünsche einreichen.

Kursinfo

Zum Winter-Semester-Anfang (2010/2011) wird ein Workshop zum Thema Processing angeboten. Der Workshop richtet sich an Anfänger und Fortgeschrittene. mehr erfahren

Autoren

Meta