Der ganzen voll gestopften Design Portfolios überdrüssig, hab ich für die neue Duix Webseite (www.duix.org) nur eine kleine Visitenkarte kreiert. Im Sinne von weniger ist mehr, finde ich das mehr als ausreichend. Was meine Processing Leidenschaft angeht, die ist etwas eingeschlafen. Nichtdestotrotz werd ich den Blog mal aufrecht erhalten, vielleicht finde ich ja nochmal in die Materie zurück :)
Grüße
Chris aka Duix
Hier nochmal meine Grafik zu der letzten Übung. Nicht schön aber selten ;-)
size (400, 400); background (255); smooth (); // ------ HEAD ---- fill (222, 111, 7); stroke (216, 102, 18); smooth (); ellipseMode (CENTER); ellipse (197, 210, 180, 150); fill (238, 116, 26); stroke (216, 102, 18); smooth (); ellipseMode (CENTER); ellipse (200, 210, 180, 150); fill (255); noStroke(); triangle (150, 120, 200, 120, 190, 140); fill (34, 95, 9); noStroke(); quad (180, 90, 190, 85, 198, 140, 180, 140); noStroke(); fill (238, 116, 26); ellipseMode (CENTER); ellipse (175, 154, 45, 30); fill (238, 116, 26); noStroke(); ellipseMode (CENTER); ellipse (200, 150, 25, 30); // ------ GRIN ---- fill (255, 170, 71); noStroke (); smooth (); ellipseMode (CENTER); ellipse (197, 233, 140, 70); fill (54, 33, 0); noStroke (); smooth (); ellipseMode (CENTER); ellipse (197, 230, 140, 70); fill (238, 116, 26); noStroke (); smooth (); ellipseMode (CENTER); ellipse (197, 204, 160, 75); fill (238, 116, 26); noStroke (); smooth (); triangle (165, 237, 167, 250, 188, 240); fill (238, 116, 26); noStroke (); smooth (); triangle (190, 238, 187, 250, 175, 240); fill (238, 116, 26); noStroke (); smooth (); triangle (130, 224, 137, 240, 155, 230); fill (238, 116, 26); noStroke (); smooth (); triangle (145, 234, 147, 245, 175, 230); fill (238, 116, 26); noStroke (); smooth (); triangle (188, 234, 197, 255, 210, 230); fill (238, 116, 26); noStroke (); smooth (); triangle (202, 234, 210, 250, 240, 230); fill (238, 116, 26); noStroke (); smooth (); triangle (220, 234, 240, 245, 240, 230); fill (238, 116, 26); noStroke (); smooth (); triangle (240, 234, 255, 245, 260, 220); // ------ EYES ---- fill (255, 170, 71); noStroke(); triangle (170, 160, 149, 185, 180, 190); fill (54, 33, 0); noStroke(); triangle (170, 160, 155, 183, 180, 188); fill (255, 170, 71); noStroke(); triangle (210, 160, 199, 192, 230, 190); fill (54, 33, 0); noStroke(); triangle (210, 160, 199, 190, 225, 187); // ------ NOSE ---- fill (255, 170, 71); noStroke(); quad (185, 210, 195, 210, 198, 229, 178, 229); fill (54, 33, 0); noStroke(); quad (185, 207, 195, 207, 195, 227, 180, 227);
Weiter gehs im Buch mit den Eigenschaften der Shapes. Diese sollte man vor den Koordinaten setzen, ala “zeichne ein graues Rechteck auf weißem Hintergrund und rahme dieses mit einer Border ein…”. Klingt logisch ;-)
/*--------- EIGENSCHAFTEN ANFANG -----*/
background(255); // Hintergundfarbe Fenster
stroke(0); // Outline schwarz
fill(150); // Shap füllen Grauton
/*--------- EIGENSCHAFTEN ENDE -----*/
rectMode(CENTER); // zentrierter Modus
rect(50,50,50,50); // Shape
Hier noch ein anderes Beispiel:
background(255);
stroke(0);
noFill();
ellipse(60,60,100,100);
Wichtig ist wie geseagt die EIgenschaften voran zu setzen, so kann man dann auch unterschiedliche Elemente jeweils nacheinander mit Eigenschaften versehen:
background(150);
stroke(0);
line(0,0,100,100);
stroke(255);
noFill();
rect(25,25,50,50);
fill(216, 176, 3);
rectMode(CENTER);
noStroke();
rect(50,50,30,30);
stroke(0);
line(35,50,64,50);
ÜBUNG
Probiere folgende Grafik zu coden:
Nun wird im Buch nochmal der RGB Farbmodus erläutert, das überspringen wir mal dezent. Ich denke es sollte nun klar sein, dass man RGB Modus verwenden kann. Zudem kann man auch Heaxacode verwenden bzw. hat im Programm selbst unter “Tools” auch einen Color-Selector. Alpha Kanal /Transparenz
Um Transparenz zu erreichen kann man noch einen Parameter hinzunehmen, man stellt einfach den Alpha Wert (0-255) im Farbcode vorne ran. Also fill (Alpha, R, G, B);
Hierzu ein Beispiel:
background (0);
noStroke ();
fill (255, 0, 0, 255);
rect (0, 0, 100, 10);
fill (235, 0, 0, 255);
rect (0, 10, 100, 10);
fill (215, 0, 0, 255);
rect (0, 20, 100, 10);
fill (195, 0, 0, 255);
rect (0, 30, 100, 10);
fill (175, 0, 0, 255);
rect (0, 40, 100, 10);
fill (155, 0, 0, 255);
rect (0, 50, 100, 10);
fill (135, 0, 0, 255);
rect (0, 60, 100, 10);
fill (115, 0, 0, 255);
rect (0, 70, 100, 10);
fill (95, 0, 0, 255);
rect (0, 80, 100, 10);
fill (75, 0, 0, 255);
rect (0, 90, 100, 10);
fill (55, 0, 0, 255);
rect (0, 100, 100, 10);
Eine weitere Option ist colorMode( ), hierbei setzt man eine farblichen Rahmen von - bis z.B. bei prozentualen Angeben sehr nützlich.So kann man sagen: colorMode(RGB,100,500,10,255); Also Rot soll von 0-100, Grün von 0-500, Blau von 0-10 und Alpha von 0-255 gesetzt werden.
Genauso kann man auch in HSB Farben angeben.
Hue —The color type, ranges from 0 to 360 by default (think of 360° on a color “ wheel ” ).
Saturation —The vibrancy of the color, 0 to 100 by default.
Brightness —The, well, brightness of the color, 0 to 100 by default. ÜBUNG
Designe eine Kreatur mit allen bisher genannten Shapes (point, line, rect, ellipse etc.) am besten vllt vorher maln scribble machen. Ich werds auch gleich mal probieren und reich das Ergebnis dann nach ;-)
So, eine Anfrage is reingekommen, ich werd mal eben was arbeiten gehen…
so long…
Also nach diversen Buchkritiken hab ich mich entschieden mit “Learning Processing” anzufangen. Die ersten Seiten werden dezent vernachlässigt, warum und wieso es Sinn macht sich mit Processing zu beschäftigen ist mir durchaus bewusst ;-)
Tool Installiert (Download), auf gehts.
Im ersten Chapter gehts also zunächst um folgendes:
– Specifying pixel coordinates.
– Basic shapes: point, line, rectangle, ellipse.
– Color: grayscale, “ RGB. ”
– Color transparency.
Hatte ich zwar die Tage schon woanders überflogen, auch alles recht einleuchtend. Trotzdem nehmen wir das hier mal nochmal mit, der Ordnung wegen. Nicht wundern wenn ich ab und an in einen Tutoren-Ton verfalle, dient dann eher meinem eigenen Selbstverständnis um die Materie zu verinnerlichen. Da ich dazu neige alles was zu einfach erscheint zu überspringen, was wenns ums Coding geht sich hinten raus in der Vergangenheit oft als Nachteil erwiesen hat… Das Koordinatensystem als Grundlage
Möchte ich gar nicht so intensiv drauf eingehen, kann man hier sehr schön nachlesen. Im Grunde genommen hatte das jeder schon mal im Abi vor Augen.
Oben Links ist unser totaler Nullpunkt, von dort aus wird jede Koordinate festgelegt mit der wir arbeiten. Punkt, Line, Ellipse, Dreieck, Rechteck, Kreis
Auch das findet man auf der Seite von Creative Coding sehr schön erklärt.
size (500, 100); // Fenstergröße
smooth(); // Kanten glätten
point (15, 10); // point (x, y)
line (15, 25, 100, 25); // line (start x, start y, ende x, ende y)
rect (15, 40, 85, 40); // rect (x, y, width, height)
ellipse (200, 50, 40, 55); // ellipse (x, y, width, height)
triangle (160, 25, 110, 65, 160, 85); // triangle (x1, y1, x2, y2, x3, y3)
quad (250, 25, 350, 15, 310, 85, 260, 85); // quad(x1, y1, x2, y2, x3, y3, x4, y4)
Ich denke das ist alles sehr verständlich. Man fragte mich gerade warum ich das nochmal niederschreibe und zusammen puzzle, obwohls doch schon auf processing.org und CC so gut erklärt ist. Mir fällts einfach leichter etwas zu lernen, wenn ich es aufschreibe und erst wenn ich es jemandem ohne nachschlagen zu müssen erklären (oder eben schreiben) kann, hab ichs auch wirklich verinnerlicht.
Im Buch werden jetzt noch zwei weitere Varianten erwähnt wie man ein Objekt ausrichten kann.Wir wissen jetzt normal geht man bei einem Rechteck von der linken oberen Ecke ( Das ist der Default Mode CORNERS, nicht zu verwechseln mit CORNER) als Nullpunkt aus und gibt bei einem Rechteck eben (x, y, width, height) an. Die zwei anderen Modes sind CENTER und CORNER. Wenn man diese verwendet stellt man im Code den Mode der Koordinate eine Zeile voran:
rectMode (CENTER);
rect (40,40,30,30); // rect (Mittelpunkt x, Mittelpunkt y, width, height)
Hierbei werden x,y automatisch als Mittelpunkt des Rechtecks ausgerichtet.
oder eben
rectMode (CORNERS);
rect (50, 50, 80, 70); // rect (top left x, top left y, bottom right x, bottom right y)
Ich weiss zwar noch nicht genau wofür das gut ist, aber es schad ja nicht das schon mal gehört zu haben. Bei der Ellipse ist nun der Default Mode CENTER, da sich die Ellipse ja von der Mitte aus zeichnet. Also einfach mal ellipseMode (CORNER); und ellipseMode (CORNERS) ausprobieren, damit mans mal gesehen hat was bei rauskommt. ÜBUNG
Nimm dir ein kariertes Blatt und kritzel folgende Objekte hinein bevor du diese dann im Tool codest und überprüfst ob du es verstanden hast:
line(0,0,9,6);
point(0,2);
point(0,4);
rectMode(CORNER);
rect(5,0,4,3);
ellipseMode(CENTER);
ellipse(3,7,4,4);
Nach der Übung hab ich einfach mal etwas rumprobiert, paar Körper gemacht ineinander gebastelt etc., um ein Gefühl fürs Koordinatensystem zu bekommen.
Soviel dazu… Ich springe erstmal kurz in Photoshop, brauch mal etwas Farbe auf der Netzhaut ;-)
So long…
Seit Montag bin ich Gasthörer an der FHP (University of applied science Potsdam)
und nehme am Kurs “Basics Interfacedesign” teil. Schon seit geraumer Zeit hatte ich mir vorgenommen mich mal intensiv mit der Programmiersprache “Processing” zu befassen.
Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production. (Source)
Letzte Woche hab ich mir erstmal einen Überblick über die Literatur verschafft die es dazu gibt. Ich hoffe einfach mal, dass ich mir die besten rausgepickt habe, die ich teils querlesen, teils intensiv durcharbeiten möchte. Ich hab mir also folgende Werke besorgt:
Hier einige Beispiele die mittels Processing entwickelt wurden:
Auch im Auge behalten sollte man den FHP Vimeo Channel (Link).
Ich denke die sollten erstmal reichen. neben Multi-Touch, Interaction und Visualialisierungs- Projekten gibts auch noch einiges was Richtung physical computing geht wie z.B. Arduino.
Aber eins nach dem anderen ;-) Ich werde mich also erstmal weiter in die Grundlagen einlesen, mein Verständnis für Kontrollstrukturen auffrischen und dann den Blog hier updaten. Der Blog soll in erster Linie für mich als Dokumentation dienen, wenn es dem einen oder anderen natürlich auch was nutzt, umso besser ;-). Wer mag, darf gerne Hinweise, Tipps, Bugs oder Anmerkungen zuschreiben oder die Posts kommentieren. Weitere interessante Projekte und Links sind auch gerne gesehen.
Grüße aus Potsdam
Chris
