A HTML5 canvas implementation of the picture glass fragment effect

Today to bring you a HTML5 canvas implementation of the picture glass fragment effect. The picture appears in the form of a glass fragment into the interface, and then the effect of the glass being smashed is gradually being heard. The effect chart is as follows:

HTML code:

The

code is as follows:


<img src= "city_copy.jpg" id= "src_img" class= "hidden" >


<div id= "container" style= "-webkit-perspective:500px"; >


<div>


<script src= "Delaunay.js" ></script>


<script src= "TweenMax.min.js" ></script>


 

JS Code:

The

code is as follows:


//Canvas settings


var imagewidth = 768,


imageheight = 485;


var vertices = [],


Indices,


boxes = [];


var image,


fragments = [],


container = document.getElementById (' container ');


Window.onload = function () {


image = document.getElementById (' src_img ');


triangulate ();


makeboxes ();


makefragments ();


};


function triangulate () {


var x,


y,


dx = IMAGEWIDTH/8,


dy = imageheight/8,


offset = 0.5;


for (var i = 0; I <= imagewidth i = dx) {


for (var j = 0; J <= imageheight j = dy) {


if (i && (i!== imagewidth)) x = i + randomrange (-DX * offset, DX * offset);


else x = i;


if (j && (J!== imageheight)) y = j + randomrange (-dy * offset, dy * offset);


Else y = j;


Vertices.push ([x, y]);


}


}


indices = delaunay.triangulate (vertices);


}


function makeboxes () {


var p0, p1, p2,


xmin, Xmax,


ymin, Ymax;


for (var i = 0; i < indices.length i + = 3) {


p0 = vertices[indices[i + 0]];


P1 = vertices[indices[i + 1]];


P2 = vertices[indices[i + 2]];


xmin = Math.min (P0[0], p1[0], p2[0]);


xmax = Math.max (P0[0], p1[0], p2[0]);


ymin = Math.min (p0[1], p1[1], p2[1]);


ymax = Math.max (p0[1], p1[1], p2[1]);


Boxes.push ({


X:xmin,


Y:ymin,


W:xmax-xmin,


H:ymax-ymin


});


}


}


function makefragments () {


var p0, p1, p2,


box,


fragment;


Tweenmax.set (container, {perspective:500});


var tl0 = new Timelinemax ({repeat:-1});


for (var i = 0; i < indices.length i = 3) {


p0 = vertices[indices[i + 0]];


P1 = vertices[indices[i + 1]];


P2 = vertices[indices[i + 2]];


box = BOXES[I/3];


fragment = new Fragment (P0, P1, p2, box);


var rx = Randomrange * ((i% 2) 1:1);


var ry = randomrange ((i% 2)- -1:1);


var tl1 = new Timelinemax ();


Tweenmax.set (Fragment.canvas, {


y:box.y-1000


});


tl1.to (Fragment.canvas, Randomrange (0.9, 1.1), {


y:box.y,


Ease:Back.easeOut


});


tl1.to (Fragment.canvas, 0.5, {


Z:-100,


Ease:Cubic.easeIn,


delay:0.4


});


tl1.to (Fragment.canvas, Randomrange (1, 1.2), {


Rotationx:rx,


Rotationy:ry,


z:250,


alpha:0,


Ease:Cubic.easeOut


});


Tl0.insert (TL1);


Fragments.push (fragment);


Container.appendchild (Fragment.canvas);


}


}


function Randomrange (min, max) {


return min + (max-min) * Math.random ();


}


Fragment = function (V0, V1, v2, box) {


this.v0 = V0;


this.v1 = v1;


this.v2 = v2;


this.box = box;


This.canvas = document.createelement (' canvas ');


this.canvas.width = THIS.BOX.W;


this.canvas.height = this.box.h;


this.canvas.style.width = this.box.w + ' px ';


this.canvas.style.height = this.box.h + ' px ';


this.ctx = This.canvas.getContext (' 2d ');


Tweenmax.set (This.canvas, {


x:this.box.x,


y:this.box.y


});


this.ctx.translate (-this.box.x,-this.box.y);


This.ctx.beginPath ();


This.ctx.moveTo (this.v0[0], this.v0[1]);


This.ctx.lineTo (this.v1[0], this.v1[1]);


This.ctx.lineTo (this.v2[0], this.v2[1]);


This.ctx.closePath ();


This.ctx.clip ();


this.ctx.drawImage (image, 0, 0);


}; @ sourceurl=pen.js