Effetto esplosione immagine

[djmatto]

Salve a tutti,

Io ho trovato in rete uno script per fare una specie di distruzione al click sopra un'immagine, è un effetto abbastanza stupido ma volevo iniziare a capire come funziona l'html5.

Ora il mio problema è come fare per dirgli di mantere le dimensioni dell'immagine fissa e mettere il canvas al 100% in maniera da mandare i pezzi dell'immagine a occupare tutto lo schermo e non solo un rettangolo al centro.

Il codice è il seguente:

Javascript:

var sourcecanvas; // videovar copy;var copycanvas;var draw;
var cw=450;var ch=401;
var TILE_WIDTH = 5;var TILE_HEIGHT = 5;
var TILE_CENTER_WIDTH = 16;var TILE_CENTER_HEIGHT = 12;var SOURCERECT = {x:0, y:0, width:0, height:0};var PAINTRECT  = {x:0, y:0, width:cw, height:ch};
var constRange = 180;var delay = 10;var count = 0;
function loadCanvas() {
   if(sourcecanvas.getContext) {      var ctx = sourcecanvas.getContext('2d');      var img = new Image();   // Create new Image object        img.onload = function(){           var siw=cw/img.width;         var sih=ch/img.height;         var iw=siw*img.width;         var ih=sih*img.height;         ctx.drawImage(img,(0.5*cw)-(0.5*iw),(0.5*ch)-(0.5*ih));
         //var siw=cw/img.width;         //var sih=ch/img.height;         //alert('siw='+siw);         //ctx.scale(siw,sih);       };
       // Set source path         var r = Math.ceil(5 * Math.random());       r=3;       if (r==0) {          img.src = 'http://wapsbttest2.momac.net/html5/logo/godownload.jpg';        }       if (r==1) {          img.src = 'http://wapsbttest2.momac.net/html5/logo/gosell.jpg';       }       if (r==2) {          img.src = 'http://wapsbttest2.momac.net/html5/logo/logo_final_2007_rgb_big.jpg';       }       if (r==3) {          img.src = 'http://wapsbttest2.momac.net/html5/logo/gomedia.jpg';        }       if (r==4) {          img.src = 'http://wapsbttest2.momac.net/html5/logo/gotv.jpg';        }	}}
function init(){   sourcecanvas = document.getElementById('sourcecanvas');   copycanvas = document.getElementById('sourcecopy');   copy = copycanvas.getContext('2d');   outputcanvas = document.getElementById('output');   draw = outputcanvas.getContext('2d');   loadCanvas();   setInterval("processFrame()", delay);}
function animation(){     if (count>2) {         count = 0;     }     count=count+1;}
var RAD = Math.PI/180;var randomJump = false;var tiles = [];var debug = false;
function processFrame(){
    var debugStr = debugStr + "debug";
    // init     if(SOURCERECT.width == 0){         SOURCERECT = {x:0,y:0,width:PAINTRECT.width,height:PAINTRECT.height};         //loadCanvas(); // needed in iPhone         createTiles();   }
   copy.drawImage(sourcecanvas, 0, 0);
   draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);
   for(var i=0; i<tiles.length; i++){        var tile = tiles[i];        if(tile.force > 0.0001){            //expand            tile.moveX *= tile.force;            tile.moveY *= tile.force;            tile.moveRotation *= tile.force;            tile.currentX += tile.moveX;            tile.currentY += tile.moveY;            tile.rotation += tile.moveRotation;            tile.rotation %= 360;            tile.force *= 0.9;            if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){                tile.moveX *= -1;            }            if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){                tile.moveY *= -1;            }        }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){            //contract            var diffx = (tile.originX-tile.currentX)*0.2;            var diffy = (tile.originY-tile.currentY)*0.2;            var diffRot = (0-tile.rotation)*0.2;                        if(Math.abs(diffx) < 0.5){                tile.currentX = tile.originX;            }else{                tile.currentX += diffx;            }            if(Math.abs(diffy) < 0.5){                tile.currentY = tile.originY;            }else{                tile.currentY += diffy;            }            if(Math.abs(diffRot) < 0.5){                tile.rotation = 0;            }else{                tile.rotation += diffRot;            }        }else{            tile.force = 0;        }        draw.save();        draw.translate(tile.currentX, tile.currentY);        draw.rotate(tile.rotation*RAD);        draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);        draw.restore();    }    if(debug){        //debug = false;        document.getElementById('trace').innerHTML = debugStr;    }}
function Tile(){    this.originX = 0;    this.originY = 0;    this.currentX = 0;    this.currentY = 0;    this.rotation = 0;    this.force = 0;    this.z = 0;    this.moveX= 0;    this.moveY= 0;    this.moveRotation = 0;        this.videoX = 0;    this.videoY = 0;}

function createTiles(){    var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;    var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;    var y=0;    while(y < SOURCERECT.height){        var x=0;        while(x < SOURCERECT.width){            var tile = new Tile();            tile.videoX = x;            tile.videoY = y;            tile.originX = offsetX+x;            tile.originY = offsetY+y;            tile.currentX = tile.originX;            tile.currentY = tile.originY;            tiles.push(tile);            x+=TILE_WIDTH;        }        y+=TILE_HEIGHT;    }}
function explode(x, y){    for(var i=0; i<tiles.length; i++){
        var tile = tiles[i];                var xdiff = tile.currentX-x;        var ydiff = tile.currentY-y;        var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);                var randRange = constRange+(Math.random()*30);        var range = randRange-dist;        var force = 3*(range/randRange);        if(force > tile.force){            tile.force = force;            var radians = Math.atan2(ydiff, xdiff);            tile.moveX = Math.cos(radians);            tile.moveY = Math.sin(radians);            tile.moveRotation = 0.5-Math.random();        }    }    tiles.sort(zindexSort);    processFrame();}
function zindexSort(a, b){    return (a.force-b.force);}

function dropBomb(evt, obj){    var posx = 0;    var posy = 0;    var e = evt || window.event;    if (e.pageX || e.pageY){        posx = e.pageX;        posy = e.pageY;    }else if (e.clientX || e.clientY) {        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;    }    var canvasX = posx-obj.offsetLeft;    var canvasY = posy-obj.offsetTop;    explode(canvasX, canvasY);    animation();}

HTML:

<div style="display:none">									<canvas id="sourcecanvas" width="500" height="450"></canvas>									<canvas id="sourcecopy" width="500" height="450"></canvas>							</div>							<canvas id="output" width="450" height="401" onmousedown="dropBomb(event, this)" style="cursor: pointer;"></canvas>

[Nobody33]

Non si capisce nulla di questo codice senza l'indentazione giusta.

[djmatto]

Scusa non so perché ma se metto codice html mi perde la formattazione, comunque eccolo:

<script>


var sourcecanvas; // video
var copy;
var copycanvas;
var draw;


var cw=450;
var ch=401;


var TILE_WIDTH = 5;
var TILE_HEIGHT = 5;


var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var PAINTRECT  = {x:0, y:0, width:cw, height:ch};


var constRange = 180;
var delay = 10;
var count = 0;


function loadCanvas() {


   if(sourcecanvas.getContext) {
      var ctx = sourcecanvas.getContext('2d');
      var img = new Image();   // Create new Image object  
      img.onload = function(){  
         var siw=cw/img.width;
         var sih=ch/img.height;
         var iw=siw*img.width;
         var ih=sih*img.height;
         ctx.drawImage(img,(0.5*cw)-(0.5*iw),(0.5*ch)-(0.5*ih));


         //var siw=cw/img.width;
         //var sih=ch/img.height;
         //alert('siw='+siw);
         //ctx.scale(siw,sih);
       };


       // Set source path  
       var r = Math.ceil(5 * Math.random());
       r=5;
       if (r==0) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/godownload.jpg'; 
       }
       if (r==1) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/gosell.jpg';
       }
       if (r==2) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/logo_final_2007_rgb_big.jpg';
       }
       if (r==3) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/gomedia.jpg'; 
       }
       if (r==4) {
          img.src = 'http://wapsbttest2.momac.net/html5/logo/gotv.jpg'; 
       }
       if (r>4) { 
          img.src = 'http://mattiabuffetti.com/wp-content/themes/Personal/images/wallpaper.png';
       }
    }
}


function init(){
   sourcecanvas = document.getElementById('sourcecanvas');
   copycanvas = document.getElementById('sourcecopy');
   copy = copycanvas.getContext('2d');
   outputcanvas = document.getElementById('output');
   draw = outputcanvas.getContext('2d');
   loadCanvas();
   setInterval("processFrame()", delay);
}


function animation(){
     if (count>2) {
         count = 0;
     }
     count=count+1;
}


var RAD = Math.PI/180;
var randomJump = false;
var tiles = [];
var debug = false;


function processFrame(){


    var debugStr = debugStr + "debug";


    // init 
    if(SOURCERECT.width == 0){
         SOURCERECT = {x:0,y:0,width:PAINTRECT.width,height:PAINTRECT.height};
         //loadCanvas(); // needed in iPhone
         createTiles();
   }


   copy.drawImage(sourcecanvas, 0, 0);


   draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);


   for(var i=0; i<tiles.length; i++){
        var tile = tiles[i];
        if(tile.force > 0.0001){
            //expand
            tile.moveX *= tile.force;
            tile.moveY *= tile.force;
            tile.moveRotation *= tile.force;
            tile.currentX += tile.moveX;
            tile.currentY += tile.moveY;
            tile.rotation += tile.moveRotation;
            tile.rotation %= 360;
            tile.force *= 0.9;
            if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
                tile.moveX *= -1;
            }
            if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
                tile.moveY *= -1;
            }
        }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
            //contract
            var diffx = (tile.originX-tile.currentX)*0.2;
            var diffy = (tile.originY-tile.currentY)*0.2;
            var diffRot = (0-tile.rotation)*0.2;
            
            if(Math.abs(diffx) < 0.5){
                tile.currentX = tile.originX;
            }else{
                tile.currentX += diffx;
            }
            if(Math.abs(diffy) < 0.5){
                tile.currentY = tile.originY;
            }else{
                tile.currentY += diffy;
            }
            if(Math.abs(diffRot) < 0.5){
                tile.rotation = 0;
            }else{
                tile.rotation += diffRot;
            }
        }else{
            tile.force = 0;
        }
        draw.save();
        draw.translate(tile.currentX, tile.currentY);
        draw.rotate(tile.rotation*RAD);
        draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
        draw.restore();
    }
    if(debug){
        //debug = false;
        document.getElementById('trace').innerHTML = debugStr;
    }
}


function Tile(){
    this.originX = 0;
    this.originY = 0;
    this.currentX = 0;
    this.currentY = 0;
    this.rotation = 0;
    this.force = 0;
    this.z = 0;
    this.moveX= 0;
    this.moveY= 0;
    this.moveRotation = 0;
    
    this.videoX = 0;
    this.videoY = 0;
}




function createTiles(){
    var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
    var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
    var y=0;
    while(y < SOURCERECT.height){
        var x=0;
        while(x < SOURCERECT.width){
            var tile = new Tile();
            tile.videoX = x;
            tile.videoY = y;
            tile.originX = offsetX+x;
            tile.originY = offsetY+y;
            tile.currentX = tile.originX;
            tile.currentY = tile.originY;
            tiles.push(tile);
            x+=TILE_WIDTH;
        }
        y+=TILE_HEIGHT;
    }
}


function explode(x, y){
    for(var i=0; i<tiles.length; i++){


        var tile = tiles[i];
        
        var xdiff = tile.currentX-x;
        var ydiff = tile.currentY-y;
        var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);
        
        var randRange = constRange+(Math.random()*30);
        var range = randRange-dist;
        var force = 3*(range/randRange);
        if(force > tile.force){
            tile.force = force;
            var radians = Math.atan2(ydiff, xdiff);
            tile.moveX = Math.cos(radians);
            tile.moveY = Math.sin(radians);
            tile.moveRotation = 0.5-Math.random();
        }
    }
    tiles.sort(zindexSort);
    processFrame();
}


function zindexSort(a, b){
    return (a.force-b.force);
}




function dropBomb(evt, obj){
    var posx = 0;
    var posy = 0;
    var e = evt || window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    var canvasX = posx-obj.offsetLeft;
    var canvasY = posy-obj.offsetTop;
    explode(canvasX, canvasY);
    animation();
}


</script>

<div style="display:none">    
        <canvas id="sourcecanvas" width="500" height="450"></canvas>    
        <canvas id="sourcecopy" width="500" height="450"></canvas>
</div>
<canvas id="output" width="450" height="401" onmousedown="dropBomb(event, this)" style="cursor: pointer;"></canvas>

[Nobody33]

QUI una soluzione la trovi di sicuro.

[Supergirl]

oPPURE Cercare QUI