Open Procecing

Γραφικά Υπολογιστών

Φοιτητές

Μπουραντάς Γιώργος (ΑΜ:123903)

Τζίνος Γιώργος (ΑΜ:123896)

Καθηγητής : Πασχάλης Ράπτης

Τι θα δούμε;● Πληροφορίες για το engine της Processing

● Σχήματα

● Κάμερα

● Φωτισμό

● 2D παραδείγματα

● 3D παραδείγματα

Λίγα Λόγια...- To 2001 από τον Casey Reas και τον Benjamin Fry στο MIT

- Μια νέα γλώσσα προγραμματισμού σε Java

- Προγραμματισμός εικόνας , ήχου και animation

- Μη αναγκαία γνώση προχωρημένου προγραμμισμού

- Απλό συντακτικό

- Υποστήριξη αντικειμένων

IDE Περιβάλλον

Κουμπιά χειρισμού του πηγαίου κώδικα

Πλαίσιο εγγραφής πηγαίου κώδικα.

Exception Προγράμματος

Εκτελεί τον κώδικα του προγράμματος.Αν γράφουμε καθαρά σε Java

τότε πρώτα κάνει compile τον κώδικα.

Σταματά την εκτέλεση του προγράμματος.

Φτιάχνει ένα καινούργιο Project.

Ανοίγει ένα πλαίσιο για να ανοίξουμε κάποιο αρχείο στο IDE της

processing.

Αποθηκεύει το προγραμμά μας.

Κάνει export τον πηγαίο κώδικα.Αν γράφουμε Java πρώτα τον κάνει

compile.

Rendering Engines

● Προεπιλεγμένος 2D (αργός και ακριβής)

● P2D (γρήγορος και όχι τόσο ακριβής)

● P3D (γρήγορος και όχι τόσο ακριβής)

● PDF (εξαγωγή γραφικών σε pdf αρχείο)

● Προαιρετικά χρήση OpenGL P2D και P3D

Καρτεσιανό

σύστημα συντεταγμένων

● Τελευταίο ορατό pixel X-1 , Y-1

Βασικές μεθόδοι

του Engine

● Μέθοδος setup

● Μέθοδος draw

● Μέθοδος size

● Μέθοδος redraw

● Μέθοδος loop

● Μέθοδος noLoop

● Μέθοδος frameRate

● Μέθοδος exit

setup()Θυμίζει πολύ την main(String inputArray[]).

Αρχικοποιήσουμε τιμές όπως το μέγεθος της οθόνης , το background χρώμα αλλά και

στο να φορτώσουμε εικόνες , γραμματοσειρές.

size()Πρώτη εντολή στην setup()

Ορίζουμε τον χώρο στον οποίο θα γίνουν τα γραφικά 2D ή 3D

Εκτελείτε επαναληπτικά

Παραμετροι Χ(μήκος) και Υ(ύψος) και ο Renderer ,

Τα Χ και Υ δεν πρέπει να είναι μεταβλητές αλλιώς έχει πρόβλημα στο compile

Μέγιστο μέγεθος της οθόνης μας.

Αν θέλουμε μεγαλύτερο απ την οθόνη , χρήση createGraphics

draw()Εκτελείται μετά την setup() αυτόματα.

Εκτελείται επαναληπτικά

Την καλούμε έμμεσα μέσω τον μεθόδων noLoop(),redraw(),loop() και το πόσο γρήγορα

θέλουμε να καλείται από την frameRate()

redraw()Ενημερώνει ένα flag ώστε να εκτελεστεί ο κώδικας της draw μόνο μια φορά

Δεν συνιστάται για animation

Χρήση loop() και noLoop() για animation

Μέθοδος loop()Αρχίζει η επαναληπτική εκτέλεση της draw()

Μέθοδος noLoop()Σταματά η επαναληπτική εκτέλεση της draw()

Δεν μπορούμε να χειριστούμε events

Μόνος τρόπος για ενημέρωση της οθόνης είναι η redraw() και η loop()

Μέθοδος frameRate()

Το πόσο γρήγορα θέλουμε να καλείται η draw()

Προεπιλεγμένη τιμή 60frames/s

Μεταβλητή συστήματος frameCount

Μέθοδος exit()

Περιμένει μέχρι να εκτελεστή και η τελευταία εντολή της

draw() και μετά τερματίζει το πρόγραμμα

Events Methods

- Πάτημα πλήκτρου :

- void key()

- void keyCode()

- void keyPressed()

- void keyReleased()

- void keyTyped()

- Πάτημα ποντικιού :

- void mouseButton()

- void mouseClicked()

- void mouseDragged()

- void mouseMoved()

- void mousePressed()

- void mouseReleased()

- void mouseWheel()

- translate (x, y, z) :

Η παράμετρος x καθορίζει το πλάτος του σχήματος μας ενώ η παράμετρος y

καθορίζει το ύψος του. Τέλος η παράμετρος z καθορίζει το πόσο κοντά ή αντίστοιχα

μακριά από την οθόνη θα βρίσκεται.

- rotate (value) :

Περιστρέφει ένα σχήμα με βάση το value το οποίο καθορίζει ουσιαστικό την

παράμετρο γωνία. Οι γωνίες πρέπει να καθορίζονται σε ακτίνια (τιμές από 0 έως

TWO_PI), ή μπορούν να μετατραπούν από τις μοίρες σε ακτίνια.

Μετακίνηση & Περιστροφή

Καμερα

- Αρχή - Τέλος λειτουργίας

- beginCamera() - endCamera()

- Μετακίνηση & Τοποθέτηση κάμερας

- camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ,

upX, upY, upZ)

- frustum()

- ortho()

- perspective()

- Εμφάνιση στοιχείων

- printCamera()

- printProjecτion()

Σχήματα 2 διαστάσεων ( 2D ) - 1

- Tετράγωνο - Ορθογώνιο

- Έλλειψη - Κύκλος

Σχήματα 2 διαστάσεων ( 2D ) - 2

- Τρίγωνο

Συνδιαστικά παραδείγματα 2D

- Τετράγωνο το οποίο κινείται στα περιθώρια της οθόνης μας χώρις να

ξεφεύγει από τα όρια της.

Συνδιαστικά παραδείγματα 2D

- Παιχνίδι με μπαλάκι σε γήπεδο

Σχήματα 3 Διαστάσεων( 3D )

- Κύβος

- box(value) :

- Σφαίρα

- sphere(radius)

- sphereDetail(ures, vres)

3D Παράδειγμα

με μέγεθος , φωτισμό , κάμερα και κίνηση.

3D Παράδειγμα

Αποτελείται από τις εξής μεθόδους

setup(),draw(),cameraUpdate() και locationUpdate().

setup()

Στην setup() ορίζουμε με την μέθοδο size() ότι θα

εργαστούμε στον τρισδιάστατο χώρο.

Έπειτα αρχικοποιούμε διάφορες μεταβλήτες της κάμερας και

της κίνησης.

3D Παράδειγμα

draw()

Στην draw δημιουργούμε τον φωτισμό , τον κύβο και την κάμερα.

lights();

boxSize+=increaseValue;

box(boxSize);

Στο τέλος της μεθόδου draw() καλούμε την cameraUpdate() και

locationUpdate() όπου ενημερώνουν την κάμερα.

cameraUpdate();

locationUpdate();

camera(x,y,z,tx,ty,tz,0,1,0);

3D Παράδειγμα

cameraUpdate()1/3

public void cameraUpdate(){

int diffX = mouseX - width/2;

//Η διαφορά της θέσης Χ του ποντικιού απ το πλάτος/2

int diffY = mouseY - width/2;

//Η διαφορά της θέσης Υ του ποντικιού απ το πλάτος/2

//Έλεγχος αν το ποντίκι έφυγε απ την εστίαση του κουτιού

if(abs(diffX) > stillBox){

angle+= diffX/(sensitivity*10);//Παίρνουμε την γωνία

if(angle < 0)

//Όταν γίνετε παραπάνω από 360 μοίρες περιστροφή να μην

προσθέτοι παραπάνω από 360

angle += 360;

else if (angle >= 360)

angle -= 360;

3D Παράδειγμα

cameraUpdate()2/3

float newXComp = cameraDistance * sin(radians(angle));

float newZComp = cameraDistance * cos(radians(angle));

//Παίρνουμε το ημίτονο και το συνημίτονο από την κάμερα τον κύβο

και την θέση του ποντικιού και τα προσθέτουμε στο tx και tz της

κάμερας.

tx = newXComp + x;

tz = -newZComp + z;

}

if (abs(diffY) > stillBox)//Προσθέτουμε στο ty την διαφορά

του mouseΥ - width/2

ty += diffY/(sensitivity/1.5);

}

Κύβος

Δείκτης ποντικιού

Κάμερα

3D Παράδειγμα

cameraUpdate()3/3

3D Παράδειγμα

locationUpdate()

public void locationUpdate(){

//Προσθέτουμε τις αντίστοιχες μεταβλητές ώστε να

μετακινείτε η θέση της κάμερας

z += moveZ;

tz += moveZ;

x += moveX;

tx += moveX;

}

3D Παράδειγμα

keyPressed()

public void keyPressed(){

if (keyCode=='=')//Ορίζουμε την μεταβλητή increaseValue ώστε να προσθεθέι στην

draw στην μεταβλητή boxSize.

increaseValue = 10;

if (keyCode=='-')

increaseValue = -10;

if(keyCode == UP || key == 'w'){

moveZ = -10;}

else if(keyCode == DOWN || key == 's'){

moveZ = 10;}

else if(keyCode == LEFT || key == 'a'){

moveX = -10;

}

else if(keyCode == RIGHT || key == 'd'){

moveX = 10;

}

//Ορίζουμε τιμές στα moveZ και moveX ώστε να προσθέσει στην αντίστοιχη τιμή στην

μέθοδο locationUpdate()

}

Ευχαριστούμε

!

Ερωτήσεις ;Ο κώδικας βρίσκεται online στο github:

◇ https://github.com/gbourant

◇ https://github.com/gtzinos/Open-Processing-Projects