Tech Lead at Taktile.
Formerly Firebase, Google
Public
Edited
Nov 3, 2023
1 star
pixi = import("https://cdn.skypack.dev/pixi.js@6.2.0")
app = new pixi.Application({ width: 800, height: 600 })
spaceshipSVG = {
const svgData = `<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"> <polygon points="20,5 40,55 20,45 0,55" fill="lime" /> <circle cx="20" cy="30" r="15" fill="blue" /> </svg>`;
return `data:image/svg+xml,${encodeURIComponent(svgData)}`;
}
spaceshipTexture = {
return pixi.Texture.from(spaceshipSVG);
}
spaceship = {
const sprite = new pixi.Sprite(spaceshipTexture);
sprite.x = 400;
sprite.y = 300;
app.stage.addChild(sprite);
return sprite;
}
keyState = {
const state = {};
document.addEventListener("keydown", function (event) {
state[event.code] = true;
});
document.addEventListener("keyup", function (event) {
state[event.code] = false;
});
return state;
}
moveSpaceship = {
app.ticker.add(() => {
if (keyState["ArrowUp"]) spaceship.y -= 5;
if (keyState["ArrowDown"]) spaceship.y += 5;
if (keyState["ArrowLeft"]) spaceship.x -= 5;
if (keyState["ArrowRight"]) spaceship.x += 5;
});
}
pixiSprite = import("https://cdn.skypack.dev/@pixi/sprite")
canvasContainer = {
const container = document.createElement("div");
app.view.style.border = "1px solid black";
container.appendChild(app.view);
return container;
}
canvasContainer
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.
