2 ο Εργαστήριο Αλληλεπίδραση και Animation Τα προγράμματα που έχουμε δει μέχρι τώρα εκτελούν τον κώδικά τους μία φορά και το πρόγραμμα σταματάει. Ένα πρόγραμμα που δημιουργεί animation ή ανταποκρίνεται σε γεγονότα (από το ποντίκι ή το πληκτρολόγιο) πρέπει να τρέχει συνεχώς. Για να έχουμε ένα πρόγραμμα που τρέχει και σχεδιάζει στην οθόνη συνεχώς πρέπει να έχουμε δύο συναρτήσεις: την draw() και την setup(). Τις συναρτήσεις θα τις αναλύσουμε περισσότερο σε επόμενα μαθήματα. Προς το παρόν μια συνάρτηση θα την καταλαβαίνουμε ως μια ενότητα που περιέχει κάποιες γραμμές κώδικα. Ένα πρόγραμμα στην Processing μπορεί να έχει μόνο μια συνάρτηση draw() και μία μόνο setup(). Ο κώδικας των προγραμμάτων που θα γράψουμε στη συνέχεια θα χωρίζονται σε δύο ενότητες: τις γραμμές κώδικα που είναι στην setup() και τις γραμμές κώδικα που είναι στην draw() Πως γράφουμε τις συναρτήσεις setup() και draw() Τα άγκιστρα {}, καθορίζουν την αρχή και το τέλος μιας ενότητας κώδικα. Προς το παρόν το void και τις παρενθέσεις () που ανοίγουν και κλείνουν αμέσως μετά το όνομα της συνάρτησης θα τα δεχτούμε ως σύνταξη χωρίς να τα εξηγήσουμε περισσότερο. Ροή Προγράμματος με setup() και draw() Πρώτα εκτελούνται οι εντολές που είναι μέσα στην setup() και στη συνέχεια εκτελούνται οι εντολές που είναι μέσα στην draw(). Η σημαντική διαφορά μεταξύ των δύο συναρτήσεων είναι ότι: οι εντολές της setup() εκτελούνται μία μόνο φορά. οι εντολές της draw() εκτελούνται συνεχώς. προγράμματος. Όταν εκτελεστεί και η τελευταία εντολή της draw() τότε θα επιστρέψει η ροή του προγράμματος στην πρώτη εντολή της draw() και θα επαναλάβει την εκτέλεση όλων των εντολών της. Η επανάληψη αυτή θα συνεχίζεται έως ότου τερματίσουμε την εκτέλεση του 1
Άσκηση 1 Γράψτε τον παρακάτω κώδικα και αφού εκτελέσετε το πρόγραμμα. void setup() { size(200,200); } void draw(){ background(255); } stroke(0); fill(175); rectmode(center); rect(50,50,50,50); Γιατί δεν βλέπουμε κάποια κίνηση κατά την εκτέλεση του προγράμματος αφού έχουμε γράψει κάποιες εντολές στην draw(); Οι συντεταγμένες της θέσης του δείκτη του ποντικιού Οι λέξεις mousex και mousey προσδιορίζουν στην Processing τις συντεταγμένες x και y αντίστοιχα της θέσης του δείκτη του ποντικιού. Γράψτε την rect() στο προηγούμενο πρόγραμμα με χρήση των συντεταγμένων της θέσης του δείκτη του ποντικιού ως εξής: rect(mousex, mousey, 50, 50); Τώρα θα βλέπετε ότι το τετράγωνο μετακινείται ανάλογα με την κίνηση του ποντικιού. Αυτό συμβαίνει διότι κάθε φορά που επαναλαμβάνεται η εκτέλεση των εντολών της draw() σχεδιάζεται ένα νέο τετράγωνο όπου η θέση του καθορίζεται από την τρέχουσα θέση του δείκτη του ποντικιού. Άσκηση 2 Μετακινήστε την εντολή background(255); στην setup() και εξηγήστε γιατί με αυτή την αλλαγή θα βλέπουμε ένα μονοπάτι από τετράγωνα. 2
Άσκηση 3 Γράψτε το παρακάτω πρόγραμμα για την σχεδίαση του Zoog, όπου η θέση του σώματός του και το κεφάλι του σχεδιάζονται σχετικά με τη θέση του δείκτη του ποντικιού. Άσκηση 4 Τροποποιήστε τις εντολές για την σχεδίαση των ματιών και των ποδιών του Zoog ώστε να μετακινούνται μαζί με το σώμα και το κεφάλι του. 3
Οι συντεταγμένες της προηγούμενης θέσης του δείκτη του ποντικιού Οι λέξεις κλειδιά pmousex και pmousey αναφέρονται στην προηγούμενη θέση του δείκτη του ποντικιού. Το p είναι από την λέξη previous (=προηγούμενη). Η προηγούμενη θέση αναφέρεται στην προηγούμενη εκτέλεση της draw(). Η γνώση της προηγούμενης θέσης μπορεί να μας δώσει ενδιαφέρουσες δυνατότητες αλληλεπίδρασης. Για παράδειγμα, μπορούμε να σχεδιάζουμε γραμμές από την προηγούμενη θέση του ποντικιού στην τρέχουσα. Άσκηση 5 Σχεδίαση συνεχούς γραμμής Υπολογισμός της ταχύτητας με την οποία ο χρήστης μετακινεί το ποντίκι Η ταχύτητα με την οποία μετακινεί ο χρήστης το ποντίκι μπορεί να υπολογιστεί ως το πόσο μεταβλήθηκε η συντεταγμένη Χ από την προηγούμενη θέση του ποντικιού. Φυσικά θα μπορούσαμε να χρησιμοποιήσουμε την μεταβολή της συντεταγμένης Υ, γι αυτό το παράδειγμα όμως θα χρησιμοποιήσουμε την συντεταγμένη Χ. Συνεπώς, αν βρούμε τη διαφορά της τρέχουσας συντεταγμένης Χ με την προηγούμενη συντεταγμένη Χ, τότε έχουμε την ταχύτητα με την οποία μετακίνησε ο χρήστης το ποντίκι του. Επειδή, ο υπολογισμός της διαφοράς αυτής μπορεί να μας δώσει θετικό ή αρνητικό αποτέλεσμα ανάλογα με το αν η μετακίνηση έγινε προς τα αριστερά ή δεξιά, για τον υπολογισμό της ταχύτητας θα χρησιμοποιήσουμε την απόλυτη τιμή της διαφορά. Π.χ. η απόλυτη τιμή του -2 είναι 2, και η απόλυτη τιμή του 2 είναι 2. Στην Processing την απόλυτη τιμή μπορούμε να την υπολογίσουμε με τη συνάρτηση abs(). Συνεπώς, την ταχύτητα μετακίνησης του ποντικιού μπορούμε να την υπολογίσουμε ως abs(mousex pmousex). 4
Άσκηση 6 Τροποποιήστε το προηγούμενο παράδειγμα με τη σχεδίαση της συνεχούς γραμμής ώστε όσο πιο γρήγορα ο χρήστης μετακινεί το ποντίκι τόσο μεγαλύτερο πάχος να έχει η γραμμή. Χρησιμοποιήστε την strokeweight() για τον καθορισμό του πάχους γραμμής. Γεγονότα (events) κλικ ποντικιού και πάτημα πλήκτρου Τα κλικ από το ποντίκι και το πάτημα πλήκτρων από τον χρήστη στην Processing θεωρούνται γεγονότα (events). Αν θέλουμε να συμβαίνει κάτι (π.χ. να αλλάζει το χρώμα φόντου σε κόκκινο) όταν γίνεται κλικ ποντικιού από τον χρήστη τότε πρέπει να προσθέσουμε άλλη μια ενότητα κώδικα για να χειριστεί αυτό το γεγονός. Θα αναφέρουμε δύο νέες συναρτήσεις για τον καθορισμό της συμπεριφοράς του προγράμματός μας σε γεγονότα: mousepressed() χειρίζεται το γεγονός ότι έγινε κλικ με το ποντίκι keypressed() χειρίζεται το γεγονός ότι πατήθηκε κάποιο πλήκτρο Οι εντολές που θα είναι μέσα στην mousepressed() ή keypressed() θα εκτελούνται μία φορά κάθε φορά που συμβαίνει το αντίστοιχο γεγονός. Άσκηση 7 Γράψτε τον κώδικα του παραδείγματος. Σε αυτό το παράδειγμα έχουμε τέσσερις συναρτήσεις που καθορίζουν τη ροή εκτέλεσης του προγράμματος. Το πρόγραμμα ξεκινά με την setup(). Συνεχίζει με την draw() που η εκτέλεσή της επαναλαμβάνεται επ αόριστον. Η draw() δεν περιέχει καμία εντολή και έτσι θα βλέπουμε ένα κενό λευκό παράθυρο. Μόνο όταν ο χρήστης κάνει κλικ θα εκτελεστούν οι εντολές της mousepressed() και θα σχεδιαστεί ένα τετράγωνο. Ενώ αν πατήσει ένα πλήκτρο θα ξανασχεδιαστεί το λευκό χρώμα φόντου και συνεπώς θα καθαρίσει το παράθυρο εξόδου. 5
Άσκηση 8 Προσθέστε την εντολή background(255); μέσα στην draw(). Γιατί το πρόγραμμα δεν δουλεύει; framerate Κάθε φορά που ολοκληρώνεται η εκτέλεση του κώδικα της συνάρτησης draw(), σχεδιάζει ένα νέο frame στον καμβά και στη συνέχεια εκτελεί τις ίδιες εντολές κώδικα μέσα στην draw() για να σχεδιαστεί και το επόμενο frame. To animation προκύπτει από τον γρήγορο σχεδιασμό πολλών διαφορετικών frames. Από προεπιλογή, σχεδιάζονται στην οθόνη 60 frames κάθε δευτερόλεπτο, δηλ. 60 fps (frames per second). Η συνάρτηση framerate() καθορίζει τον αριθμό των frames που θέλουμε να σχεδιάζονται κάθε δευτερόλεπτο. Μπορούμε να δώσουμε ως τιμή στην framerate() έναν ακέραιο αριθμό από 1 έως 60. 6
Άσκηση 9 Τροποποιήστε τον κώδικα του προγράμματος για την σχεδίαση του Zoog όπως παρακάτω όλο το σώμα του Zoog θα ακολουθεί την κίνηση του ποντικιού το χρώμα ματιών του καθορίζεται από τη θέση του ποντικιού Τα πόδια του θα σχεδιάζονται βάση της προηγούμενης και τρέχουσας θέσης του ποντικιού Όταν γίνεται κλικ εμφανίζεται το μήνυμα «Take me to your leader!» 7
Άσκηση 10 Αρχικά σχεδιάστε μια στατική εικόνα με χρώματα RGB και βασικά γεωμετρικά σχήματα. Στη συνέχεια κάντε αυτή την εικόνα δυναμική βάση αλληλεπίδρασης με το ποντίκι. Αυτό θα μπορούσε να συμπεριλαμβάνει τα σχήματα να ακολουθούν τη θέση του ποντικιού, να αλλάζει το μέγεθός τους σχετικά με τη θέση του ποντικιού, να αλλάζει το χρώμα τους σχετικά με τη θέση του ποντικιού κ.λπ. 8