1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα

Transcript

1 1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1. Σύστημα Συντεταγμένων Το σύστημα συντεταγμένων που έχουμε συνηθίσει από το σχολείο τοποθετούσε το σημείο (0,0) στο σημείο τομής των δυο αξόνων Χ και Υ. Επιπλέον, είχαμε αρνητικές συντεταγμένες. Το σύστημα συντεταγμένων στην οθόνη ενός υπολογιστή διαφέρει ως προς τη θέση του σημείου (0,0) το οποίο βρίσκεται πάνω αριστερά. Επίσης δεν υπάρχουν αρνητικές συντεταγμένες. Για να σχεδιάσουμε σχήματα στην οθόνη στην Processing πρέπει να ορίσουμε τη θέση τους με συντεταγμένες ακολουθώντας το σύστημα που αναφέραμε παραπάνω όπου η αρχή των αξόνων, το σημείο (0,0), είναι πάνω αριστερά. 2. Συντεταγμένες σημείων Οι συντεταγμένες σημείων 2Δ γράφονται σε ζεύγη τιμών, όπου η πρώτη τιμή είναι η συντεταγμένη x (οριζόντια) και η δεύτερη τιμή η συντεταγμένη y (κατακόρυφα). Το σημείο (50,70) έχει συντεταγμένη x 50 και y 70. Το σημείο (0,0) βρίσκεται πάντα στο πάνω αριστερά σημείο του καμβά. 1

2 3. Βασικά σχήματα Παρακάτω δίνονται τα βασικά σχήματα και οι αντίστοιχες συναρτήσεις με τις οποίες μπορούμε να τα σχεδιάσουμε. Στις εικόνες που ακολουθούν δείχνουμε τα σχήματα σε ένα παράθυρο το οποίο έχει μέγεθος 10x10 (10 pixels οριζόντια και 10 pixels κάθετα). Φυσικά, το μέγεθος 10x10 δεν είναι ρεαλιστικό αφού είναι πολύ μικρό στην πραγματικότητα και όπως θα δούμε στη συνέχεια θα σχεδιάζουμε σε πολύ μεγαλύτερα παράθυρα. Εδώ το χρησιμοποιούμε μόνο για λόγους επίδειξης της χρήσης των συναρτήσεων για τα βασικά γεωμετρικά σχήματα. Σημείο - point(x, y); Θα σχεδιάσει μόνο ένα σημείο (ένα pixel). Γραμμή - line(x1, y1, x1, y2); Για να σχεδιαστεί μια γραμμή πρέπει να ορίσουμε τις συντεταγμένες δύο σημείων. Το σημείο αρχής Α και το σημείο τέλους Β. 2

3 Παραλληλόγραμμο (1 ος τρόπος) rect(x, y, width, height); Για να σχεδιάσουμε ένα παραλληλόγραμμο πρέπει να ορίσουμε τις συντεταγμένες του πάνω αριστερά σημείου του (x, y), το πλάτος του width και το ύψος height. Προφανώς αν ορίσουμε το πλάτος να είναι ίδιο με το ύψος τότε θα σχεδιαστεί ένα τετράγωνο. Παραλληλόγραμμο (2 ος τρόπος) rect(x1, y1, x2, y2); Η Processing μας δίνει τη δυνατότητα να σχεδιάσουμε ένα παραλληλόγραμμο ορίζοντας τις συντεταγμένες του πάνω αριστερά (x1, y1) και κάτω δεξιά (x2, y2) σημείων. Για να δηλώσουμε ότι θέλουμε να ορίσουμε τα δύο σημεία αντί πλάτους και ύψους, γράφουμε την εντολή rectangle(corners); πριν την rect(x1, y1, x2, y2);. 3

4 Έλλειψη ellipse(x, y, width, height) Για τον σχεδιασμό έλλειψης ορίζουμε τις συντεταγμένες του κέντρου της (x,y), το πλάτος και ύψος όπως και για το παραλληλόγραμμο. Αν δώσουμε ίδια τιμή για το πλάτος και ύψος τότε θα σχεδιαστεί ένας κύκλος. 4. Άσκηση Δοκιμάστε να σχεδιάσετε σε χαρτί τα σχήματα που προκύπτουν από τις παρακάτω εντολές 5. Το πρώτο πρόγραμμά σας σε Processing Ανοίξτε το περιβάλλον Processing και γράψτε την εντολή ellipse(25, 25, 50, 50); Στη συνέχεια πατήστε στο κουμπί Run για να εκτελεστεί το πρόγραμμά σας. Θα ανοίξει ένα νέο παράθυρο με την έξοδο του προγράμματός σας το οποίο θα είναι μια έλλειψη. 4

5 H έλλειψη που δημιουργήθηκε έχει κέντρο το σημείο (25, 25), οι δύο πρώτες παράμετροι που δώσαμε. Το πλάτος και ύψος είναι 50 και είναι οι τελευταίες δύο παράμετροι. Συνεπώς σχεδιάστηκε ένας κύκλος αφού έχει το ίδιο πλάτος και ύψος ακόμα και αν η συνάρτηση έχει όνομα ellipse. Το μέγεθος του παραθύρου εξόδου, που ονομάζεται καμβάς (canvas), είναι 100x100 pixels που είναι το προκαθορισμένο μέγεθος στην Processing. Κάντε τις παρακάτω τροποποιήσεις στο προγραμμά σας. Μία μόνο κάθε φορά. Κάθε φορά που αλλάζετε τον κώδικα του προγράμματός σας πρέπει να κάνετε κλικ στο κουμπί Run για να βλέπετε το νέο αποτέλεσμα εκτέλεσής του. Δοκιμάστε να γράψετε το όνομα της συνάρτησης ως Ellipse αντί για ellipse. Τι παρατηρείτε; Δοκιμάστε να σβήσετε τον χαρακτήρα ; που υπάρχει στο τέλος της γραμμής κώδικα. Τι παρατηρείτε; Δοκιμάστε να δημιουργήσετε διάφορες ελλείψεις που έχουν διαφορετικό σημείο ως κέντρο και διαφορετικό πλάτος και ύψος. Δοκιμάστε να δημιουργήσετε μια έλλειψη με κέντρο όποιο σημείο θέλετε αλλά ορίστε το πλάτος 100 και το ύψος 300. Τι παρατηρείτε; 6. Άσκηση Γράψτε τις εντολές με βασικά σχήματα για να σχεδιαστεί το παρακάτω σχήμα 5

6 7. Μέγεθος καμβά και εξομάλυνση Μπορούμε να ορίσουμε το μέγεθος του καμβά στο μέγεθος που επιθυμούμε με τη συνάρτηση size(πλάτος, ύψος), όπου το πλάτος και το ύψος ορίζεται σε αριθμό pixels. π.χ. η size(500,300) θα δημιουργήσει έναν καμβά μεγέθους με πλάτος 500 pixels και ύψος 300 pixels. Η συνάρτηση smooth() ορίζει ότι όλα τα σχήματα θα σχεδιάζονται χρησιμοποιώντας εξομαλυμένες ακμές (anti-aliasing) και έτσι δεν θα εμφανίζονται «οδοντωτές» γραμμές. Γράψτε τις παρακάτω εντολές και τρέξτε το πρόγραμμα. H nosmooth() κάνει ακριβώς το αντίθετο από την smooth(), δηλ. δεν εξομαλύνει τις ακμές. Παρατηρήστε τη διαφορά στις δύο ελλείψεις. nosmooth(); ellipse(30, 48, 36, 36); smooth(); ellipse(70, 48, 36, 36); Σε όλα τα προγράμματά μας οι δύο πρώτες εντολές που θα γράφουμε θα είναι η size() και στη συνέχεια η smooth(). Μετά από αυτές θα ξεκινάμε να σχεδιάζουμε σχήματα ή οτιδήποτε άλλο. 8. Χρώματα Τα χρώματα στην Processing ορίζονται με αριθμούς. Η πιο απλή περίπτωση ορισμού χρωμάτων είναι στη κλίμακα του γκρι (grayscale). Στην περίπτωση της κλίμακας του γκρι ορίζουμε το χρώμα δίνοντας μόνο έναν αριθμό από 0 (μαύρο) έως 255 (άσπρο). Οι ενδιάμεσες τιμές ορίζουν αποχρώσεις του γκρι. Το πεδίο τιμών από 0 έως 255 δεν είναι τυχαίο. Προκύπτει απ το ότι χρησιμοποιούμε για να την αποθήκευση της τιμής χρώματος ένα byte (δηλαδή 8 bit ψηφία που μπορούν να πάρουν την τιμή 0 ή 1). Αφού έχουμε 8 bit και το καθένα μπορεί να έχει δύο πιθανές τιμές, ο συνδυασμός και των 8 bit μπορεί να μας δώσει 2 8 = 256 διαφορετικές τιμές. Τα χρώματα μπορούμε να τα καθορίζουμε στο μοντέλο RGB (Red Green Blue) με τρεις τιμές από 0 έως 255 που καθορίζει πόσο από κάθε βασικό χρώμα θα χρησιμοποιηθεί. Οι συνδυασμοί αυτών των τριών τιμών μας δίνουν 1.6 εκ. διαφορετικές αποχρώσεις, διότι χρησιμοποιούμε ένα byte για κάθε ένα από τα βασικά χρώματα. 6

7 9. Χρώμα φόντου background() Στο προηγούμενο πρόγραμμα που τρέξατε το χρώμα φόντου ήταν γκρι, το προκαθορισμένο χρώμα αν δεν οριστεί κάποιο άλλο. Το χρώμα φόντου το ορίζουμε με τη συνάρτηση background(). Οι παράμετροι της background καθορίζουν την επιλόγη χρώματος. Μπορούμε επίσης να χρησιμοποιήσουμε τη δεκαεξαδική μορφή (HEX) για να ορίσουμε ένα χρώμα. Η εντολή background(#e6e6e6); έχει το ίδιο αποτέλεσμα με την background(230, 230, 230); γιατί αναφέρονται και οι δύο στο ίδιο χρώμα αλλά σε Hex μορφή ή στο μοντέλο RGB. Επιλέξτε από το μενού Tools->Color Selector. Θα εμφανιστεί μια παλέτα χρωμάτων από την οποία μπορείτε να παίρνετε τις τιμές χρώματος σε RGB ή Hex. Επίσης μπορείτε να πατάτε Copy και στον κώδικά σας να κάνετε paste την τιμή του. Γράψτε πριν την εντολή ellipse που είχαμε στο προηγούμενο πρόγραμμα μια εντολή background για να ορίσετε ένα χρώμα φόντου. Τρέξτε το πρόγραμμά σας για να δείτε το αποτέλεσμα. Γράψτε μετά την εντολή ellipse άλλη μια background με διαφορετικό χρώμα. Τι παρατηρείτε; Την εντολή background πρέπει να την γράφουμε πάντα στην αρχή του προγράμματός μας, πριν ξεκινήσουμε να σχεδιάζουμε οτιδήποτε άλλο. 10. Χρώμα και πάχος περιγράμματος - stroke() και strokeweight() H συνάρτηση stroke() χρησιμοποιείται για να ορίσουμε το χρώμα με το οποίο θα σχεδιάζονται γραμμές ή περιγράμματα σχημάτων. Φανταστείτε το σαν να ορίζουμε το χρώμα μολυβιού που θα χρησιμοποιείται. Οι τιμές των χρωμάτων δίνονται με τον ίδιο τρόπο όπως εξηγήσαμε για την background(). 7

8 Η συνάρτηση strokeweight() χρησιμοποιείται για να ορίσει το πάχος του «μολυβιού» μας. Το πάχος ορίζεται με ένα αριθμό που αναφέρεται σε αριθμό pixels. Όσο μεγαλύτερη η τιμή αυτή τόσο μεγαλύτερο το πάχος. Με την nostroke() μπορούμε να ορίσουμε ότι δεν θέλουμε να έχει περίγραμμα το σχήμα μας. Ορίστε ένα χρώμα και πάχος με τις stroke() και strokeweight(). Τι δύο αυτές εντολές θα τις γράψετε πριν την εντολή ellipse. Μεταφέρετε τις stroke() και strokeweight() μετά την ellipse (αποκοπή και επικόλληση). Τι παρατηρείτε; Ο ορισμός χρώματος και πάχους «μολυβιού» ισχύει από τη γραμμή του προγράμματος που τις γράψαμε και κάτω. Το ίδιο χρώμα και πάχος θα χρησιμοποιείται μέχρι να ξαναγράψουμε με άλλες τιμές τις stroke() και strokeweight(). 11. Χρώμα γεμίσματος - fill() H συνάρτηση fill() χρησιμοποιείται για να ορίσουμε το χρώμα με το οποίο θα γεμίζεται ένα σχήμα. Οι τιμές των χρωμάτων δίνονται με τον ίδιο τρόπο όπως εξηγήσαμε για την background() και stroke(). Αν το σχήμα που θα σχεδιαστεί δεν θέλουμε να έχει γέμισμα τότε χρησιμοποιούμε την nofill(). 12. Σειρά ορισμού χρωμάτων 8

9 Η Processing χρησιμοποιεί πάντα τον πιο πρόσφατο ορισμών χρωμάτων περιγράμματος και γεμίσματος διαβάζοντας τον κώδικα από πάνω προς τα κάτω. 13. Άσκηση Γράψτε τις εντολές για τον σχεδιασμό του παρακάτω σχήματος 14. Άσκηση Τι χρώμα θα παραχθεί από τις παρακάτω γραμμές κώδικα; 9

10 15. Διαφάνεια Χρώματος Όταν ορίζουμε τις τιμές χρωμάτων μπορούμε προαιρετικά να ορίσουμε και μια τέταρτη τιμή που αναφέρεται ως η τιμή άλφα του χρώματος. Το άλφα σημαίνει διαφάνεια και είναι χρήσιμο όταν θέλουμε να σχεδιάσουμε σχήματα που φαίνονται μερικώς το ένα πάνω στο άλλο. Οι τιμές άλφα επίσης είναι από 0 έως 255. Το 0 σημαίνει πλήρως διαφανές και το 255 πλήρως αδιαφανές. 16. Processing Reference Αν επιλέξετε το όνομα μιας συνάρτησης π.χ. ellipse() με δεξί κλικ επιλέξετε Find in Reference θα ανοίξει μια σελίδα στον browser του υπολογιστή σας. Σε αυτή τη σελίδα εξηγείται πως λειτουργεί η συνάρτηση ellipse (τις παραμέτρους, την σύνταξή της κ.λπ.). Αυτή τη λειτουργία μπορείτε να την χρησιμοποιείτε σε όλες τις συναρτήσεις που γράφετε για να δείτε όλες τις λεπτομέρειές της. 17. Επιπλέον σχήματα στην Processing 10

11 18. Παραδείγματα βασικών σχημάτων Παρακάτω δίνονται παραδείγματα διάφορων σχημάτων. Γράψτε τις αντίστοιχες γραμμές κώδικα για να εμφανιστούν τα σχήματα αυτά στην οθόνη σας. Δοκιμάστε να αλάξετε τις συντεταγμένες των σημείων ή/και το πλάτος και ύψος για να δείτε πως μεταβάλλονται. 11

12 12

13 13

14 19. Άσκηση Δημιουργήστε ένα σχέδιο στο χαρτί με τα βασικά γεωμετρικά σχήματα που αναφέραμε παραπάνω. Βρείτε τις συντεταγμένες τους και γράψτε τον κώδικα στην Processing. Χρησιμοποιήστε και τις συναρτήσεις για τον ορισμό χρωμάτων. Μην ξεχάσετε να ορίσετε το απαραίτητο μέγεθος καμβά με την size(). 14