Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
var WIDTH = 64; var HEIGHT = 28; var img = document.getElementById('animation'); var ctx = document.createElement('canvas').getContext("2d"); var canvas = document.getElementById('canvas-uncle'); var stack = []; var size = 8; var point = new obelisk.Point(50, 120); 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() { ctx.drawImage(img, 0, 0, WIDTH, HEIGHT); var imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT); pixelView.clear(); for (var y = HEIGHT - 1; y >= 0; y--) { for (var x = 0; x < WIDTH - 1; 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) { // lighten color a little bit otherwise it's too dark o var fixedColor = obelisk.ColorGeom.applyBrightness(pixelColor, 50); var color = new obelisk.CubeColor().getByHorizontalColor(fixedColor); var dimension = new obelisk.CubeDimension(size, size + 2, size); cube = new obelisk.Cube(dimension, color, false); stack.push([cube, pixelColor]); } var p3d = new obelisk.Point3D(x * (size - 2), 0, (HEIGHT - 1 - y) * (size)); pixelView.renderObject(cube, p3d); } } } } // render interval window.setInterval(draw, 50); // build floor var canvasFloor = document.getElementById('canvas-floor'); var pixelViewFloor = new obelisk.PixelView(canvasFloor, point); var floorDimension = new obelisk.CubeDimension((size - 2) * (WIDTH + 2), (size - 2) * 9, size); var floor = new obelisk.Cube(floorDimension, new obelisk.CubeColor(), false); pixelViewFloor.renderObject(floor, new obelisk.Point3D(-20, -30, 0));
CSS
body { margin: 3px 0 0 5px; padding: 0; border: 0; background-color: #FFFFFF; } #canvas-uncle, #canvas-floor { position: absolute; left: 50px; top: 0; } img { position: absolute; } .title, .title a { font-family: "Helvetica", Arial, sans-serif; font-size: 13px; color: #BBB; } .title .uncle { margin-left: 20px; } .main { position: relative; margin-top: 5px; }
HTML
■ pixelated by obelisk.js
https://github.com/nosir/obelisk.js
■ gif provided by
unclebig2D
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email