Public
Edited
Feb 14, 2024
Insert cell
Insert cell
Insert cell
function genererSprite(side, hash, anaverse) {
// Keep the canvas and image objects
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
const width = side;
const height = side;
canvas.width = width;
canvas.height = height;

const features = {};

var s = side;
const r = fxrand;

const rint = (n) => Math.floor(r() * n);

// ------ Your sprite art starts below this line ------
// frame
ctx.globalCompositeOperation = "multiply";

ctx.lineWidth = side * 0.04;
ctx.strokeStyle = "red";
ctx.strokeRect(side * 0.02, side * 0.02, side * 0.94, side * 0.94);
ctx.strokeStyle = "cyan";
ctx.strokeRect(side * 0.04, side * 0.04, side * 0.94, side * 0.94);

function spriter() {
const definition = 10 + rint(20);

const subside = side / definition;
const decay = 1 + rint(3);

for (let y = 2; y < definition - 2; ++y) {
for (let x = 0; x < definition / 2 - 1; ++x) {
if (r() < 0.5 - (x * decay) / definition) {
ctx.fillStyle = "red";
ctx.fillRect(
side / 2 - (x + 1) * subside - 1 - side * 0.01,
y * subside - 1 - side * 0.01,
subside + 2,
subside + 2
);
ctx.fillRect(
side / 2 + x * subside - 1 - side * 0.01,
y * subside - 1 - side * 0.01,
subside + 2,
subside + 2
);
ctx.fillStyle = "cyan";
ctx.fillRect(
side / 2 - (x + 1) * subside - 1 + side * 0.01,
y * subside - 1 + side * 0.01,
subside + 2,
subside + 2
);
ctx.fillRect(
side / 2 + x * subside - 1 + side * 0.01,
y * subside - 1 + side * 0.01,
subside + 2,
subside + 2
);
}
}
}
}

spriter();

// ------ Your code stops above this line ------
const sprite = ctx.getImageData(0, 0, side, side);
return { sprite, side, features };
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more