8 ο Εργαστήριο Ευθυγράμμιση σε πλέγμα Στο παρακάτω παράδειγμα το ο καμβάς χωρίζεται σε τετράγωνα. Σε κάθε τετράγωνο σχεδιάζεται μια διαγώνιος είτε από την πάνω-αριστερή στην κάτω-δεξιά γωνία είτε από την κάτω-αριστερή στην πάνω-δεξιά γωνία. Η κατεύθυνση της διαγωνίου επιλέγεται με τυχαίο τρόπο. P_2_1_1_01.pde Generative Gestaltung, ISBN: 978-3-87439-759-9 First Edition, Hermann Schmidt, Mainz, 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni http:www.generative-gestaltung.de Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http:www.apache.org/licenses/license-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. / changing strokeweight and strokecaps on diagonals in a grid MOUSE position x : left diagonal strokeweight position y : right diagonal strokeweight left click : new random layout KEYS 1 : round strokecap 2 : square strokecap 3 : project strokecap s : save png / int tilecount = 20; Η τιμή της tilecount καθορίζει το μέγεθος των τετραγώνων int actrandomseed = 0; int actstrokecap = ROUND; void setup() { size(600, 600); void draw() { background(255); 1
smooth(); nofill(); Η strokecap καθορίζει το σχέδιο των άκρων μιας γραμμής. Μπορεί να πάρει ως τιμή ROUND, SQUARE, PROJECT. strokecap(actstrokecap); randomseed(actrandomseed); for (int gridy=0; gridy<tilecount; gridy++) { for (int gridx=0; gridx<tilecount; gridx++) { Υπολογισμός των συντεταγμένων του πάνω-αριστερά σημείου κάθε τετραγώνου με βάση την τιμή της tilecount int posx = width/tilecountgridx; int posy = height/tilecountgridy; Οι τυχαίοι αριθμοί που παράγονται από την random 0.000 έως 1.999 μετατρέπονται σε ακέραιους αριθμούς. Δηλαδή η toggle θα έχει τιμή 0 ή 1 int toggle = (int) random(0,2); Η τιμή της toggle καθορίζει την κατεύθυνση της διαγωνίθου που θα σχεδιαστεί. mousex και mousey έχει την θέση του δείκτη του ποντικιού και καθορίζει το πάχος της γραμμής if (toggle == 0) { strokeweight(mousex/20); line(posx, posy, posx+width/tilecount, posy+height/tilecount); if (toggle == 1) { strokeweight(mousey/20); line(posx, posy+width/tilecount, posx+height/tilecount, posy); Με κλικ ποντικιού αλλάζει η τιμή για την παραγωγή τυχαίων αριθμών Αυτό έχει σαν αποτέλεσμα να αλλάζει ο σχεδιασμός των αριστερών και δεξιών διαγωνίων void mousepressed() { actrandomseed = (int) random(100000); Με το πλήκτρο s ή S αποθηκεύουμε εικόνα Με τα πλήκτρα 1,2,3 αλλάζουμε το τελείωμα της γραμμής void keyreleased(){ if (key == s key == S ) saveframe("p_2_1_1_01"+"_##.png"); if (key == 1 ){ actstrokecap = ROUND; if (key == 2 ){ actstrokecap = SQUARE; if (key == 3 ){ actstrokecap = PROJECT; 2
Στο επόμενο παράδειγμα έχει προστεθεί η λειτουργία αλλαγής χρωμάτων με 4 έως 7. P_2_1_1_02.pde Generative Gestaltung, ISBN: 978-3-87439-759-9 First Edition, Hermann Schmidt, Mainz, 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni http:www.generative-gestaltung.de Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http:www.apache.org/licenses/license-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. / changing strokeweight on diagonals in a grid with colors MOUSE position x : left diagonal strokeweight position y : right diagonal strokeweight left click : new random layout KEYS s : save png 1 : round strokecap 2 : square strokecap 3 : project strokecap 4 : color left diagonal 5 : color right diagonal 6 : transparency left diagonal 7 : transparency right diagonal 0 : default / int tilecount = 20; Αρχική τιμή χρωμάτων αριστερής και δεξιάς διαγωνίου color colorleft = color(197, 0, 123); color colorright = color(87, 35, 129); Αρχική τιμή αδιαφάνειας αριστερής και δεξιάς διαγωνίου int alphaleft = 100; int alpharight = 100; int actrandomseed = 0; int actstrokecap = ROUND; void setup() { size(600, 600); 3
void draw() { Αλλαγή χρωματικού μοντέλου σε HSB και ορισμός μέγιστων τιμών για κάθε παράμετρο colormode(hsb, 360, 100, 100, 100); background(360); smooth(); nofill(); strokecap(actstrokecap); randomseed(actrandomseed); for (int gridy=0; gridy<tilecount; gridy++) { for (int gridx=0; gridx<tilecount; gridx++) { int posx = width/tilecountgridx; int posy = height/tilecountgridy; int toggle = (int) random(0,2); if (toggle == 0) { stroke(colorleft, alphaleft); Ορισμός χρώματος strokeweight(mousex/10); line(posx, posy, posx+width/tilecount, posy+height/tilecount); if (toggle == 1) { stroke(colorright, alpharight); Ορισμός χρώματος strokeweight(mousey/10); line(posx, posy+width/tilecount, posx+height/tilecount, posy); void mousepressed() { actrandomseed = (int) random(100000); void keyreleased(){ if (key == 's' key == 'S') saveframe("p_2_1_1_02"+"_##.png"); if (key == '1') actstrokecap = ROUND; if (key == '2') actstrokecap = SQUARE; if (key == '3') actstrokecap = PROJECT; Εναλλαγή χρωμάτων και αδιαφάνειας ανάλογα με το πλήκτρο που πατήθηκε if (key == '4'){ if (colorleft == color(0)) { colorleft = color(323, 100, 77); else { colorleft = color(0); if (key == '5'){ if (colorright == color(0)) { colorright = color(273, 73, 51); 4
else { colorright = color(0); if (key == '6') { if (alphaleft == 100) { alphaleft = 50; else { alphaleft = 100; if (key == '7') { if (alpharight == 100) { alpharight = 50; else { alpharight = 100; if (key == '0'){ actstrokecap = ROUND; colorleft = color(0); colorright = color(0); alphaleft = 100; alpharight = 100; Τροποποίηση του παραδείγματος ώστε το μέγεθος των τετραγώνων να αλλάζει με την κίνηση του ποντικιού. P_2_1_1_03.pde Generative Gestaltung, ISBN: 978-3-87439-759-9 First Edition, Hermann Schmidt, Mainz, 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni http:www.generative-gestaltung.de Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http:www.apache.org/licenses/license-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. / changing number, color and strokeweight on diagonals in a grid MOUSE position x : diagonal strokeweight position y : number diagonals left click : new random layout KEYS 5
s : save png 1 : color left diagonal 2 : color right diagonal 3 : switch transparency left diagonal on/off 4 : switch transparency right diagonal on/off 0 : default / color colorback = color(255); color colorleft = color(0); color colorright = color(0); float tilecount = 1; boolean transparentleft = false; boolean transparentright = false; float alphaleft = 100; float alpharight = 100; int actrandomseed = 0; void setup() { size(600, 600); colormode(hsb, 360, 100, 100, 100); colorleft = color(323, 100, 77); void draw() { colormode(hsb, 360, 100, 100, 100); background(colorback); smooth(); nofill(); randomseed(actrandomseed); strokeweight(mousex/15); tilecount = mousey/15; ορισμός τιμής tilecount με βάση τη θέση Y του ποντικιού for (int gridy=0; gridy<tilecount; gridy++) { for (int gridx=0; gridx<tilecount; gridx++) { float posx = width/tilecountgridx; float posy = height/tilecountgridy; ορισμός διαφορετικής διαφάνειας ανάλογα με τη θέση Y του τετραγώνου αν η μεταβλητή transparentleft ή transparentright έχουν τιμή true η τιμή των transparentleft ή transparentright αλλάζει με τα πλήκτρα 3 και 4 if (transparentleft == true) alphaleft = gridy10; else alphaleft = 100; if (transparentright == true) alpharight = 100-gridY10; else alpharight = 100; int toggle = (int) random(0,2); if (toggle == 0) { stroke(colorleft, alphaleft); 6
line(posx, posy, posx+(width/tilecount)/2, posy+height/tilecount); line(posx+(width/tilecount)/2, posy, posx+(width/tilecount), posy+height/tilecount); if (toggle == 1) { stroke(colorright, alpharight); line(posx, posy+width/tilecount, posx+(height/tilecount)/2, posy); line(posx+(height/tilecount)/2, posy+width/tilecount, posx+(height/tilecount), posy); void mousepressed() { actrandomseed = (int) random(100000); void keyreleased(){ if (key == s key == S ) saveframe("p_2_1_1_03"+"_##.png"); if (key == 1 ){ if (colorleft == color(273, 73, 51)) { colorleft = color(323, 100, 77); else { colorleft = color(273, 73, 51); colorleft = color(0); if (key == 2 ){ if (colorright == color(0)) { colorright = color(192, 100, 64); else { colorright = color(0); ο τελεστής =! Αλλάζει την τιμή μιας μεταβλητής στην αντίθετή της. Δηλαδή, αν είναι true θα αλλάξει σε false και το αντίστροφο if (key == 3 ){ transparentleft =! transparentleft; if (key == 4 ){ transparentright =! transparentright; if (key == 0 ){ transparentleft = false; transparentright = false; colorleft = color(323, 100, 77); colorright = color(0); 7
Στο παρακάτω παράδειγμα φορτώνεται σχήμα από αρχείο SVG και εμφανίζεται στα τετράγωνα του πλέγματος. Με τα πλήκτρα 1-7 επιλέγεται διαφορετικό σχήμα από τα αρχεία SVG που είναι στον φάκελο data. Με τα πλήκτρα πάνω/κάτω αλλάζει το μέγεθος των σχημάτων. Με τα πλήκτρα δεξιά/αριστερά τα σχήματα περιστρέφονται. P_2_1_1_04.pde Generative Gestaltung, ISBN: 978-3-87439-759-9 First Edition, Hermann Schmidt, Mainz, 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni http:www.generative-gestaltung.de Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http:www.apache.org/licenses/license-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. / shapes in a grid, that are always facing the mouse MOUSE position x/y : position to face KEYS 1-7 : choose shapes arrow up/down : scale of shapes arrow left/right : additional rotation of shapes c : toggle. color mode d : toggle. size depending on distance g : toggle. grid resolution s : save png / PShape είναι ο τύπος δεδομένων της Processing για να αποθηκεύονται σχήματα. Σε αυτή τη μεταβλητή θα αποθηκεύεται στη μνήμη το σχήμα από το αρχείο SVG. PShape currentshape; int tilecount = 10; float tilewidth, tileheight; float shapesize = 50; αρχικό μέγεθος σχήματος float newshapesize = shapesize; float shapeangle = 0; float maxdist; color shapecolor = color(0, 130, 164); int fillmode = 0; int sizemode = 0; void setup(){ size(600, 600); background(255); smooth(); 8
υπολογισμός πλάτους και ύψους στο πλέγμα με βάση τη τιμή tilecount tilewidth = width/float(tilecount); tileheight = height/float(tilecount); υπολογισμός της μέγιστης απόστασης στον καμβά (ευκλείδια απόσταση) maxdist = sqrt(sq(width)+sq(height)); Με την loadshape φορτώνεται το σχήμα από το αρχείο module_1.svg και μπαίνει ως τιμή στην μεταβλητή currentshape currentshape = loadshape("module_1.svg"); void draw(){ background(255); smooth(); for (int gridy=0; gridy<tilecount; gridy++) { for (int gridx=0; gridx<tilecount; gridx++) { float posx = tilewidthgridx + tilewidth/2; float posy = tileheightgridy + tilewidth/2; υπολογισμός της γωνίας μεταξύ της θέσης του ποντικιού και του σχήματος float angle = atan2(mousey-posy, mousex-posx) + radians(shapeangle); ορισμός μεγέθους σχήματος ανάλογα με την τιμή της sizemode η οποία αλλάζει με το πλήκτρο d. To μέγεθος των σχημάτων αλλάζει σχετικά με την απόστασή τους από τον δείκτη του ποντικού. Για sizemode == 0 το μέγεθος δεν μεταβάλλεται. if (sizemode == 0) newshapesize = shapesize; Για sizemode == 1 το μέγεθος υπολογίζεται πρώτα η απόσταση της θέσης του ποντικιού από τη θέση του σχήματος με την dist(mousex,mousey,posx,posy). Στη συνέχεια η τιμή αυτή με τη συνάρτηση map μετατρέπεται από τιμές 0 έως 500 σε τιμές από 5 έως shapesize. Η πράξη shapesize1.5 map(dist(mousex,mousey,posx,posy),0,500,5,shapesize) έχει αποτέλεσμα το μέγεθος του σχήματος να αυξάνεται όσο πιο κοντά είναι στον δείκτη ποντικιού. if (sizemode == 1) newshapesize = shapesize1.5- map(dist(mousex,mousey,posx,posy),0,500,5,shapesize); Για sizemode == 2 το μέγεθος του σχήματος θα είναι μικρότερο όσο πιο κοντά είναι στον δείκτη ποντικιού if (sizemode == 2) newshapesize = map(dist(mousex,mousey,posx,posy),0,500,5,shapesize); Η τιμή της fillmode αλλάζει με το πλήκτρο C. Όταν fillmode == 0 καλείται η enablestyle κάνει το σχήμα να εμφανίζεται όπως είναι στο αρχείο svg και να αγνοεί πιθανούς ορισμούς χρωμάτων γεμίσματος ή γραμμής if (fillmode == 0) currentshape.enablestyle(); Όταν fillmode == 1 τότε η disablestyle απενεργοποιεί την εμφάνιση του σχήματος όπως είναι στο svg και εφαρμόζει χρώμα γεμίσματος με την fill. if (fillmode == 1) { currentshape.disablestyle(); fill(shapecolor); 9
Όταν fillmode==2 ή 3 πρώτα υπολογίζεται μια τιμή για την αδιαφάνεια με βάση την απόσταση του ποντικιού από το σχήμα if (fillmode == 2) { currentshape.disablestyle(); float a = map(dist(mousex,mousey,posx,posy), 0,maxDist, 255,0); fill(shapecolor, a); if (fillmode == 3) { currentshape.disablestyle(); float a = map(dist(mousex,mousey,posx,posy), 0,maxDist, 0,255); fill(shapecolor, a); pushmatrix(); translate(posx, posy); rotate (angle); Η shapemode τροποποιεί την θέση από την οποία σχεδιάζονται τα σχήματα. Η επιλογή shapemode(center) κάνει το σχήμα να σχεδιάζεται από το κέντρο του και χρησιμοποιεί την 3 η και 4 η παράμετρο της shape() παρακάτω για το πλάτος και ύψος shapemode (CENTER); nostroke(); Η shape σχεδιάζει το σχήμα currentshape στη θέση 0,0 με πλάτος και ύψος newshapesize shape(currentshape, 0,0, newshapesize,newshapesize); popmatrix(); void keypressed() { if (key == 's' key == 'S') saveframe("p_2_1_1_04"+"_##.png"); Κάθε φορά που πατιέται το πλήκτρο c ή d αυξάνεται η τιμής της fillmode ή sizemode κατά 1. Η πράξη %4 ή %3 είναι για να μην παίρνουν τιμές μεγαλύτερες από 4 ή 3. if (key == 'c' key == 'C') fillmode = (fillmode+1) % 4; if (key == 'd' key == 'D') sizemode = (sizemode+1) % 3; Με το πλήκτρο g αλλάζει η τιμή του tilecount σε 5 ή 10 ή 20 και υπολογίζεται το νέο μέγεθος των τετραγώνων στο πλέγμα. if (key == 'g' key == 'G') { tilecount = tilecount+5; if (tilecount > 20) { tilecount = 10; tilewidth = width/float(tilecount); tileheight = height/float(tilecount); Για κάθε πλήκτρο από 1 έως 7 φορτώνεται ένα διαφορετικό σχήμα με την loadshape από κάποιο από τα αρχεία svg. Τα αρχεία svg βρίσκονται στον φάκελο data. if (key == '1') currentshape = loadshape("module_1.svg"); if (key == '2') currentshape = loadshape("module_2.svg"); if (key == '3') currentshape = loadshape("module_3.svg"); if (key == '4') currentshape = loadshape("module_4.svg"); 10
if (key == '5') currentshape = loadshape("module_5.svg"); if (key == '6') currentshape = loadshape("module_6.svg"); if (key == '7') currentshape = loadshape("module_7.svg"); Με τα πλήκτρα πάνω ή κάτω αλλάζει το μέγεθος των σχημάτων if (keycode == UP) shapesize +=5; if (keycode == DOWN) shapesize = max(shapesize-5, 5); Με τα πλήκτρα δεξιά ή αριστερά αυξάνεται ή μειώνεται η γωνία περιστροφής των σχημάτων. if (keycode == LEFT) shapeangle -=5; if (keycode == RIGHT) shapeangle +=5; 11