ΜΑΘΗΜΑ 5 - ΕΙΚΟΝΑ / ΒΙΝΤΕΟ / ΖΩΝΤΑΝΗ ΕΙΚΟΝΑ

Η χρήση εικόνας, βίντεο και ζωντανής εικόνας αντιμετωπίζεται από το processing με τον ίδιο τρόπο. Η εικόνα ανεξάρτητα από το είδος της φέρει τρεις ιδιότητες: α) μέγεθος σε εικονοστοιχεία, β) θέση γ) χρώμα εικονοστοιχειών για κάθε εικονοστοιχείο. Δηλαδή μία εικόνα 40Χ40 εικονοστοιχείων αποτελείτε από 1600 εικονοστοιχεία που  τοποθετείτε στην οθόνη στη θέση χ,y. Ως κέντρο θεωρείτε το αριστερό πάνω άκρο της εικόνας. Αυτό μπορεί να αλλάξει θέτοντας στο setup() την παράμετρο imageMode(CENTER); για να χρησιμοποιούμε ως κέντρο όλων των εικόνων το γεωμετρικό τους κέντρο. Μεταβλητή θεωρείτε και η διάσταση της εικόνας αφού μπορούμε να την αλλάξουμε μέσα στη ρουτίνα draw(). Για παράδειγμα μία εικόνα 400Χ300 μπορούμε να τη δούμε τελικά ως εικόνα 40Χ30 (μείωση της με διατήρηση της αναλογίας) ή 40Χ40 (μείωση με παραμόρφωση της αναλογίας).

Για κάθε ένα από τα τρία αντικείμενα  γίνεται αρχικά πριν από το setup() εισαγωγή/ορισμός του αντικειμένου. Στη συνέχεια μέσα στο setup() ορίζουμε το όνομα του αρχείου. Η αναπαράσταση της εικόνας γίνεται μέσα στο draw() δηλώνοντας την θέση, το μέγεθος καθώς και το ποσοστό διαφάνειας του αντικειμένου. Παρακάτω αναλύονται οι ιδιαιτερότητες των τύπων εικόνων στατικής, κινούμενης, ζωντανής.

Image

Load Image Εμφάνιση μίας εικόνας. play, download Εμφάνιση δύο εικόνων. play, download Άνοιγμα και διαγραφή εικόνων κατ'επιλογή. play, download Δημιουργία εικόνας. play, download Η εικόνα ακολουθεί το ποντίκι. play, download

Pixel Processing Αναπαραγωγή εικόνας με τη χρήση pixels. play, download Αναπαραγωγή μέρους της εικόνας. play, download Color Pattern εικόνας. play, download 3D Color Pattern εικόνας. play, download Εφέ άμμου που κρύβει μία εικόνα. play, download

Video

Manipulate Video Αναπαραγωγή και παύση βίντεο. download Κίνηση μπρος πίσω και αλλαγή ταχύτητας αναπαραγωγής βίντεο. download

Live Video

Manipulate Live Video Color Pattern ζωντανής εικόνας. download 3D Color Pattern ζωντανής εικόνας.  download

ΜΑΘΗΜΑ 4- ΕΛΕΓΧΟΣ ΚΑΙ ΕΠΙΛΟΓΗ

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

Control and Choice

Relational Operators == (equality) > (greater than) >= (greater than or equal to) != (inequality) < (less than) <= (less than or equal to)

Iteration for while

Conditionals break case ?: (conditional) continue default else if switch()

Logical Operators && (logical AND) ! (logical NOT) || (logical OR)

ΜΑΘΗΜΑ3 - Η ΕΜΠΛΟΚΗ ΤΟΥ ΧΡΗΣΗ: ΒΑΣΙΚΗ ΕΠΙΚΟΙΝΩΝΙΑ

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

Primitive Inputs

Mouse mouseButton mouseClicked() mouseDragged() mouseMoved() mousePressed() mousePressed mouseReleased()

Keyboard key keyCode keyPressed() keyPressed keyReleased() keyTyped()

Web link() param() status()

Time & Date day() hour() millis() minute() month() second() year()

ΜΑΘΗΜΑ 2 - ΓΡΑΜΜΑΤΙΚΗ ΚΑΙ ΣΥΝΤΑΚΤΙΚΟ ΤΟΥ PROCESSING

Το processing είναι ένα λογισμικό ανοιχτής αρχιτεκτονικής. Δεν προσφέρει στο χρήστη κάποια εργαλειοθήκη ούτε κάποια εξελιγμένη διεπιφάνεια επικοινωνίας χρήστη/υπολογιστή. Ο τρόπος επικοινωνίας της γλώσσας processing βασίζεται στην συγγραφή κώδικα ο οποίος μπορεί να πραγματοποιηθεί με τρείς μεθόδους.  Η πρώτη μέθοδος βασίζεται σε εντολές μίας γραμμής που είναι ικανές να σχεδιάσουν για παράδειγμα ένα γεωμετρικό σχήμα, πχ "line(30,20,85,75);" . Ο δεύτερος τρόπος βασίζεται στην άμεση χρήση της γλώσσας προγραμματισμού java. Ο τρίτος τρόπος αποτελεί μία υβριδική μορφή αντικειμενοστραφούς σχεδιασμού που δανίζεται τη γραμματική και το συντακτικό της γλώσσας προγραμματισμού java διατυπωμένη και διαμορφωμένη σε απλούστερη μορφή. 

 Ο προγραμματισμός ως αυτόνομη γλώσσα επικοινωνίας έχει το δικό του συντακτικό και τη δική του γραμματική. Τα συστατικά αυτής της γλώσσας είναι τα εξής:

• οθόνη προβολής (έξοδος αποτελέσματος)
• σύμβολα, μαθηματικοί τύποι, μεταβλητές (παραμετροποίηση σχεδιασμού)
• συνθήκες εκκίνησης εφαρμογής (προδιαγραφές)
• ρουτίνα συνεχούς εκτέλεσης (βασικό κομμάτι λογισμικού)
• αντικείμενα και ιδιότητες αντικειμένων (επισυναπτώμενα υποπρογράμματα)
• εργαλεία ελέγχου καλής λειτουργίας της εφαρμογής (πίνακας ελέγχου)

Syntax and Grammar

Symbols, Operators [] (array access) = (assign) , (comma) . (dot) {} (curly braces) ; (semicolon)

Structure size() void setup() draw() loop() noLoop() exit() import redraw() return class delay()

Variables false true boolean byte char color double float int long

Comments // (comment) /** */ (doc comment) /* */ (multiline comment)

ΜΑΘΗΜΑ Ι, ΨΗΦΙΑΚΟΣ ΣΧΕΔΙΑΣΜΟΣ: ΑΠΟ ΤΟ ΕΡΓΑΛΕΙΟ ΣΤΟ ΣΥΣΤΗΜΑ

Στο πρώτο μάθημα είδαμε τρόπους διανυσματικής σχεδίασης με τη χρήση κώδικα. Η συγκεκριμένη μέθοδος αποτελεί το πρώτο βήμα για το παραμετρικό σχεδιασμό. Για την ευκολότερη εξοικίωση σας με το λογισμικό processing και τις εντολές σχεδιασμού που διαθέτει μπορείτε να ασχοληθείτε με την παρακάτω άσκηση. 

Δημιουργήστε ένα πλακίδιο (tile) 200X200 pixels αποτυπώνοντας μία σύνθετη γεωμετρική σύνθεση γραμμικών οντοτήτων δύο διαστάσεων. Μπορείτε να χρησιμοποιήσετε γραμμές (line), καμπύλες (arc και bezier), τρίγωνα (triangle), τετράγωνα - σχεδιαστική οντότητα με τέσσερις κορυφές- (quad), ορθογώνια παραλληλόγραμμα (rect), ελλείψεις και κύκλους (ellipse). Επίσης, οι ιδιότητες των ψηφιακών σχεδιαστικών οντοτήτων, όπως χρώμα γραμμής (stroke), γέμισμα ή διαφάνεια (fill και noFill) και πάχος γραμμής (strokeWeight) μπορούν να βοηθήσουν την ιδέα σας.

Σε μία δεύτερη εκδοχή του πρώτου σας έργου μπορείτε να εμπλέξετε τον χρήστη, χρησιμοποιόντας τις εντολές mouseX και mouseY ως παραμετρικές μεταβλητές στη γεωμετρική σας σύνθεση.

Παρακάτω δίνεται πίνακας των εντολών που μπορείτε να χρησιμοποιήσετε. Πλήρη λίστα των εντολών μπορείτε να βρείτε στη διεύθυνση http://www.proce55ing.net/reference/.

Drawing Primitives

2D Primitives point() line() arc() triangle() quad() rect() rectMode() ellipse()

Curves curve() bezier() bezierDetail() bezierPoint() bezierTangent() curveDetail() curvePoint() curveTangent() curveTightness()

Colors background() stroke() noStroke() fill() noFill() colorMode()

Stroke attributes strokeWeight() Mouse mouseX mouseY pmouseX pmouseY

ΕΙΚΟΝΑ - ΗΧΟΣ - ΠΟΛΥΜΕΣΑ Ι

ΕΙΣΑΓΩΓΗ

Το ιστολόγιο "ΣΥΜΒΑΝΤΑ" (www.insidentsUTH.blogspot.com) δημιουργήθηκε για να καλύψει τις ανάγκες του μαθήματος "Εικόνα-Ήχος-Πολυμέσα Ι". Η επικοινωνία μας θα πραγματοποιείται με τη χρήση του συγκεκριμένου ιστολογίου. Εδώ θα μπορείτε να βρείτε πληροφορίες για το μάθημα, όπως χρονολόγιο, αντικείμενο μαθήματος ανά εβδομάδα, βοηθήματα, ανακοινώσεις, κλπ.

ΕΓΓΡΑΦΗ ΣΤΟ ΙΣΤΟΛΟΓΙΟ

Για την ομαλή λειτουργία του μαθήματος απαραίτητη είναι η εγγραφή των φοιτητών στο συγκεκριμένο ιστολόγιο. Αυτό μπορεί να επιτευχθεί μέσα από δύο βήματα.

α) Αποστολή email στο agelosfloros@gmail.com, αναγράφοντας το ονοματεπώνυμο σας.

β) Αποδοχή πρόσκλησης για τη συμμετοχή σας στο ιστολόγιο. Θα λάβετε σχετικό μήνυμα στο email σας.

ΧΡΟΝΟΛΟΓΙΟ

Κάθε εβδομάδα θα πραγματοποιούνται θεματικές διαλέξεις αλλά και σεμινάρια για την εκμάθηση του λογισμικού. ΑΠΑΡΑΙΤΗΤΗ θεωρείτε η παρουσία όλων στις επόμενες τέσσερις εβδομάδες, όπου θα καλυφθεί και το μεγαλύτερο μέρος για την εκμάθηση του λογισμικού.

Εβδομάδα Ι, 26 Φεβρουαρίου 2010:

Διαλέξη: Η ιστορία των πολυμεσικών μηχανών

Διαλέξη: Physical Computing Interfaces

Εβδομάδα ΙΙ, 4 Μαρτίου 2010:

Διαλέξη: Γεωμετρικά Patterns

Σεμινάριο Processing: Συντακτικό και γραμματική του αντικειμενοστραφούς σχεδιασμού

Διανυσματικός Σχεδιασμός με τη χρήση κώδικα

Εβδομάδα ΙΙΙ, 11 Μαρτίου 2010:

Διαλέξη: Παραμετροποίηση, Διάδραση, Ο χρόνος ως δομικό στοιχείο

Σεμινάριο Processing: Χρονικές συνθήκες, Μεταβλητές, Πίνακες στοιχείων, Λούπες

Εβδομάδα ΙV, 18 Μαρτίου 2010:

Διαλέξη: Το αντικείμενο

Σεμινάριο Processing: Εργαλεία και μέθοδοι αντικειμενοστραφούς σχεδιασμού, Κατασκευή αλγορίθμων

Παρουσίαση της άσκησης Εξαμήνου.

Εβδομάδα V, Πέμπτη 24 Μαρτίου 2010 αντί 25ης Μαρτίου:

Σεμινάριο Processing: Ανακεφαλαίωση

Επεξεργασία της άσκησης Εξαμήνου. Συγκρότηση ομάδων.

Ακολουθούν οι διακοπές του Πάσχα.

Το υπόλοιπο πρόγραμμα θα ανακοινωθεί στη συνέχεια, κατά την διάρκεια του εξαμήνου.