Processing (γλώσσα προγραμματισμού)

Το Processing είναι γλώσσα προγραμματισμού ανοικτού κώδικα και παράλληλα προγραμματιστικό περιβάλλον για ανθρώπους που θέλουν να προγραμματίσουν εικόνες, animation και ήχο. Ξεκίνησε ως εκπαιδευτικό εργαλείο και πολύ σύντομα εξελίχθηκε σε επαγγελματικό προγραμματιστικό περιβάλλον. Δημιουργήθηκε την άνοιξη του 2001 όταν δύο απόφοιτοι του πανεπιστημίου MIT Media Lab, Benjamin Fry και Casey Reas ξεκίνησαν την ανάπτυξη της γλώσσας Processing πάνω σε Java. Παρόλο που η γλώσσα αναπτύχθηκε στη Java, το συντακτικό της είναι απλουστευμένο και το προγραμματιστικό της μοντέλο βασίζεται στα γραφικά. Απώτερος σκοπός των δύο δημιουργών είναι η εκμάθηση προγραμματισμού από αρχάριους χρήστες μέσω ενός οπτικού πλαισίου καθώς και η παροχή ενός επαγγελματικού εργαλείου παραγωγής εφαρμογών multimedia. Διαθέτει τη δυνατότητα ενσωμάτωσης κώδικα OpenGL για την επιτάχυνση της απόδοσης τρισδιάστατων γραφικών. Είναι συμβατή με τα λειτουργικά συστήματα GNU/Linux, Mac OS X, και Windows. Έχει εμπλουτιστεί με περισσότερες από 100 βιβλιοθήκες. Σήμερα, η Processing υποστηρίζεται από μια κοινότητα εθελοντών προγραμματιστών.

Συγκρίσεις με άλλες γλώσσες

“Hello, World!” 
 Παραδοσιακά, οι προγραμματιστές μαθαίνουν τα βασικά μέσω του output της γραμμής εντολών.
 TEXT IN → Ο χρήστης γράφει κώδικα σε μορφή κειμένου.
 TEXT OUT → Ο κώδικας παράγει output κειμένου στη γραμμή εντολών.
 TEXT INTERACTION → Ο χρήστης μπορεί να εισάγει κείμενο στη γραμμή εντολών για να αλληλεπιδράσει με το πρόγραμμα.

To “Hello, World!” πρόγραμμα δεν είναι τίποτα άλλο από μια σύμβαση των προγραμματιστών, όπου το αποτέλεσμα του πρώτου προγράμματος που γράφεις σε οποιαδήποτε γλώσσα, θα απεικονίζει το κείμενο “Hello, World!”.
Το συναρπαστικό του να μαθαίνει κάποιος προγραμματισμό με Processing, είναι ότι το Processing δίνει έμφαση σε ένα πιο διαισθητικό και οπτικά ανταποκρινόμενο περιβάλλον, το οποίο ευνοεί καλλιτέχνες και σχεδιαστές να μάθουν προγραμματισμό.

 TEXT IN → Γράφεις κώδικα σε μορφή κειμένου.
 VISUALS OUT → Ο κώδικας σου παράγει οπτικοποιημένο αποτέλεσμα σε ένα παράθυρο.
 MOUSE INTERACTION → Ο χρήστης μπορεί να αλληλεπιδράσει στο παράθυρο μέσω του ποντικιού ( και άλλων μέσων.. ).

Το αποτέλεσμα του “Hello, World!” σε Processing θα μπορούσε να είναι κάπως έτσι (η συνάρτηση setup καλείται στην αρχή και αρχικοποιεί το περιβάλλον δημιουργώντας ένα πάνελ με μέγεθος 200x200 εικονοστοιχεία και τυπώνει στο κέντρο το κείμενο "Hello World!"):

void setup() {
  // define the window size & enable anti-aliasing
  size(200, 200);
  smooth();
  // Set "ink" color, font, and alignment for rendering text.
  fill(0);  // Black
  // set up the font (system default sans serif)
  textFont(createFont("SansSerif",18));
  textAlign(CENTER);
  noLoop();  // draw() executes only once
}
 
void draw() {
  // Draw text to screen using the previously set font.
  text("Hello World!", width/2, height/2);
}

Σύγκριση με Java 
 Το περιβάλλον του Processing είναι γραμμένο σε Java. Προγράμματα που έχουν γραφτεί σε Processing είναι επίσης μεταφρασμένα σε Java και έπειτα τρέχουν σαν Java προγράμματα. Προγράμματα που είναι γραμμένα σε Java και Processing, συνήθως τρέχουν γρηγορότερα από προγράμματα που βασίζονται σε scripting γλώσσες όπως ActionScript και Lingo, κάτι το οποίο είναι πολύ σημαντικό για εφαρμογές με γραφικά.
Μεγάλες διακρίσεις μεταξύ του Processing και της Java είναι οι βιβλιοθήκες γραφικών του Processing και το απλοποιημένο στυλ προγραμματισμού που δεν προϋποθέτει οι χρήστες να καταλαβαίνουν πιο προηγμένες έννοιες όπως κλάσεις, αντικείμενα, ή animation (ενώ εξακολουθούν να είναι διαθέσιμες για προχωρημένους χρήστες). Τέτοιες τεχνικές λεπτομέρειες πρέπει να είναι ειδικά προγραμματισμένες σε Java, αλλά ολοκληρωμένες σε Processing, κάνοντας τα προγράμματα μικρότερα και ευκολότερα να διαβαστούν.

Tutorials 
Σε αυτό το τμήμα παραθέτονται μερικά tutorials για συγκεκριμένα θέματα.Επίσης εξαιρετικά tutorials υπάρχουν στο τμήμα εκμάθησης στην σελίδα του Processing.

Video Tutorials

Από τον Jose Sanchez 
Σε μία προσπάθεια να εμπλουτίσουμε την κοινότητα του Processing και επίσης ναι βοηθήσουμε τους μαθητές να κατανοήσουν κάποια θέματα τα οποία δεν τους είναι τελείως ξεκάθαρα,δημιούργησα μερικά video tutorials,παρακαλώ στείλτε σχόλια και προτάσεις για να συνεχιστεί η βελτίωση στο παρακάτω e-mail : jomasan@gmail.com

Λίστα με video tutorials

Από το Fun Processing 
Αυτή η σειρά από tutorials ξεκινούν από την απόλυτη αρχη ,για παράδειγμα,τι ειναι ενα pixel.Απο εκεί σιγά σιγά προσπαθεί να εξηγήσει τον προγραμματισμό χρησιμοποιώντας πολύ λίγες γραμμές κώδικα, που θα δημιουργούν σταθερά ή κινούμενα γραφικά. Κάθε επεισόδιο βασίζεται σε προηγούμενα και δεν εστιάζει στη θεωρία, αλλά στα εργαλεία που θα σας επιτρέψουν να παίξετε με τον κώδικα. Αν κανείς ενδιαφέρεται για τον προγραμματισμό, επειδή είναι διασκεδαστικό, υπάρχει πάντα χρόνος αργότερα να μάθει πολύπλοκους αλγορίθμους και δομές δεδομένων. Ακόμα και κάποιος ο οποίος δεν θέλει να πάει πιο βαθιά, είναι πολύ σημαντικό σε έναν κόσμο όπου το λογισμικό είναι παντού γύρω μας, απλά να έχει μια ιδέα για το πώς δημιουργείται το λογισμικό.
Το project αυτό ξεκίνησε στις 1 Αυγούστου 2011 και νέα βίντεο προστίθενται κάθε εβδομάδα.

Sign an Applet 
Εξ ορισμού οι εφαρμογές Java θεωρούνται ασφαλής για να τρέξουν, ή σε γλώσσα Java trusted, δεδομένου ότι εκτελούνται ρητά από τους χρήστες στους δικούς τους υπολογιστές. Τα applets σε σύγκριση θεωρούνται μη αξιόπιστα δεδομένου ότι τρέχουν αυτόματα στο πρόγραμμα περιήγησης. Αυτός ο περιορισμός εμποδίζει τα applets από το να κάνουν ορισμένα πράγματα, όπως τη φόρτωση περιεχομένου από διαφορετικό domain από αυτόν που φιλοξενεί το applet. Το παραγόμενο σφάλμα θα είναι κάπως έτσι: java.security.AccessControlException: access denied (java.net.SocketPermission some URL here connect,resolve).Για να παρακάμψετε αυτόν τον περιορισμό, μπορείτε να υπογράψετε το applet.Υπάρχουν διαφορετικές προσεγγίσεις για την υπογραφή ένα applet, αλλά καθέ μια περιλαμβάνει τη σύνδεση ενός πιστοποιητικού με το αρχείο jar σας. Τα πιστοποιητικά ψηφιακών υπογραφών που ενσωματώνουν ένα δημόσιο κλειδί με κάποια ταυτότητα. Υπάρχουν εταιρείες (Certificate Authorities) που πωλούν τα πιστοποιητικά για εκατοντάδες δολάρια, αλλά είναι επίσης δυνατό να δημιουργηθεί ενα auto-sign πιστοποιητικό δωρεάν, που είναι η προσέγγιση που φαίνεται παρακάτω.Το select_image sketch το οποίο φορτώνει μια εικόνα από σας. Όταν εκτελείται όπως ένα applet, πρέπει να είναι signed.Για περισσότερες πληροφορίες, διαβάστε στην ιστοσελίδα της Sun.
Οδηγίες :
Υποθέστε ότι το sketch σας λέγεται loadImage.pde
	Κάντε export το sketch σας ως applet,δημιουργείται το loadImage.jar.(Σημειώστε ότι αν δημιουργηθεί ενα αρχείο με όνομα core.jar έχει γίνει για το λόγο οτι,η επιλογή "Use multiple .jar files when exporting applets" στα preferences στο παράθυρο του Processing.Προτείνω να βγάλετε αυτη την επιλογή και να ξανακάνετε export το sketch σας.Αλλιώς θα χρειαστεί να κάνετε sign και τα δυο .jar αρχεία)
	Ανοίγετε το τερματικό και πηγαίνεται στο directory του applet σας εκεί όπου βρίσκεται δηλαδή το loadImage.jar.
	Γράψτε keytool -genkey -keystore pKeyStore -alias p5geek
	Γράψτε keytool -selfcert -keystore pKeyStore -alias p5geek
	Γράψτε jarsigner -keystore pKeyStore //loadImage//.jar p5geek
	Ανεβάστε το Applet σας

Ο πηγαίος κώδικας για το παράδειγμά μας.
 /**
 How to sign an applet taken from http://wiki.processing.org/index.php/Sign_an_Applet 
 @author Ira Greenberg
 */
 
 /* To run this sketch as an 
    applet, it MUST be signed */
 void setup(){
   size(400, 400);
   PImage img;
   String imgName = selectInput();
   img = requestImage(imgName);
   while (img.width==0) delay(100); // Wait until image is loaded
   image(img, 0, 0);
 }

Παραδείγματα κώδικα

Slide Show με ένα PImage 
 Ας υποθέσουμε ότι έχετε πολλές εικόνες και θέλετε να τις εμφανίσετε σαν slide show,η πρώτη μας σκέψη είναι ότι θα φορτώσουμε όλες τις εικόνες στην setup() και μετά θα τις εμφανίσουμε μέσω της draw(). Όμως αν έχουμε μεγάλου μεγέθους εικόνες αυτό σημαίνει ότι θα χρησιμοποιηθεί πολλή μνήμη ram, καθώς κάθε εικόνα για να εμφανισθεί πρέπει πρώτα να αποσυμπιεστεί.
Ο μόνος τρόπος για να το αποφύγουμε,είναι να φορτώνουμε κάθε εικόνα που θα εμφανιστεί μετά.Μπορούμε να το κάνουμε επειδή αν δεν χρησιμοποιήσουμε την background() η προηγούμενη εικόνα που θα έχει εμφανιστεί θα συνεχίσει να φαίνεται.Με αυτό το τρόπο χρησιμοποιούμε όσο το δυνατόν λιγότερη μνήμη.
Θα υπάρχει βέβαια μια μικρή καθυστέρηση στο applet μας μέχρι να φορτωθεί η επόμενη εικόνα. Αυτό δεν μας πειράζει γιατί όσο φορτώνει η άλλη εικόνα η προηγούμενη θα φαίνεται.
Πηγαίος κώδικας παράδειγμα :
 /**
 @author John Gilbertson
 Correction: for Processing 114 Beta. by ramin
 */
  
  
 PImage img;
 String[] files;
 int timer;
 int nextimg;
 
 void setup() {
   size(400,400);
   files=new String[3]; //some example images.
   files[0]="medium.jpg";
   files[1]="small.jpg";
   files[2]="big.jpg";
  
   nextimg=(nextimg+1)%files.length;
   img=loadImage(files[nextimg]);
   timer=0;
 }
 
 int nextimg=0;
 String[] files;
 PImage img;
 int timer;
 
 void draw() {
   if(timer==0)
   {
     background(0);
     image(img,0,0,width,height);
   }
   else if(timer==1)
   {
     img=loadImage(files[nextimg]);
     nextimg=(nextimg+1)%files.length;
     delay(1000); //this decides how long an image should be displayed
   }
   timer=(timer+1)%2;
 }

Δημιουργία Κυλίνδρου 

 Αυτή ειναι μια συνάρτηση για εναν απλό κύλινδρο. Χρησιμοποιεί το πλάτος και τον αριθμό των πλευρών για να υπολογίσει τα σημεία του κύκλου.
 /**
 cylinder taken from http://wiki.processing.org/index.php/Cylinder 
 @author matt ditton
 */
 void cylinder(float w, float h, int sides)
 {
   float angle;
   float[] x = new float[sides+1];
   float[] z = new float[sides+1];
 
   //get the x and z position on a circle for all the sides
   for(int i=0; i < x.length; i++){
     angle = TWO_PI / (sides) * i;
     x[i] = sin(angle) * w;
     z[i] = cos(angle) * w;
   }
 
   //draw the top of the cylinder
   beginShape(TRIANGLE_FAN);
 
   vertex(0,   -h/2,    0);
 
   for(int i=0; i < x.length; i++){
     vertex(x[i], -h/2, z[i]);
   }
 
   endShape();
   //draw the center of the cylinder
   beginShape(QUAD_STRIP); 
 
   for(int i=0; i < x.length; i++){
     vertex(x[i], -h/2, z[i]);
     vertex(x[i], h/2, z[i]);
   }
   endShape();
   //draw the bottom of the cylinder
   beginShape(TRIANGLE_FAN); 
 
   vertex(0,   h/2,    0);
 
   for(int i=0; i < x.length; i++){
     vertex(x[i], h/2, z[i]);
   }
 
   endShape();
 }

Βραβεία και διακρίσεις 
Το 2005 απονεμήθηκε στους Reas και Fry το αναγνωρισμένου κύρους βραβείο, Golden Nica από την Ars Electronica στην κατηγορία Net Vision, για τη δουλειά τους στο Processing.
Ο Ben Fry κέρδισε το Εθνικό Βραβείο Σχεδίασης 2011 (National Design Award 2011), που του δόθηκε από το Εθνικό Μουσείο Σχεδίασης Smithsonian Cooper-Hewitt στην κατηγορία Διαδραστική σχεδίαση.

Όνομα 
Αρχικά, το processing είχε τη URL διεύθυνση proce55ing.com γιατί το όνομα τομέα “processing” ήταν κατειλημμένο. Τελικά όμως, οι Reas και Fry κατοχύρωσαν τον τομέα. Ενώ το όνομα περιείχε συνδυασμό γραμμάτων και αριθμών, διαβαζόταν κανονικά “processing”. Αλλά, παρόλη την αλλαγή, το processing ακόμα χρησιμοποιεί τον όρο “p5” μερικές φορές, ως συντόμευση. Παραδόξως, χρησιμοποιείται συγκεκριμένα το “p5” και όχι το “p55”.

Παραπομπές

Εξωτερικοί σύνδεσμοι 

 http://www.processing.org/
 http://www.processingjs.org/ 
 http://www.openprocessing.org/
 http://groups.google.com/group/processingjs
 http://www.learningprocessing.com/

Γλώσσες προγραμματισμού