open processing ( java library )
TRANSCRIPT
![Page 1: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/1.jpg)
Open Procecing
![Page 2: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/2.jpg)
Γραφικά Υπολογιστών
Φοιτητές
Μπουραντάς Γιώργος (ΑΜ:123903)
Τζίνος Γιώργος (ΑΜ:123896)
Καθηγητής : Πασχάλης Ράπτης
![Page 3: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/3.jpg)
Τι θα δούμε;● Πληροφορίες για το engine της Processing
● Σχήματα
● Κάμερα
● Φωτισμό
● 2D παραδείγματα
● 3D παραδείγματα
![Page 4: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/4.jpg)
Λίγα Λόγια...- To 2001 από τον Casey Reas και τον Benjamin Fry στο MIT
- Μια νέα γλώσσα προγραμματισμού σε Java
- Προγραμματισμός εικόνας , ήχου και animation
- Μη αναγκαία γνώση προχωρημένου προγραμμισμού
- Απλό συντακτικό
- Υποστήριξη αντικειμένων
![Page 5: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/5.jpg)
IDE Περιβάλλον
Κουμπιά χειρισμού του πηγαίου κώδικα
Πλαίσιο εγγραφής πηγαίου κώδικα.
Exception Προγράμματος
Εκτελεί τον κώδικα του προγράμματος.Αν γράφουμε καθαρά σε Java
τότε πρώτα κάνει compile τον κώδικα.
Σταματά την εκτέλεση του προγράμματος.
Φτιάχνει ένα καινούργιο Project.
Ανοίγει ένα πλαίσιο για να ανοίξουμε κάποιο αρχείο στο IDE της
processing.
Αποθηκεύει το προγραμμά μας.
Κάνει export τον πηγαίο κώδικα.Αν γράφουμε Java πρώτα τον κάνει
compile.
![Page 6: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/6.jpg)
Rendering Engines
● Προεπιλεγμένος 2D (αργός και ακριβής)
● P2D (γρήγορος και όχι τόσο ακριβής)
● P3D (γρήγορος και όχι τόσο ακριβής)
● PDF (εξαγωγή γραφικών σε pdf αρχείο)
● Προαιρετικά χρήση OpenGL P2D και P3D
![Page 7: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/7.jpg)
Καρτεσιανό
σύστημα συντεταγμένων
● Τελευταίο ορατό pixel X-1 , Y-1
![Page 8: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/8.jpg)
Βασικές μεθόδοι
του Engine
● Μέθοδος setup
● Μέθοδος draw
● Μέθοδος size
● Μέθοδος redraw
● Μέθοδος loop
● Μέθοδος noLoop
● Μέθοδος frameRate
● Μέθοδος exit
![Page 9: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/9.jpg)
setup()Θυμίζει πολύ την main(String inputArray[]).
Αρχικοποιήσουμε τιμές όπως το μέγεθος της οθόνης , το background χρώμα αλλά και
στο να φορτώσουμε εικόνες , γραμματοσειρές.
size()Πρώτη εντολή στην setup()
Ορίζουμε τον χώρο στον οποίο θα γίνουν τα γραφικά 2D ή 3D
Εκτελείτε επαναληπτικά
Παραμετροι Χ(μήκος) και Υ(ύψος) και ο Renderer ,
Τα Χ και Υ δεν πρέπει να είναι μεταβλητές αλλιώς έχει πρόβλημα στο compile
Μέγιστο μέγεθος της οθόνης μας.
Αν θέλουμε μεγαλύτερο απ την οθόνη , χρήση createGraphics
![Page 10: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/10.jpg)
draw()Εκτελείται μετά την setup() αυτόματα.
Εκτελείται επαναληπτικά
Την καλούμε έμμεσα μέσω τον μεθόδων noLoop(),redraw(),loop() και το πόσο γρήγορα
θέλουμε να καλείται από την frameRate()
redraw()Ενημερώνει ένα flag ώστε να εκτελεστεί ο κώδικας της draw μόνο μια φορά
Δεν συνιστάται για animation
Χρήση loop() και noLoop() για animation
![Page 11: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/11.jpg)
Μέθοδος loop()Αρχίζει η επαναληπτική εκτέλεση της draw()
Μέθοδος noLoop()Σταματά η επαναληπτική εκτέλεση της draw()
Δεν μπορούμε να χειριστούμε events
Μόνος τρόπος για ενημέρωση της οθόνης είναι η redraw() και η loop()
![Page 12: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/12.jpg)
Μέθοδος frameRate()
Το πόσο γρήγορα θέλουμε να καλείται η draw()
Προεπιλεγμένη τιμή 60frames/s
Μεταβλητή συστήματος frameCount
Μέθοδος exit()
Περιμένει μέχρι να εκτελεστή και η τελευταία εντολή της
draw() και μετά τερματίζει το πρόγραμμα
![Page 13: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/13.jpg)
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()
![Page 14: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/14.jpg)
- translate (x, y, z) :
Η παράμετρος x καθορίζει το πλάτος του σχήματος μας ενώ η παράμετρος y
καθορίζει το ύψος του. Τέλος η παράμετρος z καθορίζει το πόσο κοντά ή αντίστοιχα
μακριά από την οθόνη θα βρίσκεται.
- rotate (value) :
Περιστρέφει ένα σχήμα με βάση το value το οποίο καθορίζει ουσιαστικό την
παράμετρο γωνία. Οι γωνίες πρέπει να καθορίζονται σε ακτίνια (τιμές από 0 έως
TWO_PI), ή μπορούν να μετατραπούν από τις μοίρες σε ακτίνια.
Μετακίνηση & Περιστροφή
![Page 15: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/15.jpg)
Καμερα
- Αρχή - Τέλος λειτουργίας
- beginCamera() - endCamera()
- Μετακίνηση & Τοποθέτηση κάμερας
- camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ,
upX, upY, upZ)
- frustum()
- ortho()
- perspective()
- Εμφάνιση στοιχείων
- printCamera()
- printProjecτion()
![Page 16: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/16.jpg)
Σχήματα 2 διαστάσεων ( 2D ) - 1
- Tετράγωνο - Ορθογώνιο
- Έλλειψη - Κύκλος
![Page 17: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/17.jpg)
Σχήματα 2 διαστάσεων ( 2D ) - 2
- Τρίγωνο
![Page 18: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/18.jpg)
Συνδιαστικά παραδείγματα 2D
- Τετράγωνο το οποίο κινείται στα περιθώρια της οθόνης μας χώρις να
ξεφεύγει από τα όρια της.
![Page 19: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/19.jpg)
Συνδιαστικά παραδείγματα 2D
- Παιχνίδι με μπαλάκι σε γήπεδο
![Page 20: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/20.jpg)
Σχήματα 3 Διαστάσεων( 3D )
- Κύβος
- box(value) :
- Σφαίρα
- sphere(radius)
- sphereDetail(ures, vres)
![Page 21: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/21.jpg)
3D Παράδειγμα
με μέγεθος , φωτισμό , κάμερα και κίνηση.
![Page 22: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/22.jpg)
3D Παράδειγμα
Αποτελείται από τις εξής μεθόδους
setup(),draw(),cameraUpdate() και locationUpdate().
setup()
Στην setup() ορίζουμε με την μέθοδο size() ότι θα
εργαστούμε στον τρισδιάστατο χώρο.
Έπειτα αρχικοποιούμε διάφορες μεταβλήτες της κάμερας και
της κίνησης.
![Page 23: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/23.jpg)
3D Παράδειγμα
draw()
Στην draw δημιουργούμε τον φωτισμό , τον κύβο και την κάμερα.
lights();
boxSize+=increaseValue;
box(boxSize);
Στο τέλος της μεθόδου draw() καλούμε την cameraUpdate() και
locationUpdate() όπου ενημερώνουν την κάμερα.
cameraUpdate();
locationUpdate();
camera(x,y,z,tx,ty,tz,0,1,0);
![Page 24: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/24.jpg)
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;
![Page 25: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/25.jpg)
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);
}
![Page 26: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/26.jpg)
Κύβος
Δείκτης ποντικιού
Κάμερα
3D Παράδειγμα
cameraUpdate()3/3
![Page 27: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/27.jpg)
3D Παράδειγμα
locationUpdate()
public void locationUpdate(){
//Προσθέτουμε τις αντίστοιχες μεταβλητές ώστε να
μετακινείτε η θέση της κάμερας
z += moveZ;
tz += moveZ;
x += moveX;
tx += moveX;
}
![Page 28: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/28.jpg)
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()
}
![Page 29: Open Processing ( Java Library )](https://reader030.vdocuments.site/reader030/viewer/2022021418/5881bdba1a28abdd268b474b/html5/thumbnails/29.jpg)
Ευχαριστούμε
!
Ερωτήσεις ;Ο κώδικας βρίσκεται online στο github:
◇ https://github.com/gbourant
◇ https://github.com/gtzinos/Open-Processing-Projects