Γραφικά Περιβάλλοντα

Transcript

1 Γραφικά Περιβάλλοντα (Standard Drawing) Διδάσκοντες: Νικόλας Νικολάου Εαρινό Εξάµηνο 2013/14 Τι θα δούµε σήµερα; Αναπαραγωγή γραφικών µε την χρήση της βιβλιοθήκης StdDraw 1

2 StdDraw: Βιβλιοθήκη για την παρουσίαση αποτελεσµάτων µε γραφικό τρόπο public class StdDraw void line (double x0, double y0, double x1, double y1) void point (double x, double y) void text (double x, double y, String s) void circle (double x, double y, double r) void filledcircle (double x, double y, double r) void square (double x, double y, double r) void filledsquare (double x, double y, double r) void polygon (double[] x, double[] y) void filledpolygon (double[] x, double[] y) void setxscale (double x0, double x1) reset x range to (x 0, x 1 ) void setyscale (double y0, double y1) reset y range to (y 0, y 1 ) void setpenradius (double r) set pen radius to r void setpencolor (Color c) set pen color to c void setfont (Font f) set text font to f void setcanvassize (int w, int h) set canvas to w-by-h window Συνέχεια Βιβλιοθήκης StdDraw public class StdDraw void clear (Color c) clear the canvas; color it c void show (int dt) show all; pause dt milliseconds void save (String filename) save to a.jpg or w.png file 2

3 Standard Draw Standard drawing. Υπάρχει η βιβλιοθήκη StdDraw για γραφικά, η οποία µπορεί να χρησιµοποιηθεί κατεβάζοντας το αρχείο StdDraw.java και αποθηκεύοντας το στο φάκελο εργασίας (working directory) public class Triangle { double t = Math.sqrt(3.0) / 2.0; StdDraw.line(0.0, 0.0, 1.0, 0.0); StdDraw.line(1.0, 0.0, 0.5, t); StdDraw.line(0.5, t, 0.0, 0.0); StdDraw.point(0.5, t/3.0); (½, ½ 3) % java Triangle (0, 0) (1, 0) Οπτική Παρουσίαση Δεδοµένων (Data Visualization) Φίλτρο σχεδιασµού (Plot filter): Διαβάζουµε µια ακολουθία συντεταγµένων (x, y) από τη standard είσοδο, και σχεδιάζουµε τα σηµεία χρησιµοποιώντας standard drawing. public class PlotFilter { double xmin = StdIn.readDouble(); double ymin = StdIn.readDouble(); double xmax = StdIn.readDouble(); double ymax = StdIn.readDouble(); StdDraw.setXscale(xmin, xmax); StdDraw.setYscale(ymin, ymax); rescale coordinate system while (!StdIn.isEmpty()) { double x = StdIn.readDouble(); double y = StdIn.readDouble(); StdDraw.point(x, y); read in points, and plot them 3

4 Οπτική Παρουσίαση Δεδοµένων % more < USA.txt bounding box coordinates of 13,509 US cities % java PlotFilter < USA.txt Σχεδιάζοντας Μαθηµατικές Συναρτήσεις double[] a = new double[n+1]; for (int i = 0; i <= N; i++) a[i] = Math.sin(4*Math.PI*i/N) + Math.sin(20*Math.PI*i/N); StdDraw.setXscale(0, N); StdDraw.setYscale(-2.0, +2.0); for (int i = 0; i < N; i++) StdDraw.line(i, a[i], i+1, a[i+1]); y = sin 4x + sin 20x 4

5 Το Παιγνίδι του Χάους Το Παιγνίδι του Χάους (Chaos Game): Παίζεται σε ένα ισόπλευρο τρίγωνο µε κορυφές R, G, B. Αρχίζουµε από την κορυφή R Επαναλαµβάνουµε τα ακόλουθα N φορές: Επιλέγουµε τυχαία µια κορυφή Μετακινούµαστε στο µέσο της απόστασης ανάµεσα στο τρέχον σηµείο και την κορυφή που επιλέξαµε Ζωγραφίζουµε ένα σηµείο στο χρώµα της κορυφής B: (½, ½ 3) Ε. Τι εικόνα δηµιουργείται; B B G R B G R: (0, 0) G: (1, 0) Το Παιγνίδι του Χάους public class Chaos { int T = Integer.parseInt(args[0]); double[] cx = { 0.000, 1.000, ; double[] cy = { 0.000, 0.000, ; ½ 3 (avoid hardwired constants like this) double x = 0.0, y = 0.0; for (int t = 0; t < T; t++) { int r = (int) (Math.random() * 3); x = (x + cx[r]) / 2.0; y = (y + cy[r]) / 2.0; between 0 and 2 StdDraw.point(x, y); 5

6 Το Παιγνίδι του Χάους Απλή τροποποίηση: Χρωµατίζουµε το σηµείο στο χρώµα της κορυφής που επιλέξαµε τυχαία StdDraw.setPenColor(StdDraw.RED) για να αλλάξουµε το χρώµα της πένας B % java Chaos R Sierpinski triangle G // the modification for using the vertex colors for the points public class Chaos { int T = Integer.parseInt(args[0]); double[] cx = { 0.000, 1.000, ; double[] cy = { 0.000, 0.000, ; double x = 0.0, y = 0.0; for (int t = 0; t < T; t++) { int r = (int) (Math.random() * 3); x = (x + cx[r]) / 2.0; y = (y + cy[r]) / 2.0; if (r == 0) StdDraw.setPenColor(StdDraw.RED); else if (r == 1) StdDraw.setPenColor(StdDraw.GREEN); else if (r == 2) StdDraw.setPenColor(StdDraw.BLUE); StdDraw.point(x, y); 6

7 Η Φτέρη του Barnsley (Barnsley Fern) Η φτέρη του Barnsley: Παίζουµε το παιγνίδι του χάους µε διαφορετικούς κανόνες probability new x new y 2%.50.27y 15% -.14x +.26y x +.22y %.17x -.21y x +.18y %.78x +.03y x +.74y +.27 E. Τι µας λέει η υπολογιστική για τη φύση; E. Τι µας λέει η φύση για την υπολογιστική; Επιστήµες του 20 ου αιώνα: Φόρµουλες Επιστήµες του 21 ου αιώνα: Αλγόριθµοι; // modifying the rules for Barnsley Fern public class Chaos { int T = Integer.parseInt(args[0]); double x = 0.0, y = 0.0; StdDraw.setPenColor(StdDraw.GREEN); for (int t = 0; t < T; t++) { double r = Math.random(); if (r < 0.02){x =.5; y =.27*y; else if (r < 0.17){x = -.14*x +.26*y +.57; y =.25*x +.22*y -.04; else if (r < 0.3) {x =.17*x -.21*y +.41; y =.22*x +.18*y +.09; else if (r < 1.0) {x =.78*x +.03*y +.11; y = -.03*x +.74*y +.27; StdDraw.point(x, y); 7

8 Εµψύχωση (Animation) Animation loop. Επανέλαβε τα ακόλουθα: Καθάρισε την οθόνη Μετακίνησε το αντικείµενο Σχεδίασε το αντικείµενο Παρουσίασε και περίµενε για ένα µικρό χρονικό διάστηµα Παράδειγµα. Η µετακινούµενη µπάλα Η µπάλα έχει θέση (rx, ry) και σταθερή ταχύτητα (vx, vy). Εντοπίζουµε σύγκρουση µε τοίχο και αντιστρέφουµε την ταχύτητα (vx, vy) (+1, +1) (rx, ry) (-1, -1) Η Μετακινούµενη Μπάλα public class BouncingBall { double rx =.480, ry =.860; double vx =.015, vy =.023; double radius =.05; StdDraw.setXscale(-1.0, +1.0); StdDraw.setYscale(-1.0, +1.0); position constant velocity radius rescale coordinates while(true) { if (Math.abs(rx + vx) > 1.0) vx = -vx; if (Math.abs(ry + vy) > 1.0) vy = -vy; bounce rx = rx + vx; ry = ry + vy; update position StdDraw.clear(StdDraw.GRAY); StdDraw.setPenColor(StdDraw.BLACK); StdDraw.filledCircle(rx, ry, radius); StdDraw.show(50); turn on animation mode: display and pause for 50ms clear background draw the ball 8

9 Ειδικά Εφέ Εικόνες: Αποθηκεύουµε ένα αρχείο.gif,.png, ή.jpg στο φάκελο εργασίας και χρησιµοποιούµε StdDraw.picture()για να το ζωγραφίσουµε Ηχητικά εφέ: Αποθηκεύουµε ένα αρχείο.wav,.mid, ή.au στο φάκελο εργασίας και χρησιµοποιούµε StdAudio.play()για να το παίξουµε Άσκηση: Τροποποιείστε την κλάση BouncingBall για να απεικονίζει εικόνα και να παίζει ήχο σε κάθε σύγκρουση Να γίνει αντικατάσταση της StdDraw.filledCircle() µε: StdDraw.picture(rx, ry, "earth.gif"); Να προστεθεί η ακόλουθη εντολή όταν γίνεται σύγκρουση µε τον τοίχο: StdAudio.play("boing.wav"); Επιπρόσθετο Υλικό 9

10 Διεπαφές Χρήστη (User Interfaces) Διεπαφή γραµµής εντολής: Ο χρήστης πληκτρολογεί εντολές στο τερµατικό Εύκολα προσαρµόσιµο Επεκτείνεται σε σύνθετες ακολουθίες εντολών Δείξε και κάνε κλικ: Ο χρήστης ενεργοποιεί εφαρµογές µέσω γραφικών επιλογών (by clicking) File Open HelloWorld.java Περιορίζεται σε προ-αποφασισµένες επιλογές του µενού (menu options) Swing Graphical User Interface "Swing" is Java's GUI. Buttons. Menus. Scrollbars. Toolbars. File choosers. import javax.swing.*; import java.awt.*; import java.awt.event.*; public class GUI implements ActionListener { private int clicks = 0; private JFrame frame = new JFrame(); private JLabel label = new JLabel("Number of clicks: 0 "); public GUI() { JButton button = new JButton("Click Me"); button.addactionlistener(this); JPanel panel = new JPanel(); panel.setborder(borderfactory.createemptyborder(30, 30, 10, 30)); panel.setlayout(new GridLayout(0, 1)); panel.add(button); panel.add(label); frame.add(panel, BorderLayout.CENTER); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.settitle("gui"); frame.pack(); frame.show(); public void actionperformed(actionevent e) { clicks++; label.settext("number of clicks: " + clicks); ; GUI gui = new GUI(); Ignore details. a sample Swing application 10

11 Computer Animation Computer animation: Παρουσιάζεται µια ακολουθία στενά σχετιζόµενων εικόνων σε ταχεία διαδοχή δίνοντας έτσι τη ψευδαίσθηση της κίνησης Frame rate: Χρησιµοποιούνται εικόνες το δευτερόλεπτο για να ξεγελάσουν" το ανθρώπινο µάτι και εγκέφαλο στο να βλέπουν οµαλή κίνηση Παρ. 1: Κινούµενα σχέδια Παρ. 2: Java mascot Duke cart-wheeling Java Implementation public class Duke { int images = 17; int WIDTH = 130, HEIGHT = 80; StdDraw.setCanvasSize(WIDTH, HEIGHT); for (int t = 0; true; t++) { int i = 1 + (t % images); String file = "T" + i + ".gif"; StdDraw.picture(0.5, 0.5, file); StdDraw.show(100); T1.gif - T17.gif 11

12 Συγκεκριµένα Στοιχεία Λειτουργικών Συστηµάτων Common OS abstractions. Operation Windows XP OS X Unix Cycle through recent command Up, down arrows Up, down arrows Up, down arrows File name completion Tab Tab Tab End of file Ctrl-z <Enter>Ctrl-d Ctrl-d Newline character \r\n \n or \r \n Scroll through text, one screenful at a time more more less more less List files in current directory dir ls ls Redirection, pipes <, >, <, >, <, >, File system C:\introcs\Hi.java /u/introcs/hi.java /u/introcs/hi.java Unix means Unix variants (Linux, Solaris, Aix) Most Windows XP commands also supported in other version of Windows. Είκοσι Ερωτήσεις Είκοσι Ερωτήσεις: Ο χρήστης σκέφτεται ένα ακέραιο αριθµό από το 1 µέχρι το 1 εκατοµµύριο. Ο υπολογιστής προσπαθεί να τον µαντέψει. public class TwentyQuestions { int lo = 1, hi = ; while (lo < hi) { int mid = (lo + hi) / 2; StdOut.println("Is your number <= " + mid + "?"); boolean response = StdIn.readBoolean(); if (response) hi = mid; else lo = mid + 1; StdOut.println("Your number is " + lo); Δυαδική αναζήτηση: Κάθε ερώτηση αφαιρεί τις µισές από τις πιθανές εναποµείναντες τιµές Συνέπεια: Ο υπολογιστής πάντοτε έχει επιτυχία µετά από 20 ερωτήσεις invariant: user's number always between lo and hi million 12