PROCESSING

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

Στο πρώτο μάθημα είδαμε τρόπους διανυσματικής σχεδίασης με τη χρήση κώδικα. Η συγκεκριμένη μέθοδος αποτελεί το πρώτο βήμα για το παραμετρικό σχεδιασμό. Για την ευκολότερη εξοικίωση σας με το λογισμικό 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


ΓΡΑΜΜΑΤΙΚΗ ΚΑΙ ΣΥΝΤΑΚΤΙΚΟ ΤΟΥ 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)


Η ΕΜΠΛΟΚΗ ΤΟΥ ΧΡΗΣΤΗ
Στο συγκεκριμένο μάθημα θα δούμε αρχέτυπους τρόπους επικοινωνίας του χρήστη με τη λογισμική εφαρμογή που σχεδιάζεται. Παρουσιάζονται οι εντολές που σχετίζονται με τη χρήση του ποντικιού ή του πληκτρολογίου, καθώς η επικοινωνία με το διαδίκτυο και η χρήση του χρόνου.

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()


EΛΕΓΧΟΣ ΚΑΙ ΕΠΙΛΟΓΗ
Μία σειρά εντολών είναι στη διάθεση του σχεδιαστή για να εμπλουτίσει την εμπλοκή του χρήστη με την εφαρμογή.  Όπως και στην καθημερινή ζωή ο χρόνος δομείτε από ασύγχρονα συμβάντα που καλούν το χρήστη να πάρει τις κατάλληλες αποφάσεις για να προχωρήσει. Οι συνθήκες εμπλοκής του χρήστη πρέπει να στοχεύουν στην ανανέωση και τον εμπλουτισμό των επιλογών που προσφέρονται στο χρήστη δίχως να φτάνουν σε σημείο κορεσμού και μείωσης αυτών. Η συνεχής ελαχιστοποίηση των διαθέσιμων επιλογών οδηγεί στο τερματισμό της αμφίδρομης επικοινωνίας


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)


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

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

Image

Load Image
Εμφάνιση μίας εικόνας. playdownload
Εμφάνιση δύο εικόνων. playdownload
Άνοιγμα και διαγραφή εικόνων κατ'επιλογή. playdownload
Δημιουργία εικόνας. playdownload
Η εικόνα ακολουθεί το ποντίκι. playdownload
Pixel Processing
Αναπαραγωγή εικόνας με τη χρήση pixels. playdownload
Αναπαραγωγή μέρους της εικόνας. playdownload
Color Pattern εικόνας. playdownload
3D Color Pattern εικόνας. playdownload
Εφέ άμμου που κρύβει μία εικόνα. playdownload

Video

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

Live Video

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

Comments