Published
Edited
Mar 12, 2018
1 star
render = {
const world = newWorld();
const width = world.cellSize * world.width;
const height = world.cellSize * world.height;
const app = new PIXI.Application({
width: width,
height: height,
antialias: false,
resolution: 1,
forceCanvas: false // cross origin image won't work with webgl for some reason
});
var stage = new PIXI.Stage(0xFFFFFF);
var textureCtx = DOM.context2d(width,height);
for (var i=0; i<world.palette.length; i++) {
textureCtx.fillStyle = 'rgba(' + world.palette[i] + ')';
textureCtx.fillRect(i*world.cellSize, 0, world.cellSize, world.cellSize);
}
var baseTexture = new PIXI.BaseTexture.fromCanvas(textureCtx.canvas);
var textures = [];
for (var i=0; i<world.palette.length; i++) {
textures.push(new PIXI.Texture(baseTexture, new PIXI.Rectangle(i*world.cellSize, 0, world.cellSize, world.cellSize)));
}
var pixels = [];
drawGrid(pixels,world,stage,textures);
while(true){
world.step();
updateGrid(pixels, world, textures);
app.renderer.render(stage);
yield app.view;
}
}
CellAuto = require("https://cdn.rawgit.com/sanojian/cellauto/master/dist/cellauto.js").catch(()=>window.CellAuto)
PIXI = require("https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
