Περιεχόµενα ΕΠΛ 422: Συστήµατα Πολυµέσων Γραφικά Υπολογιστών Γραφικά και Εικόνα Μοντέλα γραφικών Επεξεργασία Γραφικών Τύποι (format) γραφικών Γραφικά και WWW Βιβλιογραφία Καγιάφας [2000]: Κεφάλαιο 5, [link] Vaughan [2004]: Chapter 6, pp. 133-139 Chapman [2004]: Chapter 3, Chapter 4 Hillman [1997]: Chapter 5 Γραφικά και Εικόνα Οι εικόνες δεν είναι παρά πίνακες από pixels: εν υπάρχει καµία πληροφορία για τη δοµή των απεικονιζόµενων αντικειµένων και κατά συνέπεια δεν µπορούµε να επέµβουµε στο περιεχόµενο της. Τα προγράµµατα επεξεργασίας εικόνας προσφέρουν χειρισµούς όπως: αλλαγή χρώµατος κάποιων pixels µε διάφορα γεωµετρικά εργαλεία, αποκοπή, αντιγραφή και επικόλληση οµάδων pixels, υπέρθεση κειµένου, εφαρµογή φίλτρων (π.χ. όξυνση των ακµών, αλλαγή των χρωµάτων...), εφαρµογή γεωµετρικών µετασχηµατισµών (π.χ. περιστροφή) και τέλος µετατροπή από ένα format εικόνας σε άλλο. Όλες αυτές οι ενέργειες στην ουσία αφορούν τα pixels. Ακόµα και σε περιπτώσεις που το αποτέλεσµα έχει αλλαγµένο σηµασιολογικό περιεχόµενο (π.χ. µοντάζ που αλλάζει το πρόσωπο ενός ατόµου της φωτογραφίας), η επέµβαση γίνεται µε εργαλεία που δε αναγνωρίζουν δοµή στην εικόνα. Για αυτό και τέτοιοι χειρισµοί γίνονται δύσκολα και πάντα µε τη µεσολάβηση του ανθρώπου ο οποίος αντιλαµβάνεται πολύ εύκολα τα αντικείµενα µιας εικόνας.
Γραφικά και Εικόνα (ΙΙ) Σε αυτό ακριβώς το σηµείο βρίσκεται και διαφορά των γραφικών από την εικόνα: Τα γραφικά, περιέχουν πληροφορία που αφορά τη δοµή των αντικειµένων. Μια εικόνα γραφικών δεν είναι ένας πίνακας pixels αλλά µια συλλογή από αντικείµενα. Συνήθως τα γραφικά δηµιουργούνται εξ αρχής µε τη βοήθεια του υπολογιστή. Πιο σπάνια, προέρχονται από εικόνες από τις οποίες εξήχθησαν αντικείµενα µε χρήση τεχνικών αναγνώρισης προτύπων. Γραφικά και Εικόνα => Σχέση γραφικών, επεξεργασίας εικόνας και υπολογιστικής όρασης Τα γραφικά περιγράφουν τα αντικείµενα σε µια σκηνή µε βάση το σηµασιολογικό τους επίπεδο: Για την απεικόνιση γραφικών στην οθόνη ενός υπολογιστή χρειάζεται η µετατροπή σους σε εικόνες (απεικόνιση σε επίπεδο pixel) Για την εκτύπωση τους επειδή µπορούν να χρησιµοποιήσουν τις γλώσσες απεικόνισης σελίδας (π.χ. PostScript) δεν απαιτείται η µετατροπή τους σε εικόνες Η εικόνα απεικονίζει τα περιεχόµενα της σκηνής σε µικροσκοπικό επίπεδο και η συσχέτιση των εικόνων µε την απεικόνιση τους στην οθόνη είναι άµεση Αναγνώριση σηµασιολογικών χαρακτηριστικών (π.χ. αντικειµένων) από µια εικόνα επιτυγχάνεται µε τεχνικής υπολογιστικής όρασης Γραφικά και Εικόνα => Χαρτογραφική ή διανυσµατική απεικόνιση Γραφικά και Εικόνα => Χαρτογραφική ή διανυσµατική απεικόνιση (ΙΙ); ιανυσµατική απεικόνιση Χαρτογραφική απεικόνιση Χαρτογραφική απεικόνιση (Bitmap): Πίνακας δεδοµένων που περιγράφει τα χαρακτηριστικά όλων των pixels από τα οποία απαρτίζεται µια εικόνα Γραφικά (Vector graphics) Ένα σύνολο από περιγραφές των αντικειµένων που περιέχει µια εικόνα (γραµµές, παραλληλόγραµµα, οβάλ, κείµενα, πολύγωνα, κλπ.) Παράδειγµα (αριστερά): (RECT 0,0,200,200,RED,YELLOW) Καλύτερο scaling Αποθήκευση 30 Bytes για το παραπάνω παράδειγµα vector graphic 5 Kbytes (200x200/8) για το ίδιο σχήµα µε 1-color depth per pixel σε bitmap µορφή (χωρίς συµπίεση) 40 Kbytes (200x200x8/8) για το ίδιο σχήµα µε 8-color depth per pixel σε bitmap µορφή (χωρίς συµπίεση)
Γραφικά και Εικόνα => Χαρτογραφική ή διανυσµατική απεικόνιση => Γραφικά και Εικόνα => Χαρτογραφική ή διανυσµατική απεικόνιση => Απεικόνιση στην οθόνη Χαρτογραφικές εικόνες: Πίνακες µε τις τιµές φωτεινότητας των pixels H απεικόνιση στη οθόνη γίνεται µε απευθείας ταύτιση των τιµών φωτεινότητας του πίνακα στις αντίστοιχες θέσεις των pixel της οθόνης Πιθανόν να απαιτείται κλιµάκωση (scaling) ή ψαλίδισµα (clipping) Γραφικά: Μαθηµατική περιγραφή καµπυλών και σχηµάτων Η απεικόνιση προϋποθέτει τον υπολογισµό των τιµών των pixels µε βάση τη µαθηµατική περιγραφή Εικόνα: Απαιτήσεις µνήµης Κάθε εικόνα διαστάσεων W x H pixels, µε βάθος χρώµατος C bytes per pixel έχει χωρητικότητα W H C bytes Γραφικά: Ο αποθηκευτικός χώρος εξαρτάται από την πολυπλοκότητα της σκηνής (πλήθος σχηµάτων, καµπυλών, κλπ.) Συνήθως τα γραφικά απαιτούν µικρότερο αποθηκευτικό χώρο από ότι οι χαρτογραφικές εικόνες Παράδειγµα: Τετράγωνο πλευράς 128 pixels µε πλάτος γραµµής περιφέρειας 20 pixels χρώµατος µπλε και εσωτερικό χρώµατος κόκκινου Χαρτογραφική εικόνα: 128x128x3 = 48kbytes ιανυσµατική περιγραφή µέσω της SVG (Scalable Vector Graphics): <path fill="#f8130d" stroke="#1e338b stroke-width="20" d="m118,118h10v10h108v118z"/> 86 bytes (+ 198 bytes SVG overhead) Γραφικά και Εικόνα => Χαρτογραφική ή διανυσµατική απεικόνιση => Γραφικά και Εικόνα => Χαρτογραφική ή διανυσµατική απεικόνιση => Επεξεργασία Γραφικά: Σχεδιαστικά προγράµµατα (CorelDraw, Visio, κλπ) Επιλογή µεµονωµένων αντικειµένων (shapes, paths) Μετασχηµατισµός µεγέθους, θέσης, γωνίας, µορφής Αλλαγή ιδιοτήτων: πινελιές (stroke) και συµπλήρωση µε χρώµα (fill) Εικόνα: Προγράµµατα επεξεργασίας εικόνας (Photoshop, LviewPro κλπ) Επιλογή περιοχών από pixels Εφαρµογή φίλτρων ή ψηφιακών εφφέ Γραφικά Κλιµάκωση (scaling) Η κλίµακωση είναι απλά η εφαρµογή µιας µαθηµατικής συνάρτησης επί της περιγραφής (πριν τη διαδικασία απεικόνισης απόδοσης στην οθόνη) Οι καµπύλες και οι γραµµένες παραµένουν οµαλές σε όλα τα µεγέθη Εικόνα: Η κλιµάκωση επιτυγχάνεται µε παρεµβολή στη τιµή των pixels Αρκετά σύνθετοι και πολύπλοκοι αλγόριθµοι Συνήθως προκαλεί απώλεια ποιότητας (θόλωµα, φαινόµενο αναδίπλωσης)
Μοντέλα Γραφικών Μοντέλα Γραφικών (ΙΙ) Μοντέλα γραφικών = τρόπος αναπαράστασης γραφικών αντικειµένων Γεωµετρικά Μοντέλα (Geometric Models): Υπάρχει µια συλλογή δοµικών σχηµάτων (geometric primitives) είτε 2- διάστατων είτε 3-διάστατων όπως ευθείες, κύκλοι, ελλείψεις, σφαίρες, κώνοι. Μετακινώντας, συνδυάζοντας και µετασχηµατίζοντας (περιστροφή, µεγέθυνση...) τα δοµικά αυτά σχήµατα µε κατάλληλο τρόπο, συντίθεται η ζητούµενη εικόνα γραφικών. Στερεά Μοντέλα (Solid Models) Ειδικές τεχνικές έχουν αναπτυχθεί για την µοντελοποίηση στερεών. Στην Κατασκευαστική Γεωµετρία Στερεών (Constructive Solid Geometry) τα στερεά προκύπτουν ως συνδυασµός ένωσης, διαφοράς και τοµής κάποιων βασικών στερεών. Μια άλλη µέθοδος είναι η περιστροφή 2-διάστατων καµπυλών. Φυσικά Μοντέλα (Physically Based Models) Αληθοφανείς εικόνες µπορούν να δηµιουργηθούν από φυσικά αριθµητικά µοντέλα που περιγράφουν τις δυνάµεις, πιέσεις και καταπονήσεις των αντικειµένων. Εµπειρικά Μοντέλα (Empirical Models) Πολλά φυσικά φαινόµενα είναι τόσο πολύπλοκα που είναι δύσκολο να περιγραφούν µε κάποιους από τους προηγούµενους τρόπους. Σε αυτές τις περιπτώσεις, εφαρµόζονται τεχνικές που στηρίζονται στην παρατήρηση και την εµπειρία. Για παράδειγµα, fractals χρησιµοποιούνται για τη µοντελοποίηση βουνών και άλλων στοιχείων της επιφάνειας της γης και σύνολα σωµατιδίων που περιγράφονται στατιστικά χρησιµοποιούνται για την δηµιουργία φωτιάς και εκρήξεων. Σχεδιαστικά Μοντέλα (Drawing Models) Σε αυτήν την κατηγορία, θεωρείται ότι υπάρχει µια νοητή κινητή σχεδιαστική κεφαλή. Περιγράφοντας τις κινήσεις και τις ενέργειες αυτής της κεφαλής, απεικονίζεται η εικόνα. Η PostScript ακολουθεί αυτή τη φιλοσοφία. Μοντέλα Γραφικών => Πρότυπα γεωµετρικών γραφικών Έχουν προταθεί κάποια πρότυπα για γεωµετρικά µοντέλα γραφικών: GKS (Graphics Kernel System, ISO 1985), Πρόκειται για ένα από τα πρώτα 3-διάστατα πρότυπα γραφικών. PHIGS (Programmer s Hierarchical Interactive Graphic System, ISO 1989a) Παρουσιάζει µεγαλύτερη ποικιλία δοµικών σχηµάτων Η επέκταση του το PEX (PHIGS Extensions to X) χρησιµοποιείται στα X Windows. OpenGL (OpenGL Architecture Review board, 1993). Αποτελεί τη µεταφέρσιµη (portable) έκδοση βιβλιοθηκών που χρησιµοποιεί η Silicon Graphics. Επεξεργασία Γραφικών Στοιχειώδης αναµόρφωση Καθορισµός των βασικών παραµέτρων που ορίζουν ένα γεωµετρικό αντικείµενο (είδος στοιχείου, συντεταγµένες κορυφών, κλπ.) οµικές παρεµβάσεις Εισαγωγή, αφαίρεση και µετακίνηση αντικειµένων Πράξεις σε οµάδες αντικειµένων για τον καθορισµό της διάταξής τους στο χώρο Σκίαση / Φωτεινότητα Καθορισµός χρώµατος Επίδραση φωτός στην παρουσίαση ενός αντικειµένου (αντανάκλαση, πολλαπλές πηγές φωτός, διάχυση φωτός) Χαρτογράφηση Αντιστοίχηση µιας εικόνας στην επιφάνεια ενός αντικειµένου. Η χαρτογράφηση υφής (texture mapping) δίνει σε γεωµετρικά αντικείµενα την υφή κάποιου υλικού (δίνονται στοιχεία όπως αυλάκια, ραβδώσεις, εξογκώµατα, κλπ) Απόδοση σε εικόνα Rendering (µετατροπή του γραφικού µοντέλου σε µια εικόνα µε την επιθυµητή ανάλυση, βάθος χρώµατος και µέγεθος)
Επεξεργασία Γραφικών => Επεξεργασία Γραφικών => Συντεταγµένες και ιανύσµατα Ηθέση κάθε pixels καθορίζεται από τον αριθµό της γραµµής και της στήλης (r, c) -(όπως και στις χαρτογραφικές εικόνες) Επέκταση σε καρτεσιανές συντεταγµένες: Κάθε σηµείο του επιπέδου ορίζεται βάση της οριζόντιας και κάθετης απόστασης από την αρχή των αξόνων: P = (x, y) Η µετατόπιση καθορίζεται από την κίνηση στις κατευθύνσεις x και y Η µετατόπιση είναι επίσης ένα ζεύγος αριθµών P2 - P1 = (x2-x1, y2-y1), µετατόπιση από το σηµείο P1 στο P2 Απόδοση - Απεικόνιση (Rendering) Αναπαράσταση σχηµάτων γραµµών και καµπυλών µε βάση τις παραµέτρους των εξισώσεων ορισµού τους: Για τη γραµµή y = mx + c, αποθηκεύονται οι τιµές των m και c (ή οι συντεταγµένες της αρχής και του τέλους του ευθυγράµµου τµήµατος) Υπολογισµός ποια pixels πρέπει να καθοριστούν για να ζωγραφίσουµε τη γραµµή Γενικά η διαδικασία µπορεί να δηµιουργήσει «οδόντωση» ('jaggies ): Οι συντεταγµένες των pixels είναι ακέραιοι αριθµοί ενώ στις εξισώσεις χρησιµοποιούµε πραγµατικούς αριθµούς Η διαδικασία της απόδοσης απεικόνισης είναι µια διαδικασία δειγµατοληψίας και ανακατασκευής: Συνεχείς γραµµές σε αφαιρετικό επίπεδο πρέπει να απεικονιστούν από διακριτά pixels πεπερασµένου µεγέθους Η οδόντωση είναι ένα παράδειγµα του φαινοµένου της αναδίπλωσης (aliasing) Το φαινόµενο µπορεί να µετριαστεί µε χρήση αποχρώσεων του χρώµατος των γραµµών και µετατροπή της φωτεινότητας ανάλογα µε το βαθµό κάλυψης ενός pixel από τη γραµµή / καµπύλη Επεξεργασία Γραφικών => Επεξεργασία Γραφικών => Σχήµατα και καµπύλες Bezier Τα σχεδιαστικά προγράµµατα και οι γλώσσες γραφικών παρέχουν ένα βασικό ρεπερτόριο από σχήµατα και καµπύλες οι οποίες µπορούν να αναπαρασταθούν εύκολα από µαθηµατικές εξισώσεις: Ορθογώνια και τετράγωνα (στρογγυλευµένες γωνίες ή µη) Κύκλοι και ελλείψεις Ευθείες γραµµές, πολύγωνα Εξοµαλυσµένες καµπύλες(smooth curves) - Bézier Οι καµπύλες Bézier καθορίζονται από τέσσερα σηµεία: 2 τελικά σηµεία (P1, P4) και 2 σηµεία κατεύθυνσης (P2, P3) Η τροχιά της καµπύλης προσδιορίζεται από το µήκος και την διεύθυνση των ευθυγράµµων τµηµάτων που ενώνουν τα τελικά σηµεία και τα σηµεία κατεύθυνσης Μονοπάτια (paths) Μονοπάτια ή διαδροµές ονοµάζουµε τον συνδυασµό καµπυλών Bézier για τη δηµιουργία πιο σύνθετων µορφών καµπυλών Αν δύο καµπύλες ενώνονται σε κάποιο σηµείο µε τέτοιο τρόπο ώστε οι γραµµές κατεύθυνσης τους στο σηµείο αυτό δηµιουργούν µια ενιαία γραµµή τότε η ένωση ονοµάζεται οµαλή Τα επέκταση γραµµών µέσω dragging στα σχεδιαστικά πακέτα λογισµικά λειτουργεί µε τον παραπάνω τρόπο
Επεξεργασία Γραφικών => Πινελιές και συµπλήρωση (stroke & fill) Οι πινελιές ή κτυπήµατα (stroke) χρησιµοποιούνται για να κάνουν τις διαδροµές (paths) ορατές: Καθορίζεται το πάχος γραµµής αλλά και το χρώµα Η συµπλήρωση αναφέρεται στο σχηµατισµό χρώµατος σε επιφάνειες αντικειµένων: Μπορεί να είναι ένα ενιαίο χρώµα Μπορεί να είναι διαβαθµίσεις χρωµάτων (colour gradient) Μπορεί να είναι ένα πρότυπο υφής (pattern) Οι διαβαθµίσεις µπορεί να είναι γραµµικές (linear) ή ακτινικές (radial) Επεξεργασία Γραφικών => Μετασχηµατισµοί Με τον όρο µετασχηµατισµοί αναφερόµαστε στο χειρισµό των διανυσµατικών αντικειµένων µε συγκεκριµένους τρόπους οι οποίοι µεταβάλλουν τις παραµέτρους τους: Μετατόπιση (translation) γραµµική κίνηση Κλιµάκωση (scaling) αλλαγή µεγέθους Αντικατοπτρισµός (reflection) σχηµατισµός ειδώλου Περιστροφή (rotation) Κύρτωση (shearing - skewing) Οι µετασχηµατισµοί µπορεί να εφαρµοστούν µε απευθείας χειρισµό των αντικειµένων µέσω συγκεκριµένων εργαλείων ή αριθµητικά (εφαρµογή µαθηµατικών συναρτήσεων στις παραµέτρους διαλογικά) Στην τελευταία περίπτωση ένας γεωµετρικός µετασχηµατισµός απεικονίζει κάθε σηµείο Α (x A, y A ) του επιπέδου σε ένα άλλο σηµείο Β (x B, y B ) µέσω µίας συνάρτησης Τ έτσι ώστε: Τ(x A, y A ) = (x B, y B ) ή πιο συνοπτικά: Τ(Α) = Β Επεξεργασία Γραφικών => Μετασχηµατισµοί => Επεξεργασία Γραφικών => Μετασχηµατισµοί => Οµοπαραλληλικοί (affine) µετασχηµατισµοί Οι µετασχηµατισµοί αυτοί έχουν µια αρκετά απλή µορφή. Αν ένας τέτοιος µετασχηµατισµός απεικονίζει το σηµείο Α που αναφέραµε προηγουµένως σε ένα σηµείο Β τότε οι συντεταγµένες των δύο σηµείων θα συνδέονται µε τους τύπους: x B = a χ Α + c y A + l x y B = b χ Α + d y A + l y όπου a, b, c, d, lx, ly σταθερές και a d διάφορο του b c. Η µορφή που γράψαµε µπορεί να εκφραστεί σε µορφή πινάκων ως: (x B, y B ) = (x A, y A ) M + (l x, l y ) όπου ο Μ είναι ένας 2x2 πίνακας µε τη µορφή: a M = c c d Μετατόπιση Η µετατόπιση ενός σηµείου σε ένα γεωµετρικό µετασχηµατισµό περιγράφεται από τις παραµέτρους (l x, l y ). Στον συγκεκριµένο µετασχηµατισµό ο πίνακας Μ έχει τη µορφή: 1 0 M = 0 1 Το αποτέλεσµα της εφαρµογής ενός τέτοιου µετασχηµατισµού σε ένα σηµείο Α είναι η µετατόπιση του A κατά l x και κατά l y αντίστοιχα στους άξονες x και y.
Επεξεργασία Γραφικών => Μετασχηµατισµοί => Επεξεργασία Γραφικών => Μετασχηµατισµοί => Αλλαγή µεγέθους Η µεγέθυνση / σµίκρυνση ενός σχήµατος κατά S x και S y αντίστοιχα στους άξονες x και y επιτυγχάνεται µε τον πολλαπλασιασµό των αντίστοιχων συντεταγµένων κάθε σηµείου του µε τα δύο αυτά ποσοστά µεγέθυνσης / σµίκρυνσης. Για την υλοποίηση της παραπάνω λειτουργίας ο πίνακας Μ έχει τη µορφή: Sx 0 M = 0 S y και το (l x, l y ) έχει τη µορφή (0, 0). Εδώ θα πρέπει να σηµειώσουµε ότι αν κάποιο από τα S x, S y είναι αρνητικό τότε ο συγκεκριµένος µετασχηµατισµός πέρα από τη µεταβολή των διαστάσεων του σχήµατος το µετατοπίζει στο συµµετρικό του σχήµατος κατά τους άξονες y και x αντίστοιχα. Περιστροφή Στη περιστροφή ενός σηµείου κατά γωνία θ ως προς το κέντρο των αξόνων του συστήµατος συντεταγµένων ο πίνακας Μ έχει τη µορφή: cos( θ ) M = sin( θ ) sin( θ ) cos( θ ) και το (lx, ly) έχει τη µορφή (0, 0). Επεξεργασία Γραφικών => Μετασχηµατισµοί => Κύρτωση Η κύρτωση περιλαµβάνει τη µεταβολή των συντεταγµένων στον άξονα των x ενός σηµείου κατά ένα ποσό που είναι ανάλογο της συντεταγµένης του ίδιου σηµείου κατά τον άξονα των y. Ένα παράδειγµα ενός τέτοιου µετασχηµατισµού αποτελεί η µετατροπή ορθής γραφής σε πλάγια (italics). Κατά το µετασχηµατισµό αυτό η γενική µορφή του πίνακα Μ είναι: 1 M = h g 1 και το (lx, ly) έχει τη µορφή (0, 0). Τύποι (format) γραφικών Τύποι αρχείων: ιαφορετικοί τρόποι κωδικοποίησης των δεδοµένων ιαφορετικές ποσότητες συµπληρωµατικών δεδοµένων (overhead) SVG (Scalable Vector Graphics) Αποτελεί πρότυπο του W3C SWF (Flash) Χρησιµοποιείται κυρίως για κινούµενα γραφικά (animation) αλλά µπορεί να χρησιµοποιηθεί και για ακίνητα γραφικά. Αποτελεί στην ουσία de facto standard EPS (Encapsulated PostScript) Χρησιµοποιείται κυρίως για την εκτύπωση Η χρήση του είναι µειούµενη καθώς επισκιάζεται από το PDF
Γραφικά και WWW Τα γραφικά είναι: Συµπαγείς αναπαραστάσεις - απαιτούν µικρό χώρο αποθήκευσης Κλιµακώσιµα (Scalable) Ανεξάρτητα της ανάλυσης των απεικονιστικών συσκευών εξόδου (Resolution-independent) Εποµένως είναι ελκυστικά για χρήση σε πολυµεσικές εφαρµογές. Εντούτοις δεν είναι ευρέως διαδεδοµένα στο WWW Η καθιέρωση του SVG standard και η αυξανόµενη χρήση του Flash θα οδηγήσουν σίγουρα σε περισσότερο εκτεταµένη χρήση των γραφικών στο µέλλον.