Σχεδιάζοντας δυναμικά πλέγματα στο Processing

Το Processing είναι γνωστό για την ευκολία που παρέχει στη σχεδίαση γραφικών, μέσα από μια γλώσσα προγραμματισμού με σημαντικές δυνατότητες. Έχει ήδη παρουσιαστεί σε προηγούμενη ενότητα ο χώρος σχεδίασης και τα χαρακτηριστικά του (αρχή αξόνων, συντεταγμένες, κλπ), γνώση βασική και απαραίτητη για οποιαδήποτε σχεδίαση.

Η χρήση πλέγματος στο χώρο σχεδίασης, εξυπηρετεί πολλούς σκοπούς, όπως για παράδειγμα το πλέγμα του τερέν στο σκάκι ή της τρίλιζας, κλπ.

Σε πρακτικό επίπεδο, πρέπει να υπάρχει η δυνατότητα του καθορισμού γραμμών και στηλών, καθώς και του αντίστοιχου χρώματος για κάθε περιοχή.

Το πρόγραμμα που ακολουθεί σε διάφορες παραλλαγές, σχεδιάζει ένα πλέγμα στο παράθυρο της εφαρμογής με ποικιλία χαρακτηριστικών. Είναι σημαντικό να παρατηρείτε κάθε φορά το οπτικό αποτέλεσμα σε σχέση με την αλλαγή των αντίστοιχων στοιχείων στον κώδικα.

Ας ξεκινήσουμε όμως με την περιγραφή της πρώτης έκδοσης του κώδικα (Παράδειγμα 1).

Μεταβλητές που θα φιλοξενούν το μέγιστο πλάτος και ύψος του παραθύρου της εφαρμογής
int xmax, ymax;

Συνάρτηση αρχικοποίησης (τρέχει μια φορά)
void setup()
{

Παράθυρο εφαρμογής 1000 x 1000 pixel
size(1000,1000);

Αποθήκευση μέγιστων διαστάσεων. Οι μεταβλητές height και width, περιέχουν αυτόματα τις διαστάσεις του παραθύρου της εφαρμογής
xmax=height; ymax=width;

Εμφάνιση τίτλου εφαρμογής
surface.setTitle("Grid v0 - microdev.gr");

Καθαρισμός παραθύρου
background(0);

Το πλάτος και το ύψος του παραθύρου θα διαιρεθεί σε 8 περιοχές
int xs=8; int ys=8;

Κλήση συνάρτησης σχεδίασης πλέγματος
draw_grid(xmax,ymax,xs, ys);

}

Η συνάρτηση draw δεν περιέχει τίποτα, αφού δεν επαναλαμβάνεται καμία διαδικασία (η σχεδίαση του πλέγματος γίνεται μία φορά)
void draw()
{
}

Συνάρτηση σχεδίασης πλέγματος
xw πλάτος παραθύρου
yw ύψος παραθύρου
xss πλήθος περιοχών (πλακάκια) οριζόντια
yss πλήθος περιοχών (πλακάκια) κατακόρυφα
void draw_grid(int xw, int yw, int xss, int yss)
{

Υπολογισμός διαστημάτων οριζόντια
float xstep=xw/xss;

Υπολογισμός διαστημάτων κατακόρυφα
float ystep=yw/yss;

Το χρώμα για κάθε πλακάκι θα καθορίζεται με το πρότυπο RGB. Το αρχικό πλακάκι θα είναι λευκό
int r=255,g=255,b=255;

Θα διατρέξουμε όλες τις γραμμές και τις στήλες του παραθύρου της εφαρμογής
for(int y=0;y<=yw;y+=ystep)
for(int x=0;x<=xw;x+=xstep)
{

Καθορισμός χρώματος για το τρέχον πλακάκι
fill(r,g,b);

Σχεδίαση (πλακάκι)
rect(x,y,xstep,ystep);

Το χρώμα για το επόμενο πλακάκι θα είναι τυχαίο (από 0 έως 255)
r=round(random(255)); g=round(random(255)); b=round(random(255));

}
}
Αποτέλεσμα του κώδικα

int xs=8; int ys=8;

Κώδικας Παραδείγματος 1

Στη συνέχεια, μεταβάλλουμε συγκεκριμένα στοιχεία του κώδικα και παρατηρούμε το νέο αποτέλεσμα.

int xs=64; int ys=64;

int xs=64; int ys=8;

int xs=8; int ys=64;

Κινούμενα χιόνια έγχρωμης τηλεόρασης

Μεταφέρουμε τις σχετικές εντολές από το setup στο draw, το οποίο εκτελείται συνέχεια, ώστε να παράγουμε τα «κινούμενα χιόνια». Επίσης, έχουμε χωρίσει το πλάτος και το ύψος σε 220 περιοχές, προκειμένου το πλακάκι να είναι αρκετά μικρό. Η επαναληπτική εκτέλεση του κώδικα σχεδίασης, προκαλεί το φαινόμενο της κίνησης, αφού τα πλακάκια γίνονται συνέχεια overwrite με νέο χρώμα. Έχει επίσης προστεθεί και μια μικρή χρονική καθυστέρηση.

void draw()
{
int xs=220; int ys=220;
draw_grid(xmax,ymax,xs, ys);
delay(30);
}


Κώδικας Παραδείγματος

Σκακιέρα

Τμήμα της συνάρτησης draw_grid()

Αρχικό χρώμα (πρώτο πλακάκι ανοιχτό καφέ)
int r=250,g=230,b=200;
for(int y=0;y<=yw;y+=ystep)
for(int x=0;x<=xw;x+=xstep)
{
fill(r,g,b);
rect(x,y,xstep,ystep);

Αν το RGB ξεκινά με R=250, τότε είμαστε ήδη στο ανοιχτό χρώμα, άρα πάμε στο σκούρο και το αντίστροφο (περίπτωση else)
if (r==250) {r=200;g=170;b=150;} else {r=250;g=230;b=200;}
}



Κώδικας Παραδείγματος