EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

// pixelated by obelisk.js
// http://nosir.github.io/obelisk.js

// control bar
var ControlBar = function () {
    this.size = 18;
    this.snap = false;
};

var con = new ControlBar();
var gui = new dat.GUI();

var conSize = gui.add(con, 'size', 6, 40).step(2);
conSize.onChange(function () {
    draw();
});

var conSnap = gui.add(con, 'snap');
conSnap.onChange(function () {
    draw();
});

var WIDTH = 17;
var HEIGHT = 12;

var img = document.getElementById('animation');
var ctx = document.createElement('canvas').getContext("2d");
var canvas = document.getElementById('canvas-demo');

var stack = [];
var point = new obelisk.Point(250, 10);
var pixelView = new obelisk.PixelView(canvas, point);

function getPixel(data, x, y) {
    var index = (y * WIDTH + x) * 4;
    var r = data[index];
    var g = data[index + 1];
    var b = data[index + 2];
    return ((r << 16) | (g << 8) | b);
}

function draw() {
    var size = con.size;
    var snap = con.snap ? 2 : 0;
    stack = [];
    ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);
    var imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
    pixelView.clear();
  
   var color = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.GRAY);
    var dimension = new obelisk.BrickDimension(size, size);
    var brick = new obelisk.Brick(dimension, color);
    for (var y = 0; y <= HEIGHT; y++) {
       for (var x = 0; x <= WIDTH; x++) {
         var p3d = new obelisk.Point3D(x * (size - snap), y * (size - snap), 0);
         pixelView.renderObject(brick, p3d);
       }
    }
  
    for (var y = 0; y < HEIGHT; y++) {
        for (var x = 0; x < WIDTH; x++) {
            var pixelColor = getPixel(imgData.data, x, y);
            if (pixelColor !== 0xFFFFFF) {
                var cube;
                var flag = false;
                for (var i in stack) {
                    if (stack[i][1] === pixelColor) {
                        cube = stack[i][0];
                        flag = true;
                        break;
                    }
                }

if (!flag) {
                    var color = new obelisk.CubeColor().getByHorizontalColor(pixelColor);
                    var dimension = new obelisk.CubeDimension(size, size, size - 2);
                    cube = new obelisk.Cube(dimension, color, false);
                    stack.push([cube, pixelColor]);
                }
                var p3d = new obelisk.Point3D(x * (size - snap), y * (size - snap), 0);
                pixelView.renderObject(cube, p3d);
            }
        }
    }
}

draw();

CSS

HTML

<script src="https://rawgithub.com/nosir/obelisk.js/master/build/obelisk.js" type="text/javascript"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>

<div class="title">■ pixelated by obelisk.js <a href="https://github.com/nosir/obelisk.js" target="_blank">https://github.com/nosir/obelisk.js</a></div>

<img alt="" id="animation" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAMCAIAAAALR8HoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyQTZBMEE4QTlBMzgxMUUzOEE4OENFNTcxREEzNUYxRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyQTZBMEE4QjlBMzgxMUUzOEE4OENFNTcxREEzNUYxRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjJBNkEwQTg4OUEzODExRTM4QTg4Q0U1NzFEQTM1RjFEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjJBNkEwQTg5OUEzODExRTM4QTg4Q0U1NzFEQTM1RjFEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+PcKE9QAAAM1JREFUeNp8UsENwjAMTEoZoIvw4cWffFIxAaP0zShMUNFPBuDPInkigVC4xI1xXYlTK9mWzz47tikls4RzTkVCCAs/CRwLXhVsw5BpRhIoIz33+CRZ0RoSQ3q899vPwayA+DRNrLmFBf83jPdhjOYvGuXneqcuzz1GlOegzGnxQ897cye/aOvmdY3RVRqvFDu0mClbVQ+aSPu665SQ8yNaeh+e73aZCf2QCchYv1XLDmez2w9G9aESlu+AWikmuq0PwqrbUYejr6bgK8AAcC+qNZLdhhkAAAAASUVORK5CYII=" />

<canvas id="canvas-demo" class="stage-canvas" width="800" height="600"></canvas>

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: