giovedì 21 gennaio 2010

MoscaView

MoscaView è la naturale evoluzione di Esagonia.
I bordi dei singoli esagoni sono stati eliminati per avere un effetto somigliante alla visione che potrebbe avere una mosca. Ecco un breve video, anche questa volta accellerato non so perchè... Come se non bastesse youtube ha ridimensionato automaticamente il video, che altrimenti avrebbe l'asse y più lungo dell'x, ma rende comunque l'idea.



Sebbene le modifiche al codice siano minime, lo riporto qui sotto nella sua interezza, praticamente ho sostituito stroke(0, 0, 0) con noStroke(), e naturalmente ho eliminato strokeWidth().
Inoltre ho aggiunto il codice necessario alla registrazione del video sull'hard disk.

import processing.video.*;
Capture videoin;
MovieMaker film;


void setup()
{
  size(410, 450);
  colorMode(RGB, 255);
  background(0, 0, 0);
  noStroke();
  smooth();
//  println(Capture.list());
  videoin = new Capture(this, width, height, "la_tua_webcam", 30);
  film = new MovieMaker(this, width, height, "il_tuo_file", 30, MovieMaker.H263, MovieMaker.HIGH);
}


void captureEvent(Capture videoin)
{
  videoin.read();
}


void draw()
{
  pattern(23, 6);
  film.addFrame();
}


void esagono(int x, int y, int l)
{
  beginShape();
  vertex(x + (l / 2), y);
  vertex(x + (l / 2) + l, y);
  vertex(x + (l * 2), y + sqrt(sq(l) - sq(l / 2)));
  vertex(x + (l / 2) + l, y + (sqrt(sq(l) - sq(l / 2)) * 2));
  vertex(x + (l / 2), y + (sqrt(sq(l) - sq(l / 2)) * 2));
  vertex(x, y + sqrt(sq(l) - sq(l / 2)));
  vertex(x + (l / 2), y);
  endShape();
}


void pattern(int n, int l)
{
  int x = (width / 2) - l; int y = 0; int b = int(sin(radians(60)) * l);
  for (int e = 0; e < n; e++)  
  {
    int ix = x; int iy = y;
    for (int i = 0; i < (n + e); i++)
    {
      color colore = videoin.get((ix + l), (iy + b));
      fill(colore);
      esagono(ix, iy, l);
      ix = ix + (l + (l / 2));
      iy = iy + b;
    }
    x = x - (l + (l / 2));
    y = y + b;
  }
  
  int c = (n - 1) * 2;
  x = x + (l + (l / 2));
  y = y + b;
  for (int a = 0; a < c; a++)
  {
    int ix = x; int iy = y;
    for (int o = 0; o < c; o++)
    {
      color colore = videoin.get((ix + l), (iy + b));
      fill(colore);
      esagono(ix, iy, l);
      ix = ix + (l + (l / 2));
      iy = iy + b;
    }
    c = c - 1;
    y = y + (b * 2);
  }
}


void keyPressed()
{
  if (key == ' ')
  {
    film.finish();
  }
}
Devo ringraziare Venom per avermi suggerito di togliere i bordi, è stata proprio una buona idea e dato che mi ha fatto notare che la comprensione del codice non è proprio immediata ecco una breve descrizione delle funzioni principali:
  • esagono(int x, int y, int l)
calcola le coordinate di tutti i vertici necessari alla creazione di un esagono e lo disegna. Il calcolo delle coordinate è impostato in maniera tale da poter variare senza difficoltà sia le coordinate dell'esagono stesso (x e y) sia la lunghezza del lato dell'esagono (l). Per ottenere questo risultato ho fatto un ampio uso del teorema di pitagora, scelta ovvia se si considera un esagono come un insieme di triangoli. Mi sono basato su questo disegno partendo dal vertice in alto a sinistra, quindi a chi è interessato a studiare il codice consiglio di dargli un'occhiata durante la lettura.
  • pattern(int n, int l)
genera un esagono di esagoni, che è il pattern che da la forma all'immagine vista. È possibile scegliere sia la lunghezza del lato di ogni esagono in pixel (l), sia la lunghezza del lato dell'esagono di esagoni, in numero di esagoni (n). La variabile b è l'equivalente di a dell'immagine sopra. Ogni esagono è posizionato nelle giuste coordinate attraverso due serie di due cicli for. Il motivo è chiarificato dall'immagine accanto.

La prima serie posiziona gli esagoni numerati in nero, e a ogni ciclo aggiunge un esagono, mentre la seconda quelli coi numeri in bianco, e ad ogni ciclo sottrae un esagono. I numeri rispecchiano l'ordine seguito dall'algoritmo. In questa maniera, a ogni ciclo, pattern() chiama esagono(), posiziona l'esagono alle sue coordinate e lo colora con il colore del pixel dell'input video corrispondente al centro dell'esagono stesso.

Nessun commento:

Posta un commento