Cielom dnesneho cvicenia bude zoznamit sa s pracou v prostredi Processing na jednoduchych prikladoch demonstrujucich zakladne stavebne prvky pouzitelne v zlozitejsich projektoch PROCESSING http://www.processing.org/ Premenne boolean int float Funkcie sin() cos() random() abs() dist() max() Interaktivita mousePressed() mouseReleased() mouseMoved() mouseDragged() mouseX mouseY pmouseX pmouseY Zaklady zobrazovania na paneli: - suradnicova sustava ma pociatok vlavo hore - setup() size(), background(), framerate() - draw() point(), line(), rectangle(), ellipse() Jednoduchy program (na konci prikazu ;) // This is comment. size(200, 200); background(102); line(0, 0, 200, 200); line(0, 200, 200, 0); Deklaracia premennych a priradenie hodnot (width a height su rozmery panelu) // Variable declarations int x1, y1; int x2, y2; // Assignments x1 = 0; y1 = 0; x2 = width; y2 = height; line(x1, y1, x2, y2); Zakladne clenenie programov // Podobne predchadzajucemu programu, ale // vykreslovanie prebieha opakovane po // kazdom zavolani draw() niekolkokrat za s int x, y; float a; // Tieto prikazy sa vykonaju len raz void setup() { size(200, 200); background(102); a = HALF_PI; } // hodnota a sa po kazdom vykresleni zmeni na polovicu void draw() { x = (int) (width * sin(a)); y = (int) (height * cos(a)); line(0, 0, x, y); a /= 2.0; } Funkcia ellipse() vykresli kruh alebo elipsu int r; r = width/4; ellipse(width/2,height/2,r,r); Pridajte pred vykreslenim prikaz noStroke() alebo fill(103,201,39); Definovanie vlastnych funkcii int r; void draw() { circle(width/2, height/2, r); r++; } void circle(int x, int y, int r) { ellipseMode(CENTER); ellipse(x, y, r*2, r*2); } println() vypise informacie pod panel. Premenne su platne lokalne. void setup() { int i = 7; func(i); println(i); } void func(int i) { i = 13; } Praca s mysou void setup() { size(200, 200); } void draw() {} void mousePressed() { background(102); line(width/2, height/2, mouseX, mouseY); } Zistovanie polohy mysi pomocou if() int x; int y; int r; int d; // vzdialenost mysi od stredu void setup() { size(200, 200); noStroke(); x = width/2; y = height/2; r = height/4; // polomer kruhu } void draw() { background(102); d = (int) dist(x,y,mouseX,mouseY); // Ak je mys v kruhu if (d <= r) { // vykresli sivou fill(52); } else { // inak svetlosivou fill(204); } circle (x, y, r); } void circle(int x, int y, int r) { ellipseMode(CENTER); ellipse(x, y, r*2, r*2); } Viacnasobne vykreslenie symbolov s interaktivitou int n=5; // pocet kruhov na riadok alebo stlpec int d; float D; float R; void setup() { size(200, 200); noStroke(); // vzdialenost medzi kruhmi v riadku alebo stlpci d = width/n; // maximalny polomer kruhu R = 0.6 * d; // maximalna mozna vzdialenost D = dist(0, 0, width, height); } void draw() { background(102); for (int x = d/2; x < width; x += d) { for (int y = d/2; y < height; y += d) { // Velkost kruhu zavisi na vzdialenosti mysi int r = (int) (R * (1.0 - dist(x, y, mouseX, mouseY) / D)); circle (x, y, r); } } } void circle(int x, int y, int r) { ellipseMode(CENTER); ellipse(x, y, r*2, r*2); } Domaca uloha: Nasim cielom bude interaktivna praca so zlozitymi/rozsiahlymi grafmi. Tato uloha posluzi ako jednoducha priprava na tuto temu. Nastudujte zdrojovy kod igraph.pde Vytvorte obdobny program, v ktorom deklarujete triedu pre vrcholy grafu. Kazdy bude mat svoju polohu, farbu a nazov zadane pri inicializacii (pri definicii sa mozete inspirovat kodom igraph4.pde, kde su taketo triedy pouzite). Dalej: - zabezpecte, aby sa pri prekryti uzlu mysou vyfarbil svojou farbou a pri kliknuti vypisal nazov - pridajte funkciu presuvania uzlov mysou po ploche