1. Twitter Library herunterladen und im Sketch platzieren

Für die Kommunikation mit der Twitter API gibt es schon eine fertige Java Library, nämlich twitter4j. Du kannst „latest stable version“  hier herunterladen. Nutzen kann man die Library, nachdem man .zip Datei extrahiert und dann das Java Archiv twitter4j-core-2.2.5.jar in den (villeicht noch nicht vorhandenen) /code Ordner im Sketch Ordner kopiert hat. Man kann das auch bewerkstelligen, indem man die Datei einfach auf die Processing IDE zieht.

Link zur Javadoc von twitter4j.

Sehr interessant ist, dass es von der Library auch eine Android Version gibt. Falls das jemand getestet hat, bitte ich im Feedback.

2. Einen Entwickler Account bei Twitter erstellen

• Gehe auf die Homepage https://dev.twitter.com/.
• Klicke „create an App“ und dann „sign in“
• Formular ausfüllen und Nutzungsbedingungen akzeptieren.
• Nun bist du auf diese Seite gelangt:
• Von dieser Seite brauchst du den Consumer key und das Consumer secret.
• Klicke Create my access token
• Nun hast du auch Access token und das Access token secret. Damit kannst du nun deinen Processing Sketch mit der Twitter API verbinden.

3. Sketch erstellen und twitter4j einbinden

//Verbindung herstellen
ConfigurationBuilder cb = new ConfigurationBuilder();
cb.setOAuthConsumerKey("eigenerSchlüssel");
cb.setOAuthConsumerSecret("eigenerSchlüssel");
cb.setOAuthAccessToken("eigenesToken");
cb.setOAuthAccessTokenSecret("eigenesToken");

//Abfrage starten
Twitter twitter = new TwitterFactory(cb.build()).getInstance();
Query query = new Query("pink floyd now playing");
query.setRpp(5);

//tryCatch, damit das Programm nicht abstürzt, wenn die Abfrage
//mal schief geht
try {

  //Abrufen der Seiten mit den Suchergebnissen
for (int j=1; j<=15 ; j++) {
QueryResult result = twitter.search(query.page(j));
ArrayList tweets = (ArrayList) result.getTweets();

    //Abrufen der einzelnen Tweets
for (int i = 0; i < tweets.size(); i++) {
Tweet tweet = (Tweet) tweets.get(i);
String user = tweet.getFromUser();
String msg = tweet.getText();
long geo=tweet.getFromUserId();
Date d = tweet.getCreatedAt();

      //Abrufen des Heimatortes des Users
User USER = twitter.showUser(geo);
String location = USER.getLocation();

println("Page: "+j+"  "+i+": Tweet by " + user + " at " + d +"from: "+location );
}
}
}
catch (TwitterException te) {
println("Couldn't connect: " + te);
};

• Mit der TwitterFactory stellt die twitter4j Library ein Objekt zu Verfügung, das eine Abfrage durchführen kann.Twitter twitter = new TwitterFactory(cb.build()).getInstance(); 

• Mittels der Query kann die Abfrage spezifiziert werden.
  Query query = new Query(„pink floyd now playing“);

• Mit query.setRpp(5) stellt man die Anzahl der Treffer pro Seite ein (maximal 100). Außerdem kann man mit query.since(Datum) und query.until(Datum) die Suche zeitlich eingrenzen.

• Man kann maximal 15 Seiten mit max. 100 Treffern pro Seite abrufen.
  //Abrufen der Seiten mit den Suchergebnissen
  for (int j=1; j<=15 ; j++) {

• Die Treffer einer Seite werden in einem QueryResult Objekt gespeichert und dann ine eine ArrayList kopiert.
  QueryResult result = twitter.search(query.page(j));
  ArrayList tweets = (ArrayList) result.getTweets();

• Aus dieser ArrayList rufen wir dann Treffer für Treffer ab und extrahieren die benötigten Daten aus dem Tweet Objekt.

//Abrufen der einzelnen Tweets
for (int i = 0; i < tweets.size(); i++) {
Tweet tweet = (Tweet) tweets.get(i);
String user = tweet.getFromUser();
String msg = tweet.getText();
long geo=tweet.getFromUserId();
Date d = tweet.getCreatedAt();

• Falls man noch den Heimatort des Posters abrufen möchte, kann man das mit diesem Code machen:

//Abrufen des Heimatortes des Users
User USER = twitter.showUser(geo);
String location = USER.getLocation();

Da dies die Heimatort Einträge aus dem UserProfil sind, bekommt man natürlich auch Einträge wie: „Zwischen Seite 299 und 300″. Damit muss man leben.

Wie funktioniert die Betrachtungstechnik?

Entspanne Deine Augen und blicke geradeaus, als wenn Du durch das 3D Bild hindurchgucken wolltest. Jetzt sollte sich normalerweise langsam ein räumliches Bild entwickeln. Versuche jetzt mit den Augen das 3D Bild scharf zu stellen ohne sich bewußt auf das Stereogramm zu konzentrieren. Diese Methode des Betrachtens erfordert bei einigen eine gewisse Übung. Also nicht verzagen wenn es nicht auf Anhieb klappt.

Hier noch einige Tipps damit sich der Erfolg schneller einstellt:

* Keine Lichtreflexionen auf dem Bildschirm.

* Kopf geradehalten und die Augen parallel zur Bildschirmhorizontale.

* Abstand zum Bildschirm sollte ca. 80 cm betragen.

* Konzentration auf markante Bildpunkte und durch unscharfes Sehen Bildpunkte benachbarter Perioden zur Überlagerung bringen.

Text aus: http://www.wer-kennt-wen.de/gruppen/weltweit/das-magische-auge-uk6hr5qx/

Übe die Technik mit folgenden Beispielbildern:

•  Beispielbilder Datei

Über den Erfinder dieser Technik:

•  Kurze Geschichte über die Entstehung der Magic Eye – Bücher Datei
•  Welche Eigenschaften machten Tom Baccei so erfolgreich?

Aufbau des Auges:

Urheber: Talos

Das Licht fällt durch die Linse und den durchsichtigen Glaskörper auf die Netzhaut. Dort wird von den Sinneszellen (Zäpfchen und Stäbchen) die Helligkeit und Wellenlänge (Farbe) des Lichts aufgenommen. Über den Sehnerv, in dem schon die ersten signalverarbeitenden Prozesse stattfinden, werden die mittlerweile in Nervensignale umgewandelten Reize zum Gehirn weitergeleitet. Dort findet dann der eigentliche Wahrnehmungsprozess statt.

Wie nimmt das Auge Tiefe wahr?

Lies auf Wikipedia nach wie die Binokulare Raumwahrnehmung (mit 2 Augen) zustande kommt!

3 Tiefenkriterien:

http://de.wikipedia.org/wiki/Raumwahrnehmung

Während die Parallaxe den Winkel zwischen zwei Geraden beschreibt, steht der Begriff Disparation für für den Unterschied zwischen den Bildern, die unsere 2 Augen von einem 3-dimensionalen Objekt liefern.

•  Disparation

Wie erzeugen wir ein Bild mit 3-D Effekt – Ein Autostereogramm?

Was ist ein Autosteregramm?

Ein Autostereogramm ist ein 2-D Bild, das unser Gehirn, mit Hilfe seiner Eigenschaft immer nach korrespondierenden Netzhautpunkten zu suchen, dazu bringt ein 3-dimensionales Bild wahrzunehmen.

Dazu muss man allerdings seine Augen trainieren, denn das normale Verhältnis des Winkels der Augen zueinander und dem Fokus muss verändert werden. Dies gelingt nicht allen Menschen gleich gut. Außerdem können etwa 10 % der Menschen überhaupt keine 3-D Bilder sehen.

Die einfachste Form eines Autosterogramms besteht aus horizontal in gleichem Abstand angeordneten gleichen Objekten (Siehe Beispielbild oben).

Wie entsteht der Tiefeneindruck?

Die Tiefe der einzelnen Objektreihen wird durch deren (horizontalen) Abstand zu einander bestimmt („distance„). Dieser Abstand kann nun variieren. Diese Variation bezeichnen wir als „shift„, also die Abweichung vom Standard-Abstand.

In dieser Konstellation erscheinen die größeren Wolken unten(shift 0) als weiter entfernt, als die kleineren Wolken oben (shift 40). Man kann diese Methode auch ganz einfach mit Schrift erzeugen.

Betrachte die Buchstaben mit dem 3D Blick. Was kannst du beobachten?

Aus Wikipedia: http://en.wikipedia.org/wiki/File:Stereogram_Tut_Clean.png by Fred Hsu

Demo: Hier siehst Du wie aus 2 gleichen Objekten im Bild ein virtuelles Objekt, das hinter der Bildebene liegt entsteht.
Bewege den Mauszeiger auf der Grafik auf und ab, um die Tiefe des virtuellen Objekts verändern.

 Aufgabe: Verändere das Programm so, dass die Flugrichtung und Geschwindigkeit der Vögel mit der Maus gesteuert werden können.

Der Processing Sketch als Download: Landschaft

Etwas schwerer: Schreibe selbst ein Programm, das ein Autostereogramm erzeugt.

Programm zur Aufgabe: starte Applet

float picSize=1; //standard Zoom Factor
ArrayList pics; //holds the Pic-Objects

void setup() {
size (1200, 800);
background(9, 139, 232);
smooth();
fill(0, 200, 0);
pics = new ArrayList();

//adds the Pics to the ArrayList (Path,distance,Start-X-Pos,y-Pos, Zoom-Factor
pics.add(new Pic (loadImage("tree1.png"), 210,0, 540,picSize));
pics.add(new Pic (loadImage("cloud3.png"), 210,0, 160,picSize));
pics.add(new Pic (loadImage("tree2.png"), 190,200, 400,3));
pics.add(new Pic (loadImage("birds1.png"), 170,0, 340,picSize));
pics.add(new Pic (loadImage("butterfly.png"), 160,50, 430,picSize));
pics.add(new Pic (loadImage("bird2.png"), 150,0, 590,picSize));
pics.add(new Pic (loadImage("cloud1.png"), 190,0, 100,picSize));
pics.add(new Pic (loadImage("cloud2.png"), 170,0, 80,picSize));
pics.add(new Pic (loadImage("cloud1.png"), 150,0, 10,picSize));
}

void draw() {

//draws the Pics
for (int i=0; i<pics.size(); i++) {
Pic pic = (Pic) pics.get(i);
pic.drawpic();
}
}

class Pic {

//Variables of Pic-Object
PImage pic;
int distance;
int startX;
int yPos;
float picSize;

//The Constructor
Pic (PImage pic, int distance, int startX, int yPos, float picSize) {
this.pic    = pic;
this.distance   = distance;
this.yPos = yPos;
this.picSize=picSize;
this.startX=startX;
}

//Methods of Pics
void drawpic() {
for (int i=10; i<width; i+=distance) {
image(pic, i-startX, yPos, distance*picSize, distance*7/10*picSize);
}
}
}

Einfache Ebene mit Wallpaper

Ersetzen wir nun die einzelnen Objekte mit einem Flächen füllenden Wallpaper, sehen wir, dass bei entsprechender Betrachtung eine Fläche zu sehen ist, die unter der realen Zeichenebene liegt.

Aus Wikipedia: http://en.wikipedia.org/wiki/File:Stereogram_Tut_Clean.png by Fred Hsu

Wieder gilt: Je weiter die korrespondierenden Pixel auseinander liegen, desto weiter unter der Oberfläche wird der Bildabschnitt wahrgenommen.

3D Bild aus einer Depth Map:
Als Depth Map bezeichnet man ein Graustufen-Bild, welches die Tiefeninformation als Grauwert darstellt (dunkel…hinten, hell…vorne). Damit kann man nun nicht nur ganze Objekte in einer bestimmten Ebene platzieren, sondern jedes Pixel seiner Tiefeninformation entsprechend darstellen (stimmt eigentlich nicht ganz, ist zu diesem Zeitpunkt aber egal).

Aus Wikipedia: http://en.wikipedia.org/wiki/File:Stereogram_Tut_Clean.png by Fred Hsu

Das funktioniert folgendermaßen: Der erste Steifen Wallpaper wird ganz links am Bildschirm gezeichnet. Beim Zeichnen des zweiten Streifens wird dann Zeile für Zeile zu jedem Pixel das entsprechende Pixel aus der Depth Map eingelesen. Ist das Pixel schwarz, wird das Pixel von der gleichen Position im 1.Streifen (rot) in den 2. Streifen (blau) kopiert (siehe Abb. oben!). Ist das Pixel in der Depth Map heller, wird im ersten Streifen (rot) ein Pixel weiter rechts kopiert.

Dadurch wird das Bild Streifen für Streifen immer weiter verzerrt. Schöner wäre es vielleicht, wenn man von der Mitte ausgehend dann links und nach rechts verzerrt.

Wallpapers kann man relativ leicht selber herstellen, oder durch ein zufälliges Pixelmuster ersetzen. Depth Maps können aus 3D Programmen exportiert werden.

Mit einem Gimp Plugin können solche Depth Maps auch selbst hergestellt werden.

Es findet sich aber auch im Internet brauchbares Material. Z.B. hier: Muster, Depth-Maps und einige Stereogramme

• Oder mit einer veränderten Code-Zeile :

Beispiel: starte Applet

</pre>
PImage depthMap, wallpaper;//deklariert die Bild Variablen;

int [] [] grau = new int [1260] [600]; //hier wird ein zweidimensionales Array deklariert
color [] [] wall = new color [140] [600];
color [] [] actual = new color [140] [600];
int shift; //horizontale Verschiebung des Pixels
int x=0; // damit sich die
int xToTake; //Bildpunkt im vorigen Wallpaper Streifen, der gezeichnet wird

void setup() {
size(1260, 600);
smooth();
strokeWeight(5);

//Einlesen der Depth Maps und speichern der Tiefeninfo als Int-Array
depthMap = loadImage("hai_grey.png");//weist der Variablen depthMap die Datei hai_grey.png zu
depthMap.loadPixels(); //sollte man aufrufen, bevor man die einzelen Pixel bearbeitet
for (int gridX = 0; gridX < depthMap.width; gridX++) {
for (int gridY = 0; gridY < depthMap.height; gridY++) {
// überträgt die Farbinfo eines Pixels auf die Variable farbe
color farbe = depthMap.pixels[gridY*depthMap.width+gridX];
// wandelt die Farbinfo in einen Grauwert um
int grauwert =round(red(farbe)*0.222+green(farbe)*0.707+blue(farbe)*0.071);
grau [gridX] [gridY] = grauwert;//speichert den Grauwert in unser Array grau
}
}

//Einlesen der Depth Maps und speichern der Tiefeninfo als Int-Array
wallpaper=loadImage("hai_pattern.png");
wallpaper.loadPixels(); //sollte man aufrufen, bevor man die einzelen Pixel bearbeitet
for (int gridX = 0; gridX < wallpaper.width; gridX++) {
for (int gridY = 0; gridY < wallpaper.height; gridY++) {
// überträgt die Farbinfo eines Pixels auf die Variable farbe
color farbe = wallpaper.pixels[gridY*wallpaper.width+gridX];
// wird die nächste Zeile statt der vorherigen einkommentiert, wird das Wallpaper Bild
// durch ein zufälliges Pixelmuster ersetzt
// color farbe = color ((int) random(0,255),(int) random(0,255),(int) random(0,255));
wall [gridX] [gridY] = farbe;//speichert den Grauwert in unser Array grau
}
}
}

void draw() {
x=(frameCount-1)*wallpaper.width;
if (frameCount<10) {
for (int gridY = 0; gridY < wallpaper.height; gridY+=1) {
for (int gridX = 0; gridX < wallpaper.width; gridX+=1) {
shift=(int) map(grau[gridX+(frameCount-1)*wallpaper.width] [gridY], 0, 255, 0, 60);
xToTake=(wallpaper.width-((wallpaper.width-gridX)-shift))%wallpaper.width;
//einkommentiert kann man hier gut die Funktionsweise ablesen!
//if(gridY==height/2) println("grauwert: "+grau[gridX+(frameCount-1)*wallpaper.width] [gridY]+"grid: "+gridX+"shift: "+shift+" shift:"+xToTake);
stroke(wall [xToTake] [gridY]);//gibt den Grauwert aus unserem Array aus
point(gridX+x, gridY);
wall [gridX] [gridY]=wall  [xToTake] [gridY];
}
}
}
else noLoop();
}
<pre>

Processing Sketch als Download:  3D Hai

Wichtigste Unterschiede zu Arrays:

• Variable Anzahl von Elementen
• Die Methode size() gibt die aktuelle Anzahl der Elemente zurück
• Mit add() werden Elemente ergänzt
• Mit remove() werden gelöscht
• und mit get() ausgelesen.

Unvollständiges Codebeispiel aus dem Projekt Korruption in der Demokratie:

.
.
// Objekt wird erstellt
ArrayList agenten;

void setup() {
.
.
// Die Variable agenten wird mit einer ArrayList befüllt
agenten = new ArrayList();
}

void draw() {

// Nacheinander erden alle Objekte der ArrayList ausgelesen
for (int i=0; i<agenten.size(); i++) {

//Hierbei muss die Art des Objekts in der ArrayList festgelegt werden.
Agent agent =(Agent) agenten.get(i);
agent.render();
}
for (int r=(int) random (8);r>0;r--) {

// Listeneintrag hinzufügen
agenten.add(new Agent(pnts[j].x, pnts[j].y, agenten.size()));
}
}

Wie „virtueller Schimmel“ mit Hilfe von Agenten erzeugt werden kann und wie dieser die Demokratie „befällt“, zeigt folgendes Beispiel:

Starte Applet

Mit Hilfe der Geomerative Library wird die Schrift erzeugt und die Koordinaten der Konturpunkte gefunden und in ein Array gespeichert. Mit einem Mausklick werden dann Agenten erzeugt, welche eine begrenzte Lebensdauer aufweisen und sich in zufälliger Richtung fortbewegen. Trifft ein Agent nun auf einen Konturpunkt, dann „stirbt“ er. Davor erzeugt er aber noch 0-8 neue Agenten, die sich ihrerseits auf die Suche nach Punkten auf der Schriftkontur machen. So durchdringen sie nach und nach alle Buchstaben bis dahin unsichtbaren Buchstaben und der Schriftzug wird sichtbar.

import geomerative.*;

RShape shp, shp1, shp2;
RPoint[] pnts, pnts1;

String BspText = "Korruption durchdringt die ...";
String BspText1 = "Demokratie!";
String BspText2 = "Mausklick um zu starten!";

ArrayList agenten;

void setup() {
size(1400, 500);
strokeWeight(1);
smooth();
background(0);
translate(width/2, height*2/12);
agenten = new ArrayList();

RG.init(this);

// 3 Shape - Objekte werden erzeugt.
shp = RG.getText(BspText, "Ubuntu-R.ttf", width/60, CENTER);
shp1 = RG.getText(BspText1, "Ubuntu-R.ttf", width*8/70, CENTER);
shp2 = RG.getText(BspText2, "Ubuntu-R.ttf", width/80, CENTER);

// Punkte an der Schriftkontur finden
//Abstand der Punkte
RCommand.setSegmentLength (1);
//Modus
RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

// Die Shapes wirde gezeichnet
fill(180, 160);
shp.draw();

// und positioneiert
shp1.translate(0, height*7/12);
shp2.translate(0, height*9/12);
fill(180, 160);
shp2.draw();

// Finden der Konturpunkte
pnts = shp1.getPoints();

// Variation der einzelnen Punkte
for (int i=0;i<pnts.length; i++) {
pnts[i].x+= (int) random(-5, 5);
pnts[i].y+= (int) random(-5, 5);
}
}

void draw() {

translate(width/2, height*1/12);

for (int i=0; i<agenten.size(); i++) {
//jeder Agent wird gezeichnet
Agent agent =(Agent) agenten.get(i);
agent.render();
//jeder Agent muß die Position ändern
agent.move();

// entfernen von Agenten aus der ArrayList
if (agent.lifetime<=0) agenten.remove(i);

// Wenn ein Agent auf einen Konturpunkt trifft, wird ein punkt gezeichnet und
// es werden neue Agenten erzeugt

for (int j=0; j<pnts.length; j++) {
if (!agent.blocked && (int)agent.position.x== (int) pnts[j].x && (int)agent.position.y==  (int)pnts[j].y) {
stroke(100, 150, 255, 200);
point(pnts[j].x, pnts[j].y);
fill(100, 150, 255, 60);

for (int r=(int) random (8);r>0;r--) {
agenten.add(new Agent(pnts[j].x, pnts[j].y, agenten.size()));
}

// Damit jeder Punkt nur ein mal "besetzt" wird!
pnts[j].x=-10000;
pnts[j].y=-10000;
agenten.remove(i);
}
}
}
println(agenten.size());
}

// Um den Wucherprozess in Gang zu setzen!
void mousePressed() {
agenten.add(new Agent(mouseX-width/2, mouseY-height*1/12, agenten.size()));
}

class Agent {

// Variablen
PVector position;
PVector direction;
PVector start;
//definiert die Stärke der Richtungsänderung
float spin = 0.40;
int lifetime;
boolean blocked;
float lifetimeinit; // 3. Radius

//der Konstruktor für die Agenten-Klasse
Agent (float theX, float theY, float alifetime) {
start    = new PVector (theX, theY);
position=new PVector(theX, theY);
direction   = new PVector (10, 10);
direction.x = random (-1, 1);
direction.y = random (-1, 1);
lifetimeinit = alifetime;
if ((int)random(60/lifetimeinit)!=0) {
lifetime=(int) random(400, 600);
}
else {
lifetime=(int) random(0, 50);
}
blocked=true;
}

void render() {
stroke(255, 20);
fill(255);

point(position.x, position.y);
lifetime--;

if (((int)start.x != (int) position.x) &&((int)start.y != (int) position.y)) {
blocked=false;
}
}

void move() {

//die Agenten ändern ihre Richting nicht abrupt, sondern immer nur ein wenig!
direction.x += random (-spin, spin);
direction.y += random (-spin, spin);

//for a constant speed
direction.normalize();

// hier kann man die Geschwindigkeit ändern
//direction.mult(map(mouseX,0,width,5,1));

position.add(direction);
}
}

Diese Library erweitert die graphischen Möglichkeiten von Processing (2D). Sie bietet u.a. die Möglichkeit Punkte an der Kontur von Vektorgraphiken zu finden. In der .zip Datei befinden sich viele Beispieldateien mit Kommentaren.

Sehr hilfreich fand ich auch dieses Tutorial: http://freeartbureau.org/blog/2011/09/18/geomerative-tutorial/.

Mit RFont kann man eine Schrift (eine .ttf – Datei muss sich im /data Ordner des Sketches befinden!!!) laden. Diese wird dann mit einem String verknüpft und einer RGroup zugeordnet. Mit RGroup.getPoints() bekommt man dann die Konturpunkte. Ein Nachteil dieser Methode ist, dass es in weiterer Folge schwierig ist, auf einzelne Buchstaben zuzugreifen und diese dynamisch zu ändern.

Beispiel: Punkte an der Schriftkontur

import geomerative.*;

RFont font;
String BspText = "A B";
RPoint[] pnts;

void setup() {
size(400, 200);
smooth();
stroke(255);
background(100);

// Hier wird die Library initialisiert und die zu verwendende
// Schrift erzeugt.
// Achtung: Schrift muss zuerst mit Tools --> Create Font
// erzeugt werden.
RG.init(this);
font = new RFont("FreeSans.ttf", 150, RFont.CENTER);

// Punkte an der Schriftkontur finden

//Abstand der Punkte
RCommand.setSegmentLength (5);
//Modus
RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

//RCommand.setSegmentStep(5);
//RCommand.setSegmentator(RCommand.UNIFORMSTEP);

//RCommand.setSegmentAngle(random(0,HALF_PI));
//RCommand.setSegmentator(RCommand.ADAPTATIVE);

if (BspText.length() > 0) {

// Erzeugen einer neuer Gruppe von Graphiken
RGroup grp;

//Zuordnen des Texts
grp = font.toGroup(BspText);

//Finden der Punkte
pnts = grp.getPoints();
}
}

void draw() {
translate(width/2, height*7/8);
for (int i=0; i<pnts.length; i++) {
//Zeichnen der Punkte
point(pnts[i].x, pnts[i].y);
}
}

Beispiel:   starte Applet

In diesem Beispiel müssen die Positionen einzelner Buchstaben einer Gruppe verändert werden. Deshalb wird hier nicht mit der RGroup – Klasse, sondern mit der RShape – Klasse gearbeitet.

import geomerative.*;

RShape shp, shp1;
RPoint[] pnts, pnts1;

String BspText = "O c c u p y";
String BspText1 = "W A L L ST";

int occupylen, actframe;

void setup() {
size(1480, 800);
strokeWeight(1);
smooth();
fill(120, 50);
background(0);
translate(width/2, height*4/8);

// Hier wird die Library initialisiert und die zu verwendende
// Schrift erzeugt.
// Achtung: Schrift muss zuerst mit Tools --> Create Font
// erzeugt werden.
RG.init(this);

// 2 Shape Objekte werden zugewiesen
shp = RG.getText(BspText, "Ubuntu-R.ttf", width*8/70, CENTER);
shp1 = RG.getText(BspText1, "Ubuntu-R.ttf", width*8/50, CENTER);

// Punkte an der Schriftkontur finden
//Abstand der Punkte
RCommand.setSegmentLength (height/400);
//Modus
RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

// Shape wirde gezeichnet
shp.draw();

// für Abbruch nach einem Durchlauf
pnts = shp.getPoints();
occupylen=pnts.length;

// damit der Text Wall ST wie gewünscht dargestellt wird
shp1.translate(width/20, height*3/8);

//mit children[i] kann man in Shapes immer auf die Buchstaben zugreifen
shp1.children[4].translate(width/5, height/40);
shp1.children[4].scale(0.6, 0.6);
shp1.children[5].translate(width*2/9, height/40);
shp1.children[5].scale(0.6, 0.6);

shp1.draw();

// Hier werden die beiden Shapes zu einer zusammengefügt
shp.addChild(shp1);
pnts = shp.getPoints();
}

void draw() {

translate(width/2, height*4/8);

// damit gleich mit dem Zeichnen begonnen wird
actframe=frameCount+occupylen;

//für Abbruch nach einem Durchlauf der Konturpunkte
if (frameCount<pnts.length) {
for (int j=0; j<pnts.length; j++) {
//Zeichnen der Punkte
if (dist(pnts[actframe%pnts.length].x, pnts[actframe%pnts.length].y, pnts[j].x, pnts[j].y)<random(0, height)
&& dist(pnts[actframe%pnts.length].x, pnts[actframe%pnts.length].y, pnts[j].x, pnts[j].y)>height/30
&&(int)random(height/20)==3) {
stroke(map(dist(pnts[actframe%pnts.length].x, pnts[actframe%pnts.length].y, pnts[j].x, pnts[j].y), height/160, height*3/4, 0, 255),
map(pnts[actframe%pnts.length].x-pnts[j].x, -height/2, height/2, 255, 0),
map(dist(pnts[actframe%pnts.length].x, pnts[actframe%pnts.length].y, pnts[j].x, pnts[j].y), height/160, height*3/4, 255, 0),
map(dist(pnts[actframe%pnts.length].x, pnts[actframe%pnts.length].y, pnts[j].x, pnts[j].y), height/160, height*3/4, 10, 0));
line(pnts[actframe%pnts.length].x+random(-height/160, height/160), pnts[actframe%pnts.length].y+random(-height/160, height/160), pnts[j].x+random(-height/160, height/160), pnts[j].y+random(-height/160, height/160));
}
}
}
}

Sie ändern aber nicht abrupt ihre Richtung, da wir für die Position der Agenten Vektoren verwenden, denen wir in jedem Schritt eine zufällige Abweichung addieren.

In der einfachsten Ausführung des Programms bewegen sie sich aus der Mitte heraus und prallen dann von den Rändern des Animationsfensters zurück. Dabei ist ihre Bewegung nicht gerade, sondern ändern ständig ihre Richtung.

Beispiel: einfache Agenten starte Applet

Agent [] agenten;

void setup() {
size(500, 500);
smooth();
stroke(255);

// hier wird ein Array für 10 Agenten erzeugt
agenten= new Agent[10];

// die Agenten selber werden erzeugt
for (int i=0; i<agenten.length; i++) {
agenten[i]=new Agent(width/2, height/2, 5);
}
}

void draw() {
// für den Spur, die die Agenten hinterlassen
fill(0, 2);
rect(0, 0, width, height);

//alle Agenten müssen die Position ändern
for (int i=0; i<agenten.length; i++) {
//jeder Agent wird gezeichnet
agenten[i].render();
//jeder Agent muß die Position ändern
agenten[i].move();
}
}
class Agent {

// Variablen
PVector position;
PVector direction;
//definiert die Stärke der Richtungsänderung
float spin = 0.20;
float radius; // 3. Radius

//der Konstruktor für die Agenten-Klasse
Agent (float theX, float theY, float aradius) {
position    = new PVector (theX, theY);
direction   = new PVector (10, 10);
direction.x = random (-1, 1);
direction.y = random (-1, 1);
radius = aradius;
}

//eine Methode
void render() {

//einkommentiert ergibt sich hieraus ein schönes Fächer-Muster
//line(position.x, position.y, width/2, height/2);
ellipse(position.x, position.y,5,5);
}

//Methode
void move() {

//die Agenten ändern ihre Richting nicht abrupt, sondern immer nur ein wenig!
direction.x += random (-spin, spin);
direction.y += random (-spin, spin);

//for a constant speed
direction.normalize();

// hier kann man die Geschwindigkeit ändern
direction.mult(1);

position.add(direction);

//damit die Agenten das Bild nicht verlassen
if (position.x < radius || position.x > (width-radius)) {
direction.x *= -1;
}
if (position.y < radius || position.y > (height-radius)) {
direction.y *= -1;
}
}
}

Beispiel: einfache Agenten2 starte Applet

Hier wurde der Code um Farbe und die Linien von jedem Agenten zum Mittelpunkt erweitert.

in setup();

 colorMode(HSB, 360, 100, 100);

im Agenten selbst

 int col;

...

col=(int)random(0, 360);

...

void render() {
if (col<360) {
col+=2;
} else {
col=0;
}

//reuncomment for random color
stroke(col,100,100);

Den kompletten Source-Code findest Du beim Applet!

Beispiel: einfache Agenten3 starte Applet

Hier eine Variante, bei der die Agenten miteinander durch gerade Linien verbunden werden.

Änderung in draw();

 if (i==0) {
line(agenten[i].position.x,
agenten[i].position.y,
agenten[agenten.length-1].position.x,
agenten[agenten.length-1].position.y);
}
else {
line(agenten[i].position.x, agenten[i].position.y,
agenten[i-1].position.x, agenten[i-1].position.y);
} 

Den kompletten Source-Code findest Du beim Applet!

Beispiel: einfache Agenten4 starte Applet

In diesem Beispiel wird die Bewegungsfreiheit der Agenten durch die aktuelle Mausposition in x- und y- Richtung eingeschränkt. Ist der Mauszeiger in der linken oberen Ecke, versammeln sich alle Agenten im Mittelpunkt, ist er in der rechten unteren Ecke, können sie sich (fast) frei bewegen.

Dafür platzieren wir folgende Code-Zeile in setup() und in draw(). Sie bewirkt, dass der Ursprung des Koordinatensystems in die Mitte des Rahmens verschoben wird.

 translate(width/2,height/2); 

Da wir nun vom Mittelpunkt des Rahmens als Nullpunkt ausgehen, können wir mit Hilfe der map()- Funktion die aktuelle Position (x und y) von -width/2 bis +width/2 um die aktuelle Mausposition korrigieren. Das machen wir aus optischen Gründen nun für 2 Ellipsen.

 ellipse(
      map(position.x,-width/2,width/2,-mouseX/2,mouseX/2),
      map(position.y,-height/2,height/2,-mouseY/2,mouseY/2)
      ,4,4);
       fill(100,50,255);
       ellipse(
      map(position.x,-width/2,width/2,-mouseX/2,mouseX/2),

      map(position.y,-height/2,height/2,-mouseY/2,mouseY/2)
      ,3,3);

Weiters wird nun die Grenze, an der die Agenten zurückprallen vom Fensterrahmen auf einen Kreis geändert:

    if (dist(position.x,position.y,0,0)>width/2) {
          direction.x *= -1;
          direction.y *= -1;

    }

Den kompletten Source-Code findest Du beim Applet!

Beispiel: einfache Agenten5 starte Applet

In diesem Beispiel arbeiten wir wieder im Color-Mode HSB.

colorMode(HSB, 360, 100, 100);

Außerdem erhält hier jeder Agent einen Index und ein Array mit den Indizes von 3 seiner nächsten Nachbarn. Damit kann man über 4 Punkte eine Kurve (curve() ) zeichnen und die Agenten damit dann Verbinden.

Variablendefinition in der Agenten-Klasse:

int [] neighbours = new int [4];
  int index;

Im Konstruktor des Agenten:

Start-Farbpunkt für jeden Agenten, damit alle gemeinsam das gesamte Spektrum abdecken.

 col=index*(360/agenten.length); 

Jeder Agent muss, wenn er erzeugt wird seine Nachbarn finden. Das macht er hiermit:

 for (int i=0;i<4;i++) {
      if (index+i>agenten.length-1) {
        neighbours[i]= index+i-agenten.length;
      }else {
      neighbours[i]= index+i;
      } 

In der Methode render des Agenten wird nun nichts mehr gezeichnet. Wir nutzen sie aber für die Veränderung der Farbwerte:

 if (col<360) {
      col+=2;
    } else {
      col=0;
    } 

Wir zeichnen die Kurve nun in draw():

curve(
      map(agenten[agenten[i].neighbours[0]].position.x,-width/2,width/2,-mouseX/2,mouseX/2),
      map(agenten[agenten[i].neighbours[0]].position.y,-height/2,height/2,-mouseY/2,mouseY/2),
      map(agenten[agenten[i].neighbours[1]].position.x,-width/2,width/2,-mouseX/2,mouseX/2),
      map(agenten[agenten[i].neighbours[1]].position.y,-height/2,height/2,-mouseY/2,mouseY/2),
      map(agenten[agenten[i].neighbours[2]].position.x,-width/2,width/2,-mouseX/2,mouseX/2),
      map(agenten[agenten[i].neighbours[2]].position.y,-height/2,height/2,-mouseY/2,mouseY/2),
      map(agenten[agenten[i].neighbours[3]].position.x,-width/2,width/2,-mouseX/2,mouseX/2),
      map(agenten[agenten[i].neighbours[3]].position.y,-height/2,height/2,-mouseY/2,mouseY/2)); 

Den kompletten Source-Code findest Du beim Applet!

Beispiel: einfache Agenten6 starte Applet

Hier bekommt jeder Agent einen Startpunkt zugeordnet. In diesem Fall bilden alle Agenten gemeinsam einen Kreis. Damit jeder Agent wieder in seinen Ursprung zurückkehren kann, muss er sich seine Startposition merken. Das tut er in der PVector Variablen start.

 PVector start; 

Auch der Konstruktor der Agenten wird angepasst. Die Koordinaten, die beim Erzeugen des Agenten übertragen werden, werden in der Variable start gespeichert und die Variable position wird mit den Koordinaten 0,0 gefüllt.

 //der Konstruktor für die Agenten-Klasse
 Agent (float theX, float theY, float aradius) {
 start = new PVector (theX, theY);
 position=new PVector(0,0);
 direction = new PVector (10, 10);
 direction.x = random (-1, 1);
 direction.y = random (-1, 1);
 radius = aradius;
 }
 

Beim Zeichnen der Agenten wird nun das Koordinatensystem auf die jeweilige Startposition verschoben. Und von dort ausgehend seine Position gezeichnet.

 pushMatrix();
    translate(start.x,start.y);
      ....
  popMatrix();

Mit den folgenden Zeilen legen wir die Startpositionen der Agenten fest. Sie ordnen sich kreisförmig um dem Mittelpunkt an.

 for (int i=0; i<agenten.length; i++) {
 float x,y;
 x= width/2+(cos(map(i,0,agenten.length,0,TWO_PI))*width/4);
 y= height/2+(sin(map(i,0,agenten.length,0,TWO_PI))*height/4);
 agenten[i]=new Agent(x,y, 5);
 }
 

Den kompletten Source-Code findest Du beim Applet!

Konkret wird der Unterschied in der x-Positionen von Objekt und Mauszeiger errechnet (dx). Wenn dieser Wert größer ist als 1, dann wird ein neuer Wert für die Objektposition berechnet (x+= dx*easing;).

Beispiel: eindimensionales Easing starte Applet

float x = 0.0; //aktuelle x-Position des Objekts
float easing = 0.05; //Stärke der Dämpfung

void setup() {
smooth();
size(500, 100);
}

void draw () {
background(0);
float targetX = mouseX;
// Unterschied der x-Position von Objekt und Mauszeiger
float dx = targetX -x;
//abs gibt den ansoluten Wert einer Zahl aus
if (abs(dx) >1.0) {
x+= dx*easing;
}
ellipse(mouseX, 30, 40, 40);
ellipse(x, 30, 40, 40);
} 

Aufgabe: Erweitere das obige Programm so, dass auch eine Bewegung der Objekte in Y-Richtung möglich ist. starte Applet

Sowohl beim Lesen, als auch beim Schreiben ist der Standard-Ordner der Ordner /data im Sketchbook-Verzeichnis. D.h. dort ist eine Datei zu platzieren, wenn man sie einlesen möchte.

Beispiel: Einlesen einer Textdatei

Damit das Beispiel funktioniert, muss eine Textdatei mit dem Namen „Textdatei.txt“ im /data Ordner des Projekts erstellt werden!!!

String[] zeilen; //String-Array

void setup() {
// hier wird der Inhalt der Textdatei in das String-Array
// zeilen eingelesen.
// jede Zeile als eignener String
zeilen = loadStrings("Textdatei.txt");
noLoop(); // damit draw() nur ein mal ausgeführt wird
}

void draw() {
println(zeilen);
}

Beispiel: Textdatei schreiben

Funktioniert auch nur mit einer Datei „Textdatei.txt“ im /data Ordner des Projekts.

String[] zeilen; //String-Array

void setup() {
// hier wird der Inhalt der Textdatei in das String-Array
// zeilen eingelesen.
// jede Zeile als eignener String

zeilen = loadStrings("Textdatei.txt");
noLoop(); // damit draw() nur ein mal ausgeführt wird
}

void draw() {
println(zeilen);
// schreibt den Inhalt von "zeilen" in eine Datei mit
// dem Namen "neueDatei.txt"
saveStrings("neueDatei.txt", zeilen);
}

• Video
• Network
• DXF Export
• Java Skript
• Minim Audio
• OpenGL
• OpenGL2
• PDF Export
• Serial I/O

Darüber hinaus gibt es noch eine ganze Menge sog. User-Libraries, die frei genutzt werden können, in Punkto Stabilität aber  nicht immer mit den Core- Libraries mithalten können.

Eine gute Übersicht findet man hier auf der offiziellen Processing-Seite.

Um eine Library in Processing zu verwenden muss sie immer separat mit der import- Anweisung in den Sketch eingebunden werden. Außerdem gibt in der Processing IDE auch die Möglichkeit das im Menü unter Sketch –> import Library –> zu erledigen.

import processing.pdf.*;

Mit der folgenden Funktion kann man seinen Code auch als Java Application laufen lassen.

public static void main(String args[]) {
PApplet.main(new String[] { "--present", "NAMEDERKLASSE" });
}

Da Processing von PApplet abgeleitet wird, muss jede Klasse neue “ extends PApplet“ enthalten, damit alle Processing – Objekte auch innerhalb der neuen Klasse funktionieren.

Will man aber separate  Klassen erzeugen, die von einer Processing Anwendung aus benutzbar sind, haben wir das Problem, dass sich die Processing eigenen Anweisungen, wie z.B. rect() u.a. nicht verwenden lassen. Dieses Problem kann man lösen, in dem man der Klasse sagt, dass sie auf dem PApplet zeichnen soll.

Details darüber findet man hier: http://www.learningprocessing.com/tutorials/processing-in-eclipse/

Eine andere sehr gute Anleitung gibt es hier: http://creativecoding.org/en/beyond/p5/eclipse_as_editor