Δημιουργώντας σχήματα, ζωγραφιές και animation στο Microworlds Pro - 2ο Μαθητικό Συνέδριο Πληροφορικής

Δημιουργώντας σχήματα, ζωγραφιές και animation στο Microworlds Pro - 2ο Μαθητικό Συνέδριο Πληροφορικής

09 Απριλίου 2010

Παρουσίαση στο 2ο Μαθητικό Συνέδριο Πληροφορικής

Δημιουργώντας σχήματα, ζωγραφιές και animation στο Microworlds Pro

To Microworlds Pro είναι ένα  εκπαιδευτικό λογισμικό με το οποίο μπορούμε να χρησιμοποιήσουμε κείμενα, ήχους, εικόνες, κινούμενα σχέδια, μουσική και βίντεο για να δημιουργήσουμε πολυμεσικές εφαρμογές. Για να το χειριστούμε χρησιμοποιούμε τη γλώσσα προγραμματισμού Logo. Με αυτή τη γλώσσα προγραμματίζουμε χελώνες χρησιμοποιώντας συγκεκριμένες εντολές, όπως μπροστά, πίσω, στρίψε δεξιά και αριστερά σε μοίρες κ.ά. . Μπήκαμε στη λογική του προγραμματισμού μαθαίνοντας διαδικασίες, σωστή κλήση εντολών και πειραματιστήκαμε στο συνδυασμό των κατάλληλων εντολών, ώστε να δημιουργήσουμε το τελικό και ολοκληρωμένο πρόγραμμα. Μας βοήθησε να κατανοήσουμε καλύτερα και διασκεδαστικά έννοιες της γεωμετρίας, όπως τη γωνία και τις μοίρες, γεωμετρικά σχήματα κ.λ.π. .  Σχεδιάσαμε πρωτότυπα σχήματα, όμορφες ζωγραφιές και κινούμενα γραφικά (animation) και σας τα παρουσιάζουμε.

Λέξεις κλειδιά: Microworlds Pro, Logo, πολυμέσα

1.Εισαγωγή

Στα πλαίσια του μαθήματος υπολογιστών, το τμήμα μας Ε΄ 2, ασχολήθηκε με το Microworlds Pro, μάθαμε το περιβάλλον του και χρησιμοποιήσαμε τη Logo ώστε να προγραμματίσουμε και να δώσουμε εντολές στο βοηθό μας, τη χελώνα. Κατασκευάσαμε εικόνες με γεωμετρικά σχήματα και κινούμενα γραφικά. Με φαντασία και προγραμματιστική σκέψη δημιουργήσαμε τοπία, τρελά χωριά, εικόνες με το διάστημα, περίεργα σχήματα και ό,τι άλλο βάλαμε στο μυαλό μας. Όλα αυτά, αφού πρώτα είχαμε μάθει να χρησιμοποιούμε σωστά το περιβάλλον και είχαμε πάρει τις βάσεις του προγραμματισμού.

2.Περιβάλλον

Το περιβάλλον του Microworlds Pro φαίνεται στο Σχήμα 1. Είναι χωρισμένο σε τμήματα, όπου κάθε τμήμα είναι διαθέσιμο για διαφορετικές εργασίες, που όμως όλες μαζί συντελούν στον τελικό στόχο, στο σχεδιασμό ενός ολοκληρωμένου προγράμματος. Το κάτω τμήμα, το κέντρο εντολών, είναι κατάλληλο για τον προγραμματισμό της χελώνας, ενώ οι εντολές αυτές που δίνονται εκτελούνται και φανερώνονται στο ακριβώς από πάνω κομμάτι του περιβάλλοντος, στη σελίδα. Πάνω, βρίσκονται το μενού και η γραμμή εργαλείων, από όπου μπορούμε να χειριστούμε όλες τις δυνατότητες του προγράμματος με τις εντολές και τα κουμπιά που υπάρχουν διαθέσιμα. Ψηλά δεξιά έχουμε τα εργαλεία με το οποία μπορούμε να ζωγραφίσουμε και να επεξεργαστούμε μια εικόνα. Τέλος στα δεξιά θα βρούμε και τις καρτέλες (Διαδικασίες, Γραφικά, Διεργασίες, και Εργασία), όπου καθεμία είναι χρήσιμη για διαφορετικές λειτουργίες. Δυο από τις βασικότερες καρτέλες είναι οι Διαδικασίες και τα Γραφικά στις οποίες θα αναφερθούμε αναλυτικότερα παρακάτω.

Η γλώσσα προγραμματισμού Logo που χρησιμοποιήσαμε είναι ειδικά σχεδιασμένη για μαθητές. Για παράδειγμα, όταν δώσουμε την εντολή μπροστά 100 στη χελώνα, που περιμένει να εκτελέσει τις εντολές μας, τότε αυτή θα προχωρήσει εκατό βήματα μπροστά. Δηλαδή είναι μια διαφορετική γλώσσα από αυτές που έχουμε συνηθίσει και ακούμε καθημερινά γύρω μας. Είναι μια γλώσσα ειδικά σχεδιασμένη για να γίνεται κατανοητή από τους ανθρώπους, αλλά και από τον υπολογιστή ταυτόχρονα.  Αυτό το κάνει εντυπωσιακό, πώς δηλαδή μαθαίνοντας απλές λέξεις και υπακούοντας σε κάποιους απλούς συντακτικούς κανόνες γινόμαστε ικανοί να προγραμματίσουμε και να ελέγξουμε τη χελώνα. Κάποιες άλλες απλές εντολές που βρήκαμε πολύ χρήσιμες είναι οι ακόλουθες:

• Δεξιά μοίρες (δε)
• Αριστερά μοίρες (αρ)
• Πίσω βήματα (πι)
• Στυλόάνω  (στα)
• Στυλόκάτω  (στκ)
• Σφραγίδα
• ΣβήσεΓραφικά (σβγ)
• Περίμενε βήματα
• Όλες [εντολή]

Εκτός όμως από τις παραπάνω εντολές τις οποίες χρησιμοποιήσαμε ακόμη και σε πολύ αρχικό στάδιο, όταν πειραματιζόμασταν ακόμη και μαθαίναμε το περιβάλλον, μάθαμε και χρησιμοποιήσαμε τη δομή επανάληψης και τις διαδικασίες. Η δομή επανάληψης είναι μια προγραμματιστική δομή, που καθορίζει το πόσες φορές θα εκτελεστεί ένα συγκεκριμένο σύνολο εντολών. Αυτό αποτελεί τεράστια βοήθεια κατά τον προγραμματισμό και φάνηκε τρομερά χρήσιμο κατά τη δημιουργία γεωμετρικών σχημάτων και όχι μόνο. Πολύ σημαντικό ρόλο έπαιξαν και οι διαδικασίες. Όπως αναφέραμε πιο πάνω, η χελώνα καταλαβαίνει μόνο συγκεκριμένες λέξεις και μόνο όταν είναι σωστά γραμμένες. Όμως με τις διαδικασίες έχουμε τη δυνατότητα να μάθουμε στις χελώνες και άλλες εντολές που θα είναι καθορισμένες από εμάς. Η χρήση τους γίνεται απλά καλώντας μια διαδικασία με το όνομά της.

3.Γεωμετρικά σχήματα

Το Microworlds Pro αποτελεί εκτός από ένα πολυμεσικό περιβάλλον και ένα διαφορετικό τρόπο να μάθουμε γεωμετρία. Μέσω του βοηθού μας, τη  χελώνα, μπορούμε να δημιουργήσουμε εύκολα γεωμετρικά σχήματα, όπως τρίγωνα, τετράγωνα, κύκλους και πολύγωνα. Τα γεωμετρικά σχήματα υλοποιούνται καθοδηγώντας τις κινήσεις της χελώνας, δίνοντας της απλές εντολές. Για παράδειγμα θέλοντας να φτιάξουμε ένα τετράγωνο θα δώσουμε την ακόλουθη εντολή:
Επανάλαβε 4[μπ 100 δε 90]
Ουσιαστικά ζητάμε από τη χελώνα να πάει μπροστά 100 βήματα και να στρίψει δεξιά 90 μοίρες και αυτό να το επαναλάβει 4 φορές (δομή επανάληψης).  Αυτό θα έχει ως αποτέλεσμα την εικόνα του Σχήματος 2.

Καταλαβαίνουμε ότι μεγάλη σημασία έχουν οι μοίρες, δηλαδή η σωστή γωνία, που πρέπει να στρίψει η χελώνα (90 μοίρες στη συγκεκριμένη περίπτωση) και το πόσες φορές πρέπει να επαναλάβει τις κινήσεις της (4 φορές λόγω των 4 πλευρών/γωνιών του τετραγώνου), ώστε να σχηματίσει το σωστό σχήμα κάθε φορά. Το τετράγωνο αποτελεί ένα απλό παράδειγμα. Σε άλλα σχήματα όπως το τρίγωνο ή κάποιο πολύγωνο πρέπει να σκεφτούμε προσεκτικά τα δεδομένα που θα δώσουμε σε κάθε εντολή. Πρέπει να αναλύουμε στο μυαλό μας τις κινήσεις της χελώνας και να αντιλαμβανόμαστε τι κατεύθυνση θέλουμε να ακολουθήσει, για να σχεδιαστεί το επιθυμητό σχήμα. Για παράδειγμα για να δημιουργήσουμε ένα τρίγωνο θα πρέπει να δώσουμε την ακόλουθη εντολή στη χελώνα:
Επανάλαβε 3[μπ 50 δε 120]
Ενώ για ένα εξάγωνο θα γράφαμε:
Επανάλαβε 6[μπ 80 δε 60]
Παρατηρούμε ότι το μέγεθος κάθε πλευράς των σχημάτων εξαρτάται από τα βήματα της χελώνας. Οι φορές επανάληψης αντιπροσωπεύουν το πλήθος των πλευρών. Το πόσο θα στρίψει δεξιά η χελώνα εξαρτάται από το πόσες μοίρες είναι η παραπληρωματική κάθε γωνίας. Πιο συγκεκριμένα 60ο είναι κάθε γωνία ενός ισόπλευρου τριγώνου, η χελώνα θα στρίψει 180ο -60ο = 120ο. 
Ένας άλλος πιο γρήγορος τρόπος υπολογισμού των μοιρών της κάθε γωνίας είναι να υπολογίσουμε 360ο / 3 = 120ο . Αυτό ισχύει γιατί τελικά η χελώνα όταν δημιουργεί ένα γεωμετρικό σχήμα κάνει μια πλήρη περιστροφή 360ο. 
Μέσα από τέτοιους πειραματισμούς διαπιστώσαμε ότι αν δίναμε την εντολή:
Επανάλαβε 360[μπ 1 δε 1]
το σχήμα που θα ζωγράφιζε η χελώνα θα ήταν ένας κύκλος. Δηλαδή ο κύκλος είναι σαν ένα πολύγωνο που η κάθε πλευρά και η κάθε γωνία είναι πολύ μικρή σχεδόν ίση ή και μικρότερη από ένα.
Κάνοντας εφαρμογή όλων των παραπάνω μπορέσαμε να δημιουργήσουμε ωραίες  και περίεργες εικόνες, όπως αυτή που ακολουθεί στο Σχήμα 3

Παράλληλα όμως, μπορούμε να συνδυάσουμε κάποια σχήματα για να δημιουργήσουμε άλλα, πιο περίπλοκα. Για παράδειγμα, μπορούμε να φτιάξουμε ένα σπιτάκι από ένα τετράγωνο και ένα τρίγωνο για σκεπή. Συνδυάζοντας και τις δυνατότητες του Microworlds Pro στην επεξεργασία εικόνων μπορούμε να έχουμε το ακόλουθο αποτέλεσμα.  

Στο παραπάνω παράδειγμα στο Σχήμα 4 βλέπουμε το τελικό αποτέλεσμα, ενώ στο Σχήμα 5 βλέπουμε τις διαδικασίες που δημιουργήσαμε και χρησιμοποιήσαμε. Οι διαδικασίες ορίζονται στην καρτέλα Διαδικασίες, που αναφέραμε παραπάνω. 

Όταν θέλουμε να χρησιμοποιήσουμε μια διαδικασία αρκεί να γράψουμε το όνομα της. Στο συγκεκριμένο παράδειγμα αφού μάθαμε στη χελώνα τις διαδικασίες τρίγωνο τετράγωνο και τέλος το σπίτι καλώντας τις δύο πρώτες, δημιουργήσαμε στη σελίδα τέσσερις χελώνες, τις τοποθετήσαμε σε κατάλληλες θέσεις και γράψαμε στο κέντρο εντολών:
όλες [στκ σπίτι]
Δηλαδή όλες οι χελώνες να κατεβάσουν στυλό κάτω και να δημιουργήσουν ένα σπίτι έτσι όπως έχει οριστεί να φτιάξουν το σπίτι βάσει της αντίστοιχης διαδικασίας. 
Αλλά το Microworlds Pro δεν περιορίζεται μόνο στη δημιουργία γραφικών όπως το παραπάνω παράδειγμα. Αντίθετα μας δίνει τη δυνατότητα να δημιουργήσουμε πολυμεσικές εφαρμογές εισάγοντας ήχο και κινούμενες εικόνες.

4. Κινούμενες εικόνες  (Animation)

Οι κινούμενες εικόνες ή αλλιώς animation είναι η ταχεία προβολή μιας σειράς εικόνων, έτσι ώστε να δημιουργείται η ψευδαίσθηση της κίνησης. Αυτή η οφθαλμαπάτη δημιουργείται εξαιτίας της διατήρησης της εικόνας στο μάτι επί 1/12 του δευτερόλεπτου. Με τη βοήθεια του microworlds pro είχαμε τη δυνατότητα να δημιουργήσουμε τα δικά μας animation. Στην αρχή μάθαμε απλά να κάνουμε εικόνες να μετακινούνται, αλλά μετά καταφέραμε να συνδυάζουμε διαφορετικά γραφικά πάνω σε μια χελώνα και να φαίνεται σα να κινείται πραγματικά.
Για την πρώτη περίπτωση το μόνο που χρειάζεται είναι να προσθέσουμε αρκετές χελώνες στη σελίδα μας, να τους αλλάξουμε κατεύθυνση και μετά να τους αλλάξουμε μορφή, επιλέγοντας ένα από τα διαθέσιμα γραφικά που βρίσκονται στην καρτέλα γραφικά. Με το θέμα που έχουμε επιλέξει ζωγραφίζουμε την εικόνα μας ανάλογα και είμαστε έτοιμοι να βάλουμε κίνηση στις χελώνες μας. Κάνοντας δεξί κλικ πάνω σε κάθε χελώνα ξεχωριστά και επιλέγοντας “κινούμενη εικόνα” η χελώνα (που έχει μεταμορφωθεί αναλόγως το γραφικό που επιλέξαμε) αρχίζει να κινείται στην κατεύθυνση που της ορίσαμε γυρίζοντας της το κεφάλι. Με δεξί κλικ και επεξεργασία μπορούμε να επεξεργαστούμε κι άλλο περαιτέρω την κίνηση της. Ένα παράδειγμα με κινούμενες εικόνες είναι αυτό του σχήματος 6, με τα διαστημόπλοια να κινούνται.

Για να πετύχουμε όμως οι χελώνες μας να μοιάζουν με animations πρέπει η χελώνα να πάρει πολλές μορφές που η μία θα διαδέχεται την άλλη ενώ μετακινείται η χελώνα. Μπορούμε να χρησιμοποιήσουμε την εντολή:
Θέσε σχήμα “όνομα γραφικού
στο πλαίσιο κειμένου του παραθύρου που ανοίγει όταν κάνουμε δεξί κλικ πάνω στη χελώνα και επιλέξουμε επεξεργασία. Δηλαδή συνολικά μια χελώνα που θέλουμε να μετατραπεί σε animation σκύλου θα δώσουμε την εντολή
μπροστά 3 περίμενε 1 θέσε σχήμα “σκύλος1 μπροστά 3 περίμενε 1 θέσε σχήμα “σκύλος2

Το microworlds pro είναι εφοδιασμένο με ένα πλήθος γραφικών που μας βοηθάνε σε αυτή τη διαδικασία. Υπάρχουν κάποιες ομάδες γραφικών που είναι κατάλληλα για να προσφέρουν την κίνηση στη χελώνα όπως φαίνεται στο σχήμα 7.
Ένας άλλος τρόπος είναι να αλλάξουμε τη μορφή της χελώνας αρχικά με ένα γραφικό κάποιας ομάδας και μετά κρατώντας πατημένο το Shift μπορούμε να επιλέξουμε το επόμενο γραφικό και να κάνουμε κλικ πάνω στη χελώνα δίνοντας της την επόμενη μορφή κ.ο.κ. 
Δημιουργήσαμε με αυτό τον τρόπο πολλές και αστείες εικόνες με animation σαν και αυτή στο σχήμα 8.

Στο microworlds pro μπορούμε να επεξεργαστούμε και να κάνουμε τα δικά μας γραφικά και να εισάγουμε ήχους, κουμπιά και μεταβολείς. Προσαρμόζοντας όλα αυτά που μάθαμε σε αυτά που θέλαμε και βάζοντας φαντασία και χιούμορ κάναμε δικά μας προγράμματα όπως το ακόλουθο, όπου μετατρέψαμε τις χελώνες σε γράμματα και τις μάθαμε να χορεύουν!

5.Επίλογος

Το microworlds pro μας βοήθησε να κατανοήσουμε ακόμη καλύτερα μαθηματικές και προγραμματιστικές έννοιες, όπως μοίρες, δομή επανάληψης, διαδικασίες κτλ. μέσα από ενδιαφέρουσες και δημιουργικές εργασίες. Κοπιάσαμε να μάθουμε να χρησιμοποιούμε με άνεση το περιβάλλον, όχι επειδή ήταν δύσκολο, αλλά επειδή ήταν κάτι τελείως καινούριο για μας, αλλά το αποτέλεσμα όλων αυτών που μάθαμε ήταν συναρπαστικό.

Ευχαριστίες

Ευχαριστούμε τους καθηγητές μας για την καθοδήγηση τους όσο διάστημα δουλέψαμε με το πολυμεσικό προγραμματιστικό περιβάλλον του Microworlds Pro.

Βιβλιογραφία
1.http://el.wikipedia.org/ Η ελεύθερη εγκυκλοπαίδεια Βικιπαίδεια.
2.http://users.thess.sch.gr/salnk/didaskalia/microworldspro/mwprotut.htm

Συλλογή Φωτογραφιών
(17 φωτογραφίες)