Η JavaScript βιβλιοθήκη p5.js ως STEM εργαλείο Ζουμπλιού Αναστασία, Παλίλης Βασίλης Χημικός anastasiazoumpliou@gmail.com Φυσικός Δάσκαλος vasilispalilis@gmail.com Ο ιστότοπος που συνοδεύει λειτουργικά την παρουσίαση έχει URL http://chocolation.eu/ Βασικές γνώσεις και ικανότητες που σχετίζονται με την παρουσίαση αυτή, έχουν αναπτυχθεί στο μάθημα WEB II - Advanced design course (https://elearn.ellak.gr/course/view.php?id=65) από τους εισηγητές, για λογαριασμό της ΕΛ/ΛΑΚ ως μέρος του προγράμματος Code+Create Εισαγωγή o p5.js είναι μια ελεύθερη βιβλιοθήκη JavaScript, μας επιτρέπει να δημιουργούμε σκίτσα, κινούμενα σχέδια και διαδραστικά γραφικά που είναι προσβάσιμα από οποιοδήποτε browser. Οι pre-built functions καθιστούν το p5 ένα εύκολο στη χρήση εργαλείο, που μπορεί να χρησιμοποιηθεί για προσομοιώσεις και virtual πειράματα STEM. Αν και είναι ένα περιβάλλον προγραμματισμού, δεν απαιτεί πολύ χρόνο για να το μάθει κάποιος και ο χρόνος που ένας εκπαιδευτικός STEM θα διαθέσει για τον λόγο αυτό, μπορεί να χρησιμοποιηθεί άμεσα για τη δημιουργία εφαρμογών της ειδικότητάς του. Επίσης, η γνώση της JavaScript που θα αποκομίσει μπορεί να χρησιμοποιηθεί για τη δημιουργία εφαρμογών και σε παρόμοιες βιβλιοθήκες, όπως το d3.js. Αυτή η παρουσίαση θα επικεντρωθεί στην παρουσίαση του p5.js στο πλαίσιο της χημείας, της φυσικής και της απεικόνισης δεδομένων σε χάρτες. Για καθένα από αυτά τα γνωστικά αντικείμενα θα εξετάσουμε ένα παράδειγμα, που θα δείξει υλοποίηση θεμάτων όπως PH και οι ταλαντώσεις στο p5.js και τα πλεονεκτήματα που αυτό συνεπάγεται για την εκπαίδευση STEM. 1
Θα δούμε επίσης πώς μπορούμε να χρησιμοποιήσουμε δεδομένα της Γης και του Διαστήματος στη χαρτογράφηση. Ο στόχος είναι να υλοποιηθούν φαινόμενα που διαφορετικά απαιτούν εργαστήριο ή άλλα μέσα για να καταστούν κατανοητά και να παρουσιαστούν με έναν οπτικό και διαδραστικό τρόπο που θα βοηθήσει τους μαθητές να πειραματιστούν. Μέρος Α Φυσική, Χημεία Προσομοιώσεις Φυσικής Μπορείτε να δημιουργήσετε προσομοιώσεις κίνησης με ελάχιστες γραμμές εύκολου κώδικα! Σχεδιάστε τα σχήματά σας και χρωματίστε τα Περιγράψτε την κίνησή τους με τις γνωστές σας εξισώσεις Αυξήστε τη μεταβλητή που παριστάνει τον χρόνο Η γένεση της γραφικής παράστασης μιας ταλάντωσης: y = y 0 ημ(ωt) Διακρότημα: y = 2y 0 συν ( ω 1 ω 2 2 ) ημ ( ω 1+ω 2 ), ω 1 ω 2 2 Προσθέστε συνθήκες στα όρια μιας περιοχής για να προσομοιώσετε μια κίνηση χωρίς ενεργειακές απώλειες 2
Μπορείτε να κάνετε βέβαια και πιο περίπλοκα πράγματα με κάποιο κώδικα παραπάνω. Όλες οι προηγούμενες αναπαραστάσεις μπορούν να γίνουν παραμετρικές και να δίνεται η δυνατότητα στον χρήστη να εισάγει τις δικές του επιλογές, εισάγοντας τον αναγκαίο κώδικα, παράλληλα στον υφιστάμενο. Εικονικό πείραμα εξουδετέρωσης Σχεδιάστε τα σχήματά σας και εισάγετε τις εικόνες σας Διαχωρίστε την περιοχή του πειράματος από την περιοχή των κειμένων Προσθέστε γεγονότα για να επιλέξει ο χρήστης 3
Απεικονίστε κάθε κατάσταση του πειράματος Γράψτε ανάδραση στο χρήστη για το αποτέλεσμα των ενεργειών του 4
Εστιάστε στην αλλαγή χρώματος του δείκτη Εστιάστε στην πλήρη εξουδετέρωση του διαλύματος Εστιάστε στον βασικό χαρακτήρα πλέον του διαλύματος και στην επόμενη αλλαγή του χρώματος του δείκτη 5
Εστιάστε στη μέγιστη τιμή του ph Χρειάζεται αρκετός κώδικας! Μέρος Β- Απεικόνιση δεδομένων σε χάρτη Εισάγετε έναν "WEB" χάρτη Αντιστοιχίστε τις γεωγραφικές συντεταγμένες με τα pixel της οθόνης 6
Αντλήστε δεδομένα-data (json ή csv αρχείο) από τους παρόχους τους Απεικονίστε τα δεδομένα στον χάρτη Χρειάζεται αρκετός κώδικας! Η κίνηση του International Space Station Η κίνηση του International Space Station Τα δεδομένα ανανεώνονται κάθε 5 δευτερόλεπτα, και το p5 αντλεί τα ανανεωμένα δεδομένα κάθε δευτερόλεπτο, έτσι η τροχιά του δορυφόρου αποτυπώνεται στον χάρτη. Συγκρίνετε με την πραγματική θέση του δορυφόρου όπως αυτή δίνεται στο European Space Agency portal 7
Κρατήστε ενεργό το αρχείο σας για μερικές ώρες Μια στατική εικόνα των σεισμών του τελευταίου μήνα Τα δεδομένα ανανεώνονται κάθε 5 λεπτά, για να δούμε όμως κάποια αλλαγή πρέπει να ανανεώσουμε τον browser. 8
Έχει πιθανώς ενδιαφέρον να αντιπαραβάλλετε με μια εικόνα των λιθοσφαιρικών πλακών της Γης. Αναφορές 1. p5.js. [Online] Available at: https://p5js.org/reference/ [25/8/2018] 2. Wikipedia contributors. (2018, June 21). Litmus. In Wikipedia, The Free Encyclopedia. Retrieved 17:35, August 25, 2018, from https://en.wikipedia.org/w/index.php?title=litmus&oldid=846909097 3. Wikipedia contributors. (2018, August 16). Neutralization (chemistry). In Wikipedia, The Free Encyclopedia. Retrieved 17:37, August 25, 2018, from https://en.wikipedia.org/w/index.php?title=neutralization_(chemistry)&oldid=85519 5190 4. Χαρτογραφική προβολή: Χαρτογραφική προβολή. (2016, Δεκεμβρίου 30). Βικιπαίδεια, Η Ελεύθερη Εγκυκλοπαίδεια. Ανακτήθηκε 17:38, Αυγούστου 25, 2018 από το //el.wikipedia.org/w/index.php?title=%ce%a7%ce%b1%cf%81%cf%84%ce% 9
BF%CE%B3%CF%81%CE%B1%CF%86%CE%B9%CE%BA%CE%AE_%CF%80 %CF%81%CE%BF%CE%B2%CE%BF%CE%BB%CE%AE&oldid=6179068. 5. Web Mercator: Wikipedia contributors. (2018, August 14). Web Mercator. In Wikipedia, The Free Encyclopedia. Retrieved 17:40, August 25, 2018, from https://en.wikipedia.org/w/index.php?title=web_mercator&oldid=854955140 6. Στατικός χάρτης: https:www.mapbox.com/api-documentation/#static 7. Συντεταγμένες ISS : http:open-notify.org/open-notify-api/ 8. Κίνηση ISS : http:www.esa.int/our_activities/human_spaceflight/international_space_station/w here_is_the_international_space_station 9. Σεισμικά δεδομένα : https:earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php 10