Creating a Photo Scrambler grid in javascript

Creating a Photo Scrambler grid in javascript

0 8955
Photo grid in javascript

Photo grid with javascript. Today we continue JavaScript examples, and today we will create effect of splitting image to pieces (transforming image into grid), plus – our pieces will moving when we will move our mouse pointer. This will pretty interesting demonstration. As we using pure javascript, our result will quite crossbrowser. I already checked it in most major browsers.

Here are sample and downloadable package:

Live Demo

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML.

This is our main page code of our sample.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>Photo grid (random pieces) example | Script Tutorials (2011)</title> 
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/script.js"></script>
</head>
<body>
<h3><a href="#">Photo grid (random pieces) example</a></h3>
<div class="example" id="example">
<div id="grid"></div> 
<img id="src_img" src="data_images/01.jpg" style="visibility:hidden">
</div>
<hr style="clear:both;" />
<h4><a href="https://www.script-tutorials.com/photo-grid-in-javascript/">back to original article page</a></h4>
</body>
</html>

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;margin:0;padding:0}
h3 {text-align:center}
.example{background:#FFF;width:900px;height:600px;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;overflow: hidden}
#grid {position:relative;width:100%;height:100%}
#grid .span {overflow:hidden;font-size:1px;position:absolute;left:-9999px}

Step 3. JS

Here are our main control JS file. Most inportant functionality here.

js/script.js

function CObj(y,x){
this.obj = document.createElement('span'); 
this.obj.className='span'; 
this.img = document.createElement('img'); 
this.img.style.position='absolute'; 
this.img.src = rgrid.doot.src; 
this.obj.appendChild(this.img); 
rgrid.mobj.appendChild(this.obj); 
this.x = x; 
this.y = y; 
this.L = 0; 
this.T = 0; 
this.xr = (this.x / 2) % 1 ? 1 : -1; 
this.yr = (this.y / 2) % 1 ? 1 : -1; 
this.xf = Math.random() * 4 + 1; 
this.yf = Math.random() * 4 + 1; 
//initialization function
this.init = function (){ 
this.L  = Math.round(this.x * rgrid.Nx); 
this.T  = Math.round(this.y * rgrid.Ny); 
this.obj.style.width  = Math.round(rgrid.Nx + 1) + 'px'; 
this.obj.style.height = Math.round(rgrid.Ny + 1) + 'px'; 
this.img.style.left   = Math.round(-this.L) + 'px'; 
this.img.style.top    = Math.round(-this.T) + 'px'; 
}
// update object positions
this.draw = function (){ 
this.obj.style.left   =  Math.round(this.L + (-rgrid.nx / 4 + rgrid.xm) * (this.xr * this.xf)) + 'px'; 
this.obj.style.top    =  Math.round(this.T + (-rgrid.ny / 4 + rgrid.ym) * (this.yr * this.yf)) + 'px'; 
} 
}
var rgrid = {
// external variables
NX  : 5, // amount X elements
NY  : 5, // amount Y elements
// internal variables
mobj : null,
doot : null,
objects : new Array(),
nx  : 0,
ny  : 0,
nxp  : 0,
nyp  : 0,
Ix  : 0,
Iy  : 0,
Ox  : 0,
Oy  : 0,
xm  : 0,
ym  : 0,
// main initialization function
init : function(){
this.mobj  = document.getElementById('grid'); 
this.doot = document.getElementById('src_img'); 
var k = 0; 
for(var i=0; i<this.NY; i++) 
for(var j=0;j<this.NX;j++) 
this.objects[k++] = new CObj(i,j); 
this.nxp = this.mobj.parentNode.offsetLeft / 2; 
this.nyp = this.mobj.parentNode.offsetTop / 2; 
},
// resize function
resize : function(){
this.nx = this.mobj.offsetWidth; 
this.ny = this.mobj.offsetHeight; 
this.nxp = this.mobj.parentNode.offsetLeft / 2; 
this.nyp = this.mobj.parentNode.offsetTop / 2; 
this.Ix = this.doot.width; 
this.Iy = this.doot.height; 
this.Nx = Math.round(this.Ix / this.NX); 
this.Ny = Math.round(this.Iy / this.NY); 
this.Ox = (this.nx - this.Ix) / 2; 
this.Oy = (this.ny - this.Iy) / 2; 
var css = this.mobj.style; 
css.left   = Math.round(this.Ox) + 'px'; 
css.top    = Math.round(this.Oy) + 'px'; 
css.width  = Math.round(this.Ix) + 'px'; 
css.height = Math.round(this.Iy) + 'px'; 
var i = 0, o; 
while (o = this.objects[i++]) 
o.init(); 
},
// main loop drawing function
run : function(){
var i = 0, o;
while (o = rgrid.objects[i++]) 
o.draw(); 
setTimeout(rgrid.run, 20); 
} 
}
// page onload
window.onload = function() {
rgrid.init(); // perform initialization
rgrid.resize(); // perform resizing
rgrid.xm = rgrid.nx / 4 - Math.random() * 50; 
rgrid.ym = rgrid.ny / 4 - Math.random() * 50; 
rgrid.run(); 
// binding onresize event
window.onresize = rgrid.resize();
}
// binding onmousemove event
document.onmousemove = function(e){ 
if (window.event) e = window.event; 
rgrid.xm = ((e.x || e.clientX) / 2) - rgrid.nxp;
rgrid.ym = ((e.y || e.clientY) / 2) - rgrid.nyp;
if (Math.abs(2 * rgrid.xm - rgrid.nx / 2) < 2 && Math.abs(2 * rgrid.ym - rgrid.ny / 2) < 2){ 
rgrid.xm = rgrid.nx / 4; 
rgrid.ym = rgrid.ny / 4; 
} 
} 

Step 4. Images

Our sample image located in ‘data_images’ folder.

sunset


Live Demo

Conclusion

Hope that you was happy to investigate and play with our javascript lessons. I hope that today`s example looks fine :) If is you were wondering – do not forget to thank. Will glad to listen your interesting comments. Good luck!

SIMILAR ARTICLES

Bootstrap Forms

0 60
jQuery Mobile Lesson 6

0 15

NO COMMENTS

Leave a Reply