JavascriptProva

domenica 16 dicembre 2012

Linee animate in Processing

Proviamo a disegnare una linea animata, adesso.
int x=0;
void setup(){
  background(100);
  size(1000,800);
  frameRate(200);
  fill(100);
}
void draw(){
  x++;
  line(0,0,x,500);
}
Ecco, la linea non si muove, ma disegna un triangolo. Per far disegnare un cerchio, dovrei usare le funzioni trigonometriche...
Ma se io voglio che la linea si sposti, posso procedere a quell'artifizio col background... Proviamo.
int x=0;
void setup(){
  background(100);
  size(1000,800);
  frameRate(10);
  fill(100);
}
void draw(){
  x++;
  line(0,0,x,500);
  background(100);
}
...che non funziona!
Vediamo con il contatore di frames...

Ecco: un buon artifizio è questo!
int x=0;
void setup(){
  background(100);
  size(1000,800);
  frameRate(100);
  fill(100);
}
void draw(){
  line(0,0,x,500);
  if(frameCount%5==0) {
    background(100);
    x++;
  }
}
Funziona! ...anche se la linea si muove un po' lentamente.
Ho appreso un artifizio per fare i loop. Fare l'operazione frameCount % [numero di frames che compongono il loop]. Ogni volta che il numero di frames eseguiti è divisibile per il numero di frames che compongono il loop, il risultato dell'operazione MODULO è zero, e questa viene posta come condizione per ottenere un effetto.

Primi rudimenti con Processing

Dunque...

Iniziamo con il metodo (o funzione) void setup...

Ecco:
void setup(){
  size(500,500);
}
Così facendo, con il comando size() imposto l'area del mio canvas. Ci provo con l'editor di Processing.
Ottengo una finestra del calibro voluto.

Ora ci disegno una linea:
void setup(){
  size(500,500);
}
void draw(){
  line(10,10,400,400);
}
Benissimo! Ci sono riuscito.

Ora divaghiamo...

Caricare un'immagine. Cerchiamo su Google "load image"...
PImage img;
void setup(){
  size(500,500);
  stroke(0);
  img=loadImage("bella.jpg");
}
void draw(){
  image(img,0,0,img.width/2,img.height/2);
}
Risultato:

Bene...

Quindi il caricamento dell'immagine è indipendente dalla sua visualizzazione.
L'immagine è stata preventivamente messa nella cartella "data" del file .pde.

martedì 11 dicembre 2012

Canvas: per prima cosa rendiamo un canvas trascinabile, potrebbe servire.

Bene... Sono riuscito a creare una libreria dragdrop.js che contiene l'essenziale per trascinare elementi sulla pagina web.
Essa viene chiamata semplicemente dando all'evento window.onload istruzione di eguagliare l'evento document.onmousedown alla funzione OnMouseDown e l'evento document.onmouseup alla funzione OnMouseUp, e di impostare la proprietà di stile position a "absolute" per gli elementi che si vuole trascinabili.

Ora occupiamoci del canvas.
Dato che sto lavorando con Internet Explorer a causa del fatto che è l'unico browser che mi consente di salvare files su disco fisso, e quindi di mantenere e modificare archivi xml, devo imparare la sintassi del canvas per IE.

Anche il canvas può essere soggetto a DragDrop, impostando le giuste proprietà:
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
   position:absolute;
}
</style>
<script src="funzioni.js"></script>
<script src="dragdrop.js"></script>
<script>
function main(){
 document.onmousedown=OnMouseDown;
 document.onmouseup=OnMouseUp;
}
window.onload=main;
</script>
</head>
<body>
   <canvas id="mycanvas" width="100" height="100">
</body>
</html>
Ecco: con il richiamo delle librerie "dragdrop.js" e "funzioni.js", e impostando quei semplici comandi, il canvas si muove se trascinato.