A PHP Error was encountered

Severity: Notice

Message: Only variable references should be returned by reference

Filename: core/Common.php

Line Number: 257

PixelGrid | Lab | Kenji Honma | webdev projects

Reference

PixelGrid

The PixelGrid Object divides a HTML-canvas element into large pixels which can be colorized and turned on and off.
By creating an PixelGridImage, the Plugin can be used to pixelize pictures without antialiasing and display them on the canvas.
PixelGridSpriteImage extends the PixelGridImage by defining a sprite size and methods to show particular sprites from the spritesheet.
PixelGridImageGallery takes an array of image-sources and uses a PixelGridSpriteImage to display them with an animated fading effect.

PixelGrid is still very experimental and it's too early to provide a reference for PixelGrid.

Reference

Installation

Download the pixelgrid.js file and put it to any directory.
Include the file in your document.
The plugin will create the global variable pixelgrid on the window-object.

Demos

PixelGrid

var pxg = pixelgrid.createPixelGrid(
        "pixelgrid_demo-simple", 
        {w:10, h:5}
    );

var pixels = pxg.pixels;

for(var x = 0; x < pixels.length; x++){
    for(var y = 0; y < pixels[x].length; y++){
        pixels[x][y].color = (x % 2 === y % 2) ? '#eeff99' : '#99eeff';
    }
}

pxg.draw();

PixelGridImage

with resolution-setter

var pxg = pixelgrid.createPixelGridImage(
        "js/pixelgrid/sprites/park.jpg", 
        "pixelgrid_demo2", 
        {w:10, h:5}
    );

var res_setter = document.getElementById("res_setter");
    res_setter.addEventListener('change', function(){
        pxgi.grid.setRes({
            w: this.value*2,
            h: this.value
        });
        pxg.putImage();
    });

Alpha map

on a PixelGridImage

arrowkeys move the pixels 
var img = new Image();
img.src= 'js/pixelgrid/sprites/pixelgridlogoalpha2.jpg';

var pxg = pixelgrid.createPixelGridImage(
        "js/pixelgrid/sprites/rauschen.jpg", 
        "pixelgrid_demo", 
        {w:30, h:15},
        function(){
            pxg.sectionSize = {w:200,h:100};

            pxg.grid.putImageData(img, 0,0,400,200,true);
        }
    );

PixelGridSpriteImage

sprite source 

var pxg = pixelgrid.createPixelGridSpriteImage(
        "js/pixelgrid/sprites/ea.png", 
        "pixelgrid_demo3",
        {w:24, h:33}, 
        false,
        {w:24, h:33}
    );
window.setInterval(
    function(){pxg.nextFrame();}, 500
);
}());

PixelGridGallery

var img_sources = [ "js/pixelgrid/sprites/gallery/1.jpg",
                    "js/pixelgrid/sprites/gallery/2.jpg",
                    "js/pixelgrid/sprites/gallery/3.jpg",
                    "js/pixelgrid/sprites/gallery/4.jpg",
                    "js/pixelgrid/sprites/gallery/5.jpg",
                    "js/pixelgrid/sprites/gallery/6.jpg",
                    "js/pixelgrid/sprites/gallery/7.jpg",
                    "js/pixelgrid/sprites/gallery/8.jpg"];

pxg_gallery = pixelgrid.createPixelGridImageGallery(
        img_sources,
        "pixelgrid_demo-gallery", 
        {w:16, h:9}
    );

Comments

2015-01-24 13:50:48
Da Dum

This is just what i was looking for. I will try it on my website!

Add a comment