Creating a Photo Scrambler grid in javascript

Creating a Photo Scrambler grid in javascript

0 23760
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 | 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

Understanding Closures

0 24615

NO COMMENTS

Leave a Reply