Creative coding (processing) workshop. Part 1.

processing_ellipse

Μόλις ολοκληρώθηκε το πρώτο Creative Coding μάθημα στην Processing, μία γλώσσα προγραμματισμού για σχεδιαστές, καλλιτέχνες, αρχιτέκτονες και λοιπούς μη-προγραμματιστές. Δεν χρειάζεται να ξέρεις και πολλά για να ξεκινήσεις να γράφεις κώδικα σε processing. Ούτε να εγκαταστήσεις τίποτα στο μηχάνημά σου. Απλώς κατεβάζεις ένα φάκελο με αρχεία (ανάλογα με το αν έχεις Windows, MacOs ή Linux) και τρέχεις το πρόγραμμα κατευθείαν.

Το πρώτο πράγμα που θα δεις είναι ενα μικρό γλυκούλι παραθυράκι του processing IDE. Εκεί μέσα γράφεις γραμμούλες κώδικα και πατάς το κουμπάκι «play» για να τρέξει. Αν, ας πούμε, γράψεις

size(400,400);

και πατήσεις play θα σου πετάξει ένα .. Δε σου λέω, γράψε αυτή τη σειρούλα μόνος/μόνη σου να δείς τι θα γίνει!

Μάλιστα, αν προσθέσεις και τη σειρούλα

background(210,0,0);

θα συμβεί ένα μικρό θαύμα σε R,G,B (όποιος ξέρει λίγο photoshop ή css μπορεί να προβλέψει).

processing background color

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

ellipse(x,y,r1,r2);

Το processing θα καταλάβει ότι θελεις να φτιάξεις ένα ελλειπτικό σχήμα, με συντεταγμένες x και y και με διάμετρο 1 και διάμετρο 2 τα r1 και r2 αντίστοιχα.

processing_ellipse

Ωπ, που είναι ο κύκλος; Το χαρακτηριστικό του κύκλου είναι ό,τι έχει διάμετρο 1 και διάμετρο 2 ίσες, επομένως διόρθωσε τις αντίστοιχες τιμές στον κώδικά σου.

Ας υποθέσουμε ότι έχουμε πολύ ελεύθερο χρόνο και θέλουμε να σχεδιάσουμε κι άλλα σχήματα μέσα σε αυτόν τον ψηφιακό καμβά. Και ας υποθέσουμε ότι θέλουμε να τοποθετήσουμε τα σχήματά μας σε συγκεκριμμένες θέσεις και όχι το ένα πάνω στο άλλο. Θα χρειαστεί να προσαρμόσουμε τις συντεταγμένες τους, τα x και τα y. Για το processing το σημείο 0(0,0) βρίσκεται επάνω και αριστερά. Τα x αυξάνονται όσο πάμε δεξιά και τα y όσο πάμε προς τα κάτω. Δοκίμασε να προσθέσεις και άλλα δύο σχήματα, ένα παραλληλόγραμμο και μία γραμμή.

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

 //O kwdikas aftos tha treksei mono mia fora, stin arxi
 void setup(){
 size(600,400);
 background(210,0,0);
 }
//O kwdikas aftos tha trexei sunexws
 void draw(){
 line(100,100,mouseX,mouseY);
 }

interactive_lines
*Ο κώδικας που έχει μποστά του // ή βρίσκεται ανάμεσα σε /* (κώδικας εδώ) */θεωρείται σχόλιο-σημείωση και δεν τρέχει.

Τώρα όλες οι γραμμές ξεκινάνε από το ίδιο σημείο αλλά τελειώνουν εκεί που βρίσκεται κάθε φορά το ποντίκι σου. Αν θέλεις να μάθεις κι άλλα τώρα αυτή τη στιγμή, θα βρείς ένα σωρό συναρτήσεις και παραδείγματα για να παίξεις μόνος/μόνη σου στην ιστοσελίδα του processing, με άψογο documentation. Επίσης, μπορείς να κλέψεις έτοιμες ιδέες άλλων και να τις προσαρμόσεις στα μέτρα σου για να μην καταλάβει κανείς τίποτα, όπως κάνει όλος ο κόσμος, μιας και η βασική φιλοφοσία του creative coding είναι να δοκιμάζεις ιδέες, να πειραματίζεσαι και να συνδυάζεις λογής λογής πράγματα που βρίσκεις στο internet.

To workshop μόλις ξεκίνησε στη Θεσσαλονίκη. Περισσότερα σύντομα.