Creating a Photo Scrambler grid in javascript

  • Reading time:6 mins read
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

[sociallocker]

download in package

[/sociallocker]

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 | Dev School (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://dev-school.net/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!