4. November 2011
Im Graphic Design Basics Kurs mit Jürgen haben wir verschiedene Zeichen und Zeichentransformationen erstellt, die es nun in Processing umzusetzen gilt. Ich bin wieder gleich wie im Illustrator vorgegangen und habe mir zuerst die grundlegenden Formen zurechtgelegt. Dies habe ich gemacht, in dem ich die einzelnen Formen in Funktionen verpackt habe (können später in eine Klasse umgewandelt werden). Als Hilfsmittel lasse ich die Mausposition und die grundlegenden Formen auf dem Bildschirm anzeigen und mit 's' kann man Screenshots erstellen. Als nächstes habe ich mir drei Transformationen aus dem Illustrator ausgesucht, die ich im Processing weiterverarbeiten wollte. Ich habe zuerst bei allen die Form, die zuunterst liegt, gezeichnet und dann die erste Form konstruiert und für alle 7 Schritte kopiert. Jetzt erst kann ich mit den Transformationen beginnen.
Jede der Formen entspricht einer Funktion
Erste Schritte hin zur Transformation. Als Hilfsmittel werden Mausposition und die Grundformen angezeigt.
Arbeitsweise: Illustrator im Hintergrund, Processing im Vordergrund
Stand um 17:00 Uhr. Endlich habe ich die verschiedenen Formen auf dem Bildschirm, bereit für die Transformation.
/* --------------------------------------------------------------------------
* Zeichentransformationen
* --------------------------------------------------------------------------
* prog: Beni Achermann
* date: 04/11/2011
* ----------------------------------------------------------------------------
*/
// Variable Definitions
int yPosTrans1 = 20;
int yPosTrans2 = 200;
int yPosTrans3 = 320;
int xPosStep1 = 65;
int xPosStep2 = 65+110;
int xPosStep3 = 65+220;
int xPosStep4 = 65+330;
int xPosStep5 = 65+440;
int xPosStep6 = 65+550;
int xPosStep7 = 65+660;
int formSize = 90; // all forms have a common size
void setup()
{
size(800,600);
ellipseMode(CENTER);
rectMode(CENTER);
//shapeMode(CENTER);
smooth();
}
void draw ()
{
background(128);
// Transformation I
// Bedeutung der verschiedenen Parameter von 1 - 5
// Über die Parameter können die Formen verschoben, skaliert und rotiert werden und bei Outline-Formen kann die Dicke der Outline bestimmt werden
// int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue (nur bei Outlineformen)
// Transformation I - Dreiecke
// Step 1
triangleFilledBlack(xPosStep1-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep1+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep1+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep1+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep1+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep1+4*5-formSize/2,45,0.5,0.0);
// Step 2
triangleFilledBlack(xPosStep2-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep2+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep2+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep2+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep2+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep2+4*5-formSize/2,45,0.5,0.0);
// Step 3
triangleFilledBlack(xPosStep3-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep3+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep3+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep3+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep3+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep3+4*5-formSize/2,45,0.5,0.0);
// Step 4
triangleFilledBlack(xPosStep4-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep4+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep4+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep4+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep4+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep4+4*5-formSize/2,45,0.5,0.0);
// Step 5
triangleFilledBlack(xPosStep5-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep5+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep5+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep5+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep5+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep5+4*5-formSize/2,45,0.5,0.0);
// Step 6
triangleFilledBlack(xPosStep6-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep6+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep6+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep6+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep6+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep6+4*5-formSize/2,45,0.5,0.0);
// Step 7
triangleFilledBlack(xPosStep7-formSize/2,yPosTrans1,1.0,0.0);
triangleFilledWhite(xPosStep7+4-formSize/2,25,0.9,0.0);
triangleFilledBlack(xPosStep7+4*2-formSize/2,30,0.8,0.0);
triangleFilledWhite(xPosStep7+4*3-formSize/2,35,0.7,0.0);
triangleFilledBlack(xPosStep7+4*4-formSize/2,40,0.6,0.0);
triangleFilledWhite(xPosStep7+4*5-formSize/2,45,0.5,0.0);
// Transformation II - Kreise
// schwarzer Hintergrund
pushStyle();
fill(0);
noStroke();
rect(400,200,800,120);
popStyle();
// Step 1
circleFilledWhite(xPosStep1,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep1+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep1+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep1,yPosTrans2,1.0/3,0.0);
// Step 2
circleFilledWhite(xPosStep2,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep2+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep2+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep2,yPosTrans2,1.0/3,0.0);
// Step 3
circleFilledWhite(xPosStep3,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep3+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep3+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep3,yPosTrans2,1.0/3,0.0);
// Step 4
circleFilledWhite(xPosStep4,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep4+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep4+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep4,yPosTrans2,1.0/3,0.0);
// Step 5
circleFilledWhite(xPosStep5,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep5+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep5+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep5,yPosTrans2,1.0/3,0.0);
// Step 6
circleFilledWhite(xPosStep6,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep6+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep6+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep6,yPosTrans2,1.0/3,0.0);
// Step 7
circleFilledWhite(xPosStep7,yPosTrans2,1.0,0.0);
circleFilledBlack(xPosStep7+formSize/2,yPosTrans2,1.0,0.0);
circleFilledWhite(xPosStep7+10,yPosTrans2,1.0/3,0.0);
circleFilledBlack(xPosStep7,yPosTrans2,1.0/3,0.0);
// Transformation III - Quadrate
// Step 1
squareFilledBlack(xPosStep1,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep1+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep1,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep1-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep1,yPosTrans3-formSize/3,1.0/3,0.0);
// Step 2
squareFilledBlack(xPosStep2,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep2+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep2,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep2-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep2,yPosTrans3-formSize/3,1.0/3,0.0);
// Step 3
squareFilledBlack(xPosStep3,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep3+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep3,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep3-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep3,yPosTrans3-formSize/3,1.0/3,0.0);
// Step 4
squareFilledBlack(xPosStep4,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep4+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep4,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep4-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep4,yPosTrans3-formSize/3,1.0/3,0.0);
// Step 5
squareFilledBlack(xPosStep5,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep5+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep5,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep5-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep5,yPosTrans3-formSize/3,1.0/3,0.0);
// Step 6
squareFilledBlack(xPosStep6,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep6+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep6,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep6-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep6,yPosTrans3-formSize/3,1.0/3,0.0);
// Step 7
squareFilledBlack(xPosStep7,yPosTrans3,1.0,0.0);
squareFilledWhite(xPosStep7+formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep7,yPosTrans3+formSize/3,1.0/3,0.0);
squareFilledWhite(xPosStep7-formSize/3,yPosTrans3,1.0/3,0.0);
squareFilledWhite(xPosStep7,yPosTrans3-formSize/3,1.0/3,0.0);
// Displays the basic shapes on screen
squareFilledWhite(40,480,0.3,0.0);
squareFilledBlack(100,480,0.3,0.0);
squareOutlineWhite(160,480,0.3,0.0,2);
squareOutlineBlack(220,480,0.3,0.0,2);
circleFilledWhite(40,520,0.3,0.0);
circleFilledBlack(100,520,0.3,0.0);
circleOutlineWhite(160,520,0.3,0.0,2);
circleOutlineBlack(220,520,0.3,0.0,2);
triangleFilledWhite(25,540,0.3,0.0);
triangleFilledBlack(85,540,0.3,0.0);
triangleOutlineWhite(145,540,0.3,0.0,2);
triangleOutlineBlack(205,540,0.3,0.0,2);
// Display mouse position on screen
pushStyle();
fill(0);
text("Mouse X: " + mouseX,700,520);
text("Mouse Y: " + mouseY,700,540);
popStyle();
}
// SQUARES
void squareFilledWhite (int translateX, int translateY, float scaleValue, float rotateValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
fill(255);
noStroke();
rect(0,0,90,90);
popMatrix();
}
void squareFilledBlack (int translateX, int translateY, float scaleValue, float rotateValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
fill(0);
noStroke();
rect(0,0,90,90);
popMatrix();
}
void squareOutlineWhite (int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
noFill();
stroke(255);
strokeWeight(strokeWeightValue);
rect(0,0,90,90);
popMatrix();
}
void squareOutlineBlack (int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
noFill();
stroke(0);
strokeWeight(strokeWeightValue);
rect(0,0,90,90);
popMatrix();
}
// TRIANGLES
void triangleFilledWhite (int translateX, int translateY, float scaleValue, float rotateValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
fill(255);
noStroke();
triangle(0, formSize, 45, 0, formSize, formSize);
popMatrix();
}
void triangleFilledBlack (int translateX, int translateY, float scaleValue, float rotateValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
fill(0);
noStroke();
triangle(0, formSize, 45, 0, formSize, formSize);
popMatrix();
}
void triangleOutlineWhite (int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
noFill();
stroke(255);
strokeWeight(strokeWeightValue);
triangle(0, formSize, formSize/2, 0, formSize, formSize);
popMatrix();
}
void triangleOutlineBlack (int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
noFill();
stroke(0);
strokeWeight(strokeWeightValue);
triangle(0, formSize, formSize/2, 0, formSize, formSize);
popMatrix();
}
// CIRCLES
void circleFilledWhite (int translateX, int translateY, float scaleValue, float rotateValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
fill(255);
noStroke();
ellipse(0,0,formSize,formSize);
popMatrix();
}
void circleFilledBlack (int translateX, int translateY, float scaleValue, float rotateValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
fill(0);
noStroke();
ellipse(0,0,formSize,formSize);
popMatrix();
}
void circleOutlineWhite (int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
noFill();
stroke(255);
strokeWeight(strokeWeightValue);
ellipse(0,0,formSize,formSize);
popMatrix();
}
void circleOutlineBlack (int translateX, int translateY, float scaleValue, float rotateValue, int strokeWeightValue)
{
pushMatrix();
translate(translateX,translateY);
scale(scaleValue);
rotate(rotateValue);
noFill();
stroke(0);
strokeWeight(strokeWeightValue);
ellipse(0,0,formSize,formSize);
popMatrix();
}
// Key Functions for screenshot
void keyPressed()
{
switch(key)
{
case 's':
saveFrame("screenshot-##.png"); // Speichern eines Screenshots auf Druck von S
println("Saved screenshot-##.png");
break;
}
}
