Creating a Photo Scrambler grid in javascript

Photo grid in 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

download in package

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="http://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.

Live Demo

download in package

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!

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.

Stay connected with us:

Written by: admin on August 3, 2011.

Script Tutorials