Carlo Massarini ha presentato la cerimonia di consegna del Premio che da sei anni valorizza i migliori progetti web al femminile. L’organizzatrice dell’evento, Adele Marra di AssoWebItalia Onlus, ha posto l’accento su alcune delle iniziative premiate: video e progetti web 2.0.
http://careertv.it/career-help/vi-edizione-premio-donnaeweb/
Dopo aver pubblicato il tutorial sugli effetti particellari con il tag <canvas>, abbiamo voluto tentare un esperimento, estendere l’effetto in 3d, anche per dare un’occhiata al recente plugin di google o3d. Si tratta di un plugin per browser in grado di portare la grafica 3d accelerata sul web.
I punti di contatto tra la versione 2d e quella 3d ci sono, anche se ridotti al solo linguaggio utilizzato: javascript.
Vi consigliamo di leggere il tutorial in 2d per familiarizzare con il codice per gestire le particelle.
La differenza principale tra la versione canvas e quella o3d è la gestione del rendering. Nel primo caso il rendering viene effettuato disegnando via javascript la scena ad ogni singolo frame. Nel secondo, invece, la scena viene descritta durante la fase di setup, e il codice eseguito ad ogni frame si limita ad aggiornare le posizioni delle particelle, lasciando al plugin il render della scena impostata.
Cominciamo ad inserire lo script principale di o3d ed un <div> vuoto nel codice HTML, sarà il contenitore del plugin o3d
<script type="text/javascript" src="http://o3d.googlecode.com/svn/trunk/samples/o3djs/base.js"></script>
<div id="o3d"></div>
Diamo un’occhiata al setup
var init = function() {
o3djs.util.makeClients(setup);
}
Questa funzione inserirà il codice necessario per mostrare il plugin o3d all’interno del <div> che abbiamo appena creato. Appena avrà finito richiamerà la funzione di setup:
var setup = function(clientElements) {
var o3dElement = clientElements[0];
g_o3d = o3dElement.o3d;
g_client = o3dElement.client;
hc = g_client.height;
wc = g_client.width;
g_math = o3djs.math;
g_pack = g_client.createPack();
viewInfo = o3djs.rendergraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);
// Set up a simple perspective view.
ratio = wc/hc;
viewInfo.drawContext.projection = g_math.matrix4.perspective(
2*Math.atan(hc/(2*800)), // 30 degree fov.
ratio,
1, // Near plane.
5000); // Far plane.
// Set up our view transformation to look towards the world origin where the
// cube is located.
viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 0, 800], // eye
[0, 0, 0], // target
[0, 1, 0]); // up
viewInfo.clearBuffer.clearColor = [27/255, 34/255, 9/255, 1];
g_Transform = g_pack.createObject('Transform');
g_Transform.translate(-wc/2,-hc/2,0);
creaParticelle(g_Transform);
g_Transform.parent = g_client.root;
g_client.setRenderCallback(update);
}
Il codice non è molto semplice da leggere. I passaggi effettuati creano una vista sul mondo 3d, specificando punto di vista e punto obiettivo della telecamera. Successivamente si passa alla creazione di un oggetto Transform, ovvero un oggetto grazie al quale poter manipolare la posizione degli oggetti 3d. Quindi creiamo le particelle all’interno del Transform appena creato. Infine associamo la funzione da richiamare ad ogni frame, update.
Analizziamo ora il codice per la creazione delle particelle:
var numParticelle = 100;
var colori = [[0,1,1,1],[1,1,0,1],[1,0,1,1]];
var materiale = null;
var numColori = colori.length;
var part = new Array(numParticelle);
var creaParticelle = function(t) {
var g_Primitives = o3djs.primitives;
var g_Material = o3djs.material;
materiale = g_Material.createBasicMaterial(g_pack,viewInfo,[1,1,1,1]);
var x,y = hc/2;
var s = g_Primitives.createSphere(g_pack,materiale,1,10,10);
z = 0;//Math.random()*800-400;
for(var i=0;i<numParticelle;i++) {
var g_Transform = g_pack.createObject('Transform');
var g_Transform2 = g_pack.createObject('Transform');
x = Math.random()*wc;
part[i] = new Particella(x,y,z, Math.random()*5.5+0.5, colori[Math.round(Math.random()*(numColori-1))]);
part[i].setRif(x,y,z);
g_Transform2.scale([part[i].radius,part[i].radius,part[i].radius]);
g_Transform2.createParam("diffuse","ParamFloat4").value = colori[Math.round(Math.random()*(numColori-1))];
g_Transform2.addShape(s);
g_Transform.translate(x,y,z);
g_Transform2.parent = g_Transform;
part[i].t = g_Transform;
g_Transform.parent = t;
}
}
Dopo aver definito al solito il numero di particelle, i colori da utilizzare, passiamo alla creazione dei materiali delle nostre particelle. In effetti, creiamo un unico materiale, a cui di volta in volta cambieremo colore. Poi creiamo la sfera che rappresenta la nostra particella, le assegniamo il materiale. Anche la sfera che rappresenta la forma particella sarà unica. Le particelle saranno quindi varie istanze della stessa forma e dello stesso materiale. Ciò che varia è, come abbiamo visto precedentemente, l’oggetto transform che le contiene. Per ogni particella avremo un trasform differente, con scala, traslazioni e parametro colore per la riflessione della luce diffusa differenti. Più precisamente, abbiamo creato 2 Transform per particella, una che conterrà dati specifici della particella ma costanti, come la sua grandezza ed il suo colore. L’altra conterrà la posizione variabile ad ogni frame. Così facendo, potremmo tenere separati i dati che non dobbiamo modificare. Comodo no, si risparmia memoria :) Notiamo che abbiamo memorizzato nella variabile t della particella la sua Transform, che ci sarà utile quando andremo ad aggiornare la posizione delle particelle.
Manca ora il callback richiamato ad ogni frame:
var update = function() {
for(var i=0;i<numParticelle;i++) {
part[i].update();
}
}
Non fa altro che eseguire il metodo update per ogni particella.
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.dz = 0;//Math.random()*800-400;
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;
this.z += (this.dz-this.z)/this.vel;
this.t.identity();
this.t.translate(this.x,this.y,this.z);
}
Le ultime 2 righe sono quelle che contano, aggiornano la Transform della particella, ovvero la sua posizione.
Nella demo di seguito abbiamo anche degli elementi 2d animati, che analizzeremo in un prossimo tutorial:
DEMO
Sabato 5 dicembre, a Viareggio, si è svolta la premiazione DONNAèWEB 2009.
Assegnati ben 4 premi:
www.zipdesign.co.uk, vincitore premio “impresa, e-commerce“:
Motivazione: “incisività e chiarezza nell’esposizione dei contenuti attraverso un’originale e curata visualizzazione delle immagini.”
www.comicsxafrica.org, vincitore premio “eventi“:
Motivazione: “ottimo il risalto dato dalla forza delle immagini: l’apparente semplicità nasconde grande accuratezza progettuale.”
www.silvianheachkids.it, vincitore “Premio Speciale Giuria Giovani“:
Motivazione: “Approvato!!! Divertente e semplice da utilizzare per l’utenza a cui è dedicata.”
PREMIO DONNAèWEB 2009: Lara Belcastro
Motivazione: “Per la crescita professionale, per la capacità di scegliere progetti di alto spessore anche sociale, per il numero di lavori eccellenti presentati al concorso. E’ il suo anno, e merita il titolo di DONNAèWEB.”
Grazie!
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
Per il sito www.lasagradellacastagna.it abbiamo sperimentato un effetto semplice ma divertente di contrasto tra background e immagini contenute nelle “celle” che riproponiamo in questo tutoral.
Abbiamo utilizzato l’ultima versione di jQuery (la 1.3.2) disponibile sul sito ufficiale.
Per prima cosa impostiamo un div vuoto alla fine del body, che ci servirà a contenere l’immagine ‘desaturata’.
<body>
<div id="overlay"></div>
</body>
Nel css imposteremo #overlay {display:none;} per nascondere al caricamento della pagina il contenuto del div.
Tramite il js aggiungiamo due immagini, una colorata e l’altra all’interno del div.
function prepare() {
$('body').prepend("<img class="bg" src="images/color.jpg" />");
$("#overlay").append("<img class="bg" src="images/sepia.jpg" />");
}
Adesso aggiungiamo le “celle” nell’html, ognuna di esse conterrà delle immagini (in bianco/nero e a colori), per creare un effetto come quello del sito di esempio.
Al mouse over sulla cella dovremo ottenere l’effetto di invertire le immagini di sfondo del body (da colorata a bianco/nero) e contemporaneamente mostrare l’immagine colorata all’interno della cella (da bianco/nero a colori). Inoltre abbiamo aggiunto un altro effetto (un “expose”) per accentuare la visibilità della cella che scatena l’evento, rendendo leggermente trasparenti le celle intorno.
Nell’HTML dunque avremo:
<div>
<div><img src="images/small_sepia.jpg" /></div>
<div><img src="images/small_color.jpg" /></div>
</div>
e nel js:
var cells = $('div.cell').hover(function () {
$('#overlay').show();
cells.not(this).css("opacity",0.8);
$(this).css({
zIndex: 1000
});
$(this).find("div.photo_sepia").hide();
$(this).find("div.photo_color").show();
}, function() {
$('#overlay').hide();
a = this;
$(a).css({
zIndex: 10
});
cells.css("opacity",1);
$(this).find("div.photo_color").hide();
$(this).find("div.photo_sepia").show();
});
Abbiamo dunque creato il nostro effetto saturazione, con poche semplici righe di codice.
Una demo è visibile qui: blog.rollstudio.it/demos/ColorSwitch.
Disponibili anche i file in download