JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/pixi.js/1.5.1/pixi.js"></script>
<script src="https://rawgit.com/mrdoob/stats.js/master/src/Stats.js"></script>
<canvas id="view"></canvas>
JavaScript
function init()
{
var width = 500;
var height = 500;
var PIXEL_SIZE = 8;
var canvas = document.getElementById("view");
var stage = new PIXI.Stage(0x000000);
var renderer = new PIXI.autoDetectRenderer(width, height, canvas, null, true);
var colors = ['rgb(0, 255, 255)', 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];
var textures = [];
var pixels = [];
var colorIndex = 0;
for (var i=0; i<colors.length; i++) {
var textureCanvas = document.createElement('canvas');
textureCanvas.width = PIXEL_SIZE;
textureCanvas.height = PIXEL_SIZE;
var textureCtx = textureCanvas.getContext('2d');
textureCtx.fillStyle = colors[i];
textureCtx.fillRect(0, 0, PIXEL_SIZE, PIXEL_SIZE);
textures.push(PIXI.Texture.fromCanvas(textureCanvas));
}
function update() {
for (var y=0; y<height/PIXEL_SIZE; y++) {
for (var x=0; x<width/PIXEL_SIZE; x++) {
colorIndex += 1;
if (colorIndex >= colors.length) colorIndex = 0;
pixels[x + y*Math.ceil(width/PIXEL_SIZE)].setTexture(textures[colorIndex]);
}
}
renderer.render(stage);
stats.end();
requestAnimationFrame(update);
}
function draw() {
for (var y=0; y<height/PIXEL_SIZE; y++) {
for (var x=0; x<width/PIXEL_SIZE; x++) {
var sprite = new PIXI.Sprite(textures[0]);
pixels[x + y*Math.ceil(width/PIXEL_SIZE)] = sprite;
sprite.x = x*PIXEL_SIZE;
sprite.y = y*PIXEL_SIZE;
stage.addChild(sprite);
}
}
renderer.render(stage);
}
draw();
requestAnimationFrame(update);
}
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top =...