Visualization, Prototypes, ML, Data wrangling and Art.
Published
Edited
Jul 14, 2020
2 stars
md`# Pixi Spritesheet Loader v1`
delay = 200
url = "https://vikusviewer.fh-potsdam.de/smb/beide/data/sprites/web_web_full.json" //
baseUrl = url.substring(0, url.lastIndexOf('/')) + "/"
async function* loadTextures() {
const textures = new Map()
const baseTextures = []
for(const sprites of data.spritesheets){
const baseTexture = await loadTexture(baseUrl + sprites.image);
baseTextures.push(baseTexture)
for(const spritedata of sprites.sprites){
const texture = extractSpriteTexture(baseTexture, spritedata)
textures.set(spritedata.name, texture)
}
if(delay) await Promises.delay(delay);
yield textures
}
invalidation.then(() => {
console.log("invalidate textures")
for(const baseTexture of baseTextures){
baseTexture.destroy()
}
for(const texture of textures.values()){
texture.destroy()
}
});
return textures
}
sprites = {
const sprites = new Map()
const textures = loadTextures()
const iterator = textures[Symbol.asyncIterator]();
invalidation.then(() => {
for(const sprite of sprites.values()){
container.removeChild(sprite)
sprite.destroy()
}
});
while (true) {
const {done, value} = await iterator.next();
Array.from(value.keys())
.filter(x => !sprites.has(x))
.forEach(id => {
const texture = value.get(id)
const sprite = makeSprite(texture);
container.addChild(sprite)
sprites.set(id, sprite)
})
if (done) return;
yield sprites;
}
}
{
sprites;
return container.children.length; //return PIXI.js container size to confirm only new sprites/Textures are created
}
loop = {
const x = (Math.sin(now / 1000));
sprites.forEach(sprite => {
sprite.position.x += x
})
renderer.render(container)
}
PIXI.utils
import { renderer, container, PIXI, width, height } from "@cpietsch/pixi-renderer"
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.
