Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
md`# Pixi Spritesheet Loader`
delay = 1000
url = "https://vikusviewer.fh-potsdam.de/smb/beide/data/sprites/web_web_full.json" //
baseUrl = url.substring(0, url.lastIndexOf('/')) + "/"
data = await fetch(url).then(r => r.json())
function extractSpriteTexture(texture, sprite) {
const frame = new PIXI.Rectangle(
sprite.position.x,
sprite.position.y,
sprite.dimension.w,
sprite.dimension.h
);
const orig = new PIXI.Rectangle(
0,
0,
sprite.dimension.w,
sprite.dimension.h
);
return new PIXI.Texture(texture, frame, orig, false, false);
}
async function* loadTextures() {
const textures = [];
const baseTextures = [];
invalidation.then(() => {
console.log("invalidate textures");
for (const [id, texture] of textures.flat()) {
texture.destroy();
}
});
for (const sprites of data.spritesheets) {
const baseTexture = await loadTexture(baseUrl + sprites.image);
baseTextures.push(baseTexture);
const textureGroup = [];
for (const spritedata of sprites.sprites) {
const texture = extractSpriteTexture(baseTexture, spritedata);
textureGroup.push([spritedata.name, texture]);
}
textures.push(textureGroup);
if (delay) await Promises.delay(delay);
yield textureGroup;
}
}
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();
if (done) return;
for (const [id, texture] of value) {
const sprite = new PIXI.Sprite(texture);
sprite.anchor.set(0.5);
sprite.x = Math.random() * width;
sprite.y = Math.random() * height;
sprite.scale.set(0.1);
container.addChild(sprite);
sprites.set(id, sprite);
}
yield sprites;
}
}
{
sprites;
return container.children.length; //return PIXI.js container size to confirm only new sprites/Textures are created
}
{
const x = Math.sin(now / 1000);
sprites.forEach(sprite => {
sprite.position.x += x; // commented to see new sprites comming
});
renderer.render(container);
return renderer.view;
}
/*sprites = {
let difference = Array.from(textures.keys()).filter(x => !spriteCache.has(x));
console.log(difference)
for(const id of difference){
const sprite = new PIXI.Sprite(textures.get(id));
sprite.anchor.set(0.5)
sprite.x = Math.random()*width
sprite.y = Math.random()*height
sprite.scale.set(0.1)
mutable spriteCache.set(id, sprite)
container.addChild(sprite)
}
//invalidation.then(() => enter exit ?);
renderer.render(container)
return spriteCache
}
*/
// mutable spriteCache = new Map()
// {
// const button = html`<button>clear spritecache`;
// button.onclick = () => spriteCache.clear();
// return button;
// }
//
// loop = {
// const x = (Math.sin(now / 1000) + 1) / 2 * (width);
// 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.
