Roll dock » jQuery http://blog.rollstudio.it/it/ Multimedia Design Fri, 26 Feb 2010 11:55:45 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Particelle e canvas http://blog.rollstudio.it/it/2009/12/particelle-e-canvas/ http://blog.rollstudio.it/it/2009/12/particelle-e-canvas/#comments Thu, 03 Dec 2009 17:26:28 +0000 admin http://blog.rollstudio.it/?p=236 Introduzione

In attesa di creare il sito per un nostro cliente, abbiamo pensato di pubblicare una pagina coming soon insolita, interattiva, divertente. Abbiamo deciso di utilizzare il tag <canvas>, definito nelle nuove specifiche HTML 5, per creare delle particelle che potessero interagire con il mouse.

Il tag <canvas>

“Canvas” significa letteralmente tela, ed in effetti questo tag rappresenta una vera e propria tela su cui disegnare via javascript. Purtroppo tutte le versioni di Internet Explorer non supportano il tag <canvas>, IE 8 incluso, ma….google ci viene in aiuto con il progetto, che definirei perfino salvavita, exCanvas, ovvero una libreria javascript in grado di emulare un tag canvas sfruttando la capacità di Internet Explorer di visualizzare codice VML.

Il codice

Per iniziare inseriamo il tag <canvas> nel codice HTML, insieme alle librerie jQuery ed exCanvas, per abilitare l’effetto in IE. Andremo a scrivere il codice di gestione della canvas nel file effect.js


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XL visual</title>
<link href="css/xlvisual.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="js/excanvas_r71.js"></script>
<![endif]-->
<script type="text/javascript" src="js/effect.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

Per prima cosa otteniamo il contesto del canvas, ovvero l’interfaccia che ci consentirà di disegnare su di essa, e scriviamo il codice per far andare la canvas a tutto schermo. Abbiamo utilizzato jQuery per le interazioni con gli elementi HTML. Se non conoscete questa libreria, forse è il caso che andiate a dare uno sguardo, è fantastica!!


var hc,wc;
var resize = function() {
hc = $(window).height()-5;
wc = Math.max($(window).width(),800)-5;
$("#canvas").attr("width",wc).attr("height",hc);
}
$(window).resize(resize);
resize();
var c = $("#canvas")[0].getContext("2d");

Creiamo ora un oggetto Particella, che gestirà la posizione, lo spostamento ed il disegno della stessa sul canvas


var Particella = function(x, y, radius, col) {
this.dx = 0;
this.dy = 0;
this.dradius = 0;
this.rifx = 0;
this.rify = 0;
this.vel = 30;
this.vibracounter = 0;
this.x = x;
this.y = y;
this.radius = radius;
this.radius2 = radius*2;
this.col = col;
this.state = 0;
};


Particella.prototype = {
setRif: function(x, y) {
this.rifx = x;
this.rify = y;
},
draw: function() {
c.fillStyle = this.col;
c.beginPath();
c.arc(this.x,this.y,this.radius,0,2*Math.PI,true);
c.fill();
},
update: function() {
if(Math.abs(mouseX-this.x)<20 && Math.abs(mouseY-this.y)<20) {
if(this.state==0) {
this.state = 1;
this.dx = this.rifx+Math.random()*200-100;
this.dy = Math.random()*hc;
this.vel = 30;
} else if(this.state==1) {
this.vibracounter = Math.round(Math.random()*20+10);
}
}
switch(this.state) {
case 0:
this.vibraLinea();
break;
case 1:
this.vibraTutto();
break;
}
this.x += (this.dx-this.x)/this.vel;
this.y += (this.dy-this.y)/this.vel;
},
vibraLinea: function() {
if(this.vibracounter==0) {
this.vel = 20;
this.dx = this.rifx+Math.random()*20-10;
this.dy = this.rify+Math.random()*20-10;
this.vibracounter = Math.round(Math.random()*5+5);
}
this.vibracounter--;
},
vibraTutto: function() {
if(Math.abs(this.dx-this.x)<5 && Math.abs(this.dy-this.y)<5){
this.state = 0;
return;
}
}
};

La funzione draw è responsabile del disegno di una particella, è piuttosto semplice, imposta il colore di riempimento di una pallina, disegna un arco di 360° e ne chiede il riempimento.

La funzione update è responsabile del calcolo della posizione di una pallina per ogni frame. Abbiamo previsto 2 possibili stati di moto, uno casuale intorno ad un punto (gestito dalla funzione vibraLinea), ed un altro che si innesca quando si passa con il mouse vicino ad una particella (gestito dalla funzione vibraTutto). Queste 2 funzioni impostano la posizione verso la quale si desidera far muovere la pallina. Ad ogni frame, la funzione update fa avvicinare la pallina dalla sua posizione attuale a quella di arrivo precedentemente impostata dalle funzioni vibraLinea o vibraTutto.

Procediamo al setup del canvas, alla creazione delle Particelle e ad impostare il loop che andrà ad animare il tutto


var numParticelle = 100;
var colori = ["#00FFFF","#FFFF00","#FF00FF"];
var numColori = colori.length;
var part = new Array(numParticelle);

Abbiamo dichiarato il numero delle particelle, i 3 possibili colori ed una matrice che conterrà tutti gli oggetti particella che andremo a creare.


var creaParticelle = function() {
var x,y = hc/2;
for(var i=0;i<numParticelle;i++) {
x = Math.random()*wc;
part[i] = new Particella(x,y, Math.random()*5.5+0.5, colori[Math.round(Math.random()*(numColori-1))]);
part[i].setRif(x,y);
}
}


var setup = function() {
creaParticelle();
c.clearRect(0, 0, wc, hc);
c.fillStyle = "#1B2209"
c.fillRect(0, 0, wc, hc);
}

Abbiamo scritto la funzione di setup, che crea 100 particelle con colore e posizione casuali e procede a disegnare uno sfondo verde.


var draw = function() {
c.clearRect(0, 0, wc, hc);
c.fillStyle = "#1B2209"
c.fillRect(0, 0, wc, hc);
for(var i=0;i<numParticelle;i++) {
part[i].update();
part[i].draw();
}
window.setTimeout(draw,0);
}

Abbiamo dichiarato la funzione principale del loop di disegno, che ripulisce lo sfondo del canvas e, per ogni particella, richiama i metodi update, per aggiornarne la posizione e drawper disegnarla. Infine la funzione draw imposta un timer da eseguire appena possibile (il ritardo 0 serve a questo) che richiamerà nuovamente il loop principale.


setup();
window.setTimeout(draw,0);

Abbiamo finito. basterà ora richiamare il setup, e far partire il loop principale con window.setTimeout
L’effetto in questione è visibile su http://www.xlvisual.it

Nella versione online, lo script è leggermente più complesso, per gestire meglio l’emulazione per IE con exCanvas. Infatti, la tecnologia VML adotta un approccio completamente diverso per il disegno degli elementi grafici, i quali non vengono disegnati su una tela, una bitmap, come nel caso del canvas, ma sono dei veri e propri elementi vettoriali descritti mediante dei tag. Per questo motivo, risulta molto più veloce spostare questi elementi vettoriali, piuttosto che ridisegnarli ogni volta. Non è il caso di addentrarci in ulteriori dettagli. Chi fosse interessato potrà leggere il codice in produzione all’indirizzo http://www.xlvisual.it

]]> http://blog.rollstudio.it/it/2009/12/particelle-e-canvas/feed/ 3