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