Roll dock » Lab 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 Effetto “Color Switch” http://blog.rollstudio.it/it/2009/12/effetto-color-switch/ http://blog.rollstudio.it/it/2009/12/effetto-color-switch/#comments Thu, 03 Dec 2009 13:43:41 +0000 admin http://blog.rollstudio.it/?p=203 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

]]> http://blog.rollstudio.it/it/2009/12/effetto-color-switch/feed/ 0 Vappensiero per Facebook http://blog.rollstudio.it/it/2009/08/vappensiero-per-facebook/ http://blog.rollstudio.it/it/2009/08/vappensiero-per-facebook/#comments Thu, 27 Aug 2009 20:45:15 +0000 admin http://blog.rollstudio.it/?p=81 char_

Ciao a tutti,

è con nostro immenso piacere che presentiamo la nostra prima applicazione Facebook, che abbiamo evocativamente intitolato col nome “Vappensiero“.

L’applicazione nasce per gioco, durante le nostre “vacanze creative” estive. Insieme ad un nutrito ed entusiasta gruppo di persone  abbiamo voluto confrontarci in questo (nostro) inesplorato campo di applicazione. Per le note di sviluppo rimanderei gli approfondimenti (e gli sfoghi :) ) in un nuovo post, nel quale descriveremo gli aspetti più tecnici legati all’approccio con il sistema di integrazione della piattaforma di Facebook.

Il “tema” goliardico dell’applicazione è stato ispirato dai fatti di politica di questi giorni, che sempre più spesso affollano le pagine dei giornali e dei notiziari nazionalpopolari.

Ovviamente i proclami in cui ci imbattiamo nelle notizie riportate dai quotidiani ci strappano un sorriso, divertito o amaro che sia, che facilmente ci inducono a rileggere i concetti in chiave satirica. A volte però le citazioni parlano da sole e in quanto tali le riportiamo :)
Le citazioni sono contrassegnate da una fonte rintracciabile, dall’autore e, quando possibile, dal contesto, per averne visione e conoscenza contattateci scrivendo a vappensiero@rollstudio.it.

Ci farebbe molto piacere la partecipazione i tutti i lettori che trovano stimolante questo tema, a cui chiediamo di inviare la segnalazione di una citazione o di una frase a vappensiero@rollstudio.it, specificarndone la fonte, la data e l’autore della frase.

Di seguito il proclama:

Questa   applicazione   nasce   per   uomini   veri:   combattenti   indefessi  (qualsiasi   cosa   significhi)   e   difensori   parzialmente   stremati  della   verde   patria   si   bella   e   perduta.   Altrimenti:   va   a   ciapà   i ratt!
Grazie   a   questo   piccolo   pulpito,   che   solo   il   cuore   crociato   e   la volontà   di   noi,   noi   uomini   celtiaci   e   fieri,   porterà   alla   giusta grandezza,   possiamo   finalmente   liberarci   e   urlare   a   denti   stretti  contro il mondo centralizzato:
vaff..vappensiero!!
La   “lega   longobarda”   nasceva   nell’aprile   del   1167,   decisa   a   non  farsi   sottomettere   dall’invasore   straniero   e   dalle  sue   assurde tradizioni.  Fu il primo vero limite all’immigrazione clandestina.
Ed   ora   come   allora   eccoci   costretti   a   combattere   di   nuovo   contro uno scetticismo imperante, un relativismo rivoluzionario, un libero pensiero   che   si   vorrebbe   muovere   fuori   dalle   redini  delle   ali  dorate  di cristiane  e italiche  radici:  le sole  capaci di  guidarlo  e costringerlo sulla giusta via, la nostra.
Noi   avanguardisti   verdisti,   ci   prendiamo   questo   spazio   e   lo mettiamo   al   vostro   servizio.

Condividi   un   vappensiero   sul   tuo profilo,   dimostrando   che   ognuno   ce   l’ha   duro   e   libero   in   casa  propria.
E se la tua voce si alza volutamente senza diplomazia, e gagliardo rifiuti   di   essere   coinvolto   nell’astuzia   della   palude   di  facebook che   non   si   accorge   che   così   tutto   muore,   suggerisci   il   tuo vappensiero.   Se   è   abbastanza   xenofobo,   ignorante,   razzista, antintelletuale,   dogmatico,   umilmente   piegato   alle   tradizioni locali   (le   nostre,   bada   bene)   verrà   pubblicato   e   messo   a disposizione   della   popolare   saggezza   dei   verdisti   coloni   di facebook.

Ringraziamo infine i volontari verdisti che hanno contribuito all’idea e alla realizzazione della prima FB app rollosa: oltre agli irriducibili Renato, Orlando, Lara e Luisa segnaliamo il prezioso apporto di Andrea Gioseffi e Francesco Leone per testi e ricerca citazioni, Marco Perugini per le caricature e tutti i nostri fan per il supporto.

]]> http://blog.rollstudio.it/it/2009/08/vappensiero-per-facebook/feed/ 0