B. Vektory

Úloha 1

Pomocou vektorov poloha a smer animujte odrážanie lopty od stien.

Riešenie

PVector poloha;
PVector smer;

void setup()
{
  size(400, 400);
  
  poloha = new PVector(random(width), random(height));
  smer = new PVector(random(-3,3), random(-3,3));  
}

void draw()
{
  background(0);
  
  // Pohyb
  poloha = PVector.add(poloha, smer);
  
  // Odraz
  if (poloha.x < 0 || poloha.x > width) smer.x = -smer.x;
  if (poloha.y < 0 || poloha.y > height) smer.y = -smer.y;
  
  // Vykreslenie
  circle(poloha.x, poloha.y, 20); 
}

Úloha 2

Pridajte do programu premennú rychlost s hodnotou 1. Táto premenná určuje rýchlosť, ako rýchlo sa lopta pohybuje. Pri každom odraze sa rýchlosť zvýši o 1.

Riešenie

PVector poloha;
PVector smer;
float rychlost = 1;

void setup()
{
  size(400, 400);
  
  poloha = new PVector(random(width), random(height));
  smer = new PVector(random(-3,3), random(-3,3));  
}

void draw()
{
  background(0);
  
  // Pohyb
  smer = smer.normalize().mult(rychlost);
  poloha = PVector.add(poloha, smer);
  
  // Odraz
  if (poloha.x < 0 || poloha.x > width) 
  {
    smer.x = -smer.x;
    rychlost = rychlost + 1;
  }
  if (poloha.y < 0 || poloha.y > height)
  {
    smer.y = -smer.y;
    rychlost = rychlost + 1;
  }
  
  // Vykreslenie
  circle(poloha.x, poloha.y, 20); 
}

Úloha 3

Vyrobte skeč, v ktorom lopta začína v hore v strede obrazovky. Smer začína ako vektor so súradnicami 0,0. Lopta teda od začiatku programu stojí na mieste. Až keď stlačíme myš, tak sa smeru priradí nový vektor so súradnicami 0,2 aby lopta spadla nadol.

Riešenie

PVector poloha;
PVector smer;

void setup()
{
  size(400, 400);
  
  poloha = new PVector(width/2, 0);
  smer = new PVector(0,0);
}

void mousePressed()
{
  smer = new PVector(0,2);
}

void draw()
{
  background(0);
  
  // Pohyb
  poloha = PVector.add(poloha, smer);
  
  // Vykreslenie
  circle(poloha.x, poloha.y, 20); 
}

Úloha 4

Vytvorte skeč, kde bude lopta vygenerovaná na náhodnej pozícii na obrazovke. V animácii sa lopta bude približovať k cieľu. Cieľ je na začiatku programu nastavený na stred obrazovky.

Riešenie

PVector poloha;
PVector ciel;

void setup()
{
  size(400, 400);
  
  poloha = new PVector(random(width), random(height));
  ciel = new PVector(width/2, height/2);  
}

void draw()
{
  background(0);
  
  // Pohyb
  PVector smer = PVector.sub(ciel, poloha).normalize();
  poloha = PVector.add(poloha, smer);    
  
  // Vykreslenie
  circle(poloha.x, poloha.y, 20); 
}

Úloha 5

Upravte program tak, aby sa po stlačení myši nastavil cieľ na pozíciu myši.

Riešenie

PVector poloha;
PVector ciel;

void setup()
{
  size(400, 400);
  
  poloha = new PVector(random(width), random(height));
  ciel = new PVector(width/2, height/2);  
}

void mousePressed()
{
  ciel = new PVector(mouseX, mouseY);
}

void draw()
{
  background(0);
  
  // Pohyb
  PVector smer = PVector.sub(ciel, poloha).normalize();
  poloha = PVector.add(poloha, smer);    
  
  // Vykreslenie
  circle(poloha.x, poloha.y, 20); 
}

Úloha 6

Upravte skeč tak, aby sa cieľ nastavoval ľavým tlačidlom myši a pri stlačení prvého tlačidla sa Expnastaví poloha lopty na pozíciu myši.

Riešenie

PVector poloha;
PVector ciel;

void setup()
{
  size(400, 400);
  
  poloha = new PVector(random(width), random(height));
  ciel = new PVector(width/2, height/2);  
}

void mousePressed()
{
  if (mouseButton == LEFT)
  {
    ciel = new PVector(mouseX, mouseY);  
  }
  if (mouseButton == RIGHT)
  {
    poloha = new PVector(mouseX, mouseY);
  }  
}

void draw()
{
  background(0);
  
  // Pohyb
  PVector smer = PVector.sub(ciel, poloha).normalize();
  poloha = PVector.add(poloha, smer);    
  
  // Vykreslenie
  circle(poloha.x, poloha.y, 20); 
}

Úloha 7

Vyrobte skeč, v ktorom bude hviezdička * odlietavať od stredu obrazovky. Na začiatku je jej poloha vygenerovaná náhodne. Keď vyletí mimo obrazovky, vygeneruje sa jej poloha náhodne znova.

Riešenie

PVector poloha;
PVector stred;

void setup()
{
  size(400, 400);
  textSize(50);
  
  poloha = new PVector(random(width), random(height));
  stred = new PVector(width/2, height/2);  
}

void draw()
{
  background(0);
  
  // Pohyb
  PVector smer = PVector.sub(poloha, stred).normalize();
  poloha = PVector.add(poloha, smer);    
 
  // Ak je mimo obrazovku vlavo alebo vpravo alebo hore alebo dole 
  if (poloha.x < 0 || poloha.x > width || poloha.y < 0 || poloha.y > height)
  {
    poloha = new PVector(random(width), random(height));
  }
  
  // Vykreslenie
  text("*", poloha.x, poloha.y); 
}

Rozšírenie: Upravte generovanie polohy hviezdičky tak, aby sa generovala náhodne v okolí plus-mínus 50 pixelov okolo stredu obrazovky.

Riešenie

poloha = new PVector(random(width/2-50, width/2+50), random(height/2-50,height/2+50));

Úloha 8

Rozšírte predošlú úlohu s použitím polí, aby v programe takto lietalo 50 hviezd:

Riešenie

PVector[] hviezdy = new PVector[50];
PVector stred;

void setup()
{
  size(400, 400);
  textSize(50);

  for (int i = 0; i < hviezdy.length; i++)
  {
    hviezdy[i] = new PVector(random(width/2-50, width/2+50), random(height/2-50, height/2+50));
  }
  stred = new PVector(width/2, height/2);
}

void draw()
{
  background(0);

  for (int i = 0; i < hviezdy.length; i++)
  {
    // Pohyb
    PVector smer = PVector.sub(hviezdy[i], stred).normalize();
    hviezdy[i] = PVector.add(hviezdy[i], smer);

    // Ak je mimo obrazovku vlavo alebo vpravo alebo hore alebo dole
    if (hviezdy[i].x < 0 || hviezdy[i].x > width || hviezdy[i].y < 0 || hviezdy[i].y > height)
    {
      hviezdy[i] = new PVector(random(width/2-50, width/2+50), random(height/2-50, height/2+50));
    }
    
    // Vykreslenie
    text("*", hviezdy[i].x, hviezdy[i].y);
  }
}

Úloha 9

Vytvorte skeč, ktorý vygeneruje náhodnú polohu na obrazovke. Do tejto polohy nakreslí zo stredu obrazovky čiaru. V animácii náhodne posúva túto polohu v rozsahu plus-mínus 3 pixely.

Riešenie

PVector bod;

void setup()
{
  size(400,400);
  stroke(255);
  
  bod = new PVector(random(width), random(height));
}

void draw()
{
  background(0);
 
  line(width/2, height/2, bod.x, bod.y);
  
  PVector posun = new PVector(random(-3,3), random(-3,3));
  bod = PVector.add(bod, posun);  
}

Úloha 10

Rozšírte predošlý program tak, aby bolo takýchto čiar na obrazovke 100:

Riešenie

PVector[] body = new PVector[100];

void setup()
{
  size(400, 400);
  stroke(255);

  for (int i=0; i < body.length; i++)
  {
    body[i] = new PVector(random(width), random(height));
  }
}

void draw()
{
  background(0);

  for (int i=0; i < body.length; i++)
  {
    line(width/2, height/2, body[i].x, body[i].y);

    PVector posun = new PVector(random(-3, 3), random(-3, 3));
    body[i] = PVector.add(body[i], posun);
  }
}

Bonus: Nastavte farbu čiar na polopriesvitnú, napríklad: stroke(255,5). A zrušte mazanie pozadia (background(0)) v draw(). Docielite zaujímavý vizuálny efekt, ako sa polopriesvitné čiary postupne akumulujú na obrazovke:

Úloha 10 *

Urobte skeč, ktorý na začiatku vygeneruje 10 náhodných bodov. Pri pohybe myšou sa pohnú aj body. Body sa hýbu tak, že i-ty bod sa pohybuje smerom k i+1 bodu. A posledný bod v poli sa pohybuje smerom k myši.

Riešenie

PVector[] body = new PVector[10];

void setup()
{
  size(400,400);
  noStroke();
  
  for (int i=0; i < body.length; i++)
  {
    body[i] = new PVector(random(width), random(height));
  }
}

void mouseMoved()
{
  PVector mys = new PVector(mouseX, mouseY);
  for (int i=0; i < body.length; i++)
  {
    if (i < body.length - 1)
    {
      PVector smer = PVector.sub(body[i+1],body[i]).normalize();
      body[i] = PVector.add(body[i], smer);
    }
    else
    {
      PVector smer = PVector.sub(mys,body[i]).normalize();
      body[i] = PVector.add(body[i], smer);
    }    
  }  
}

void draw()
{
  background(0);
  
  for (int i=0; i < body.length; i++)
  {
    circle(body[i].x, body[i].y, 20);
  }
}