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";
const background = () => {
//ctx.fillStyle = "white";
//ctx.fillRect(0, 0, side, side);
ctx.fillStyle = "black";
const fact = 4 + rint(10);
const density = 0.05 + r() * 0.45;
for (let x = 0; x < (side * 2) / fact; ++x) {
for (let y = 0; y < side / fact; ++y) {
const coreX = -side + x * fact + y * fact;
if (x % 2 && coreX > 0 && coreX < side) {
if (r() < density) {
ctx.fillRect(coreX, y * fact, fact, fact);
}
}
}
}
return ctx.getImageData(0, 0, side, side);
};
// ctx.clearRect(0, 0, side, side);
// middle line
//ctx.fillStyle = "red";
//ctx.fillRect(side / 2 - 2, 0, 4, side);
// ctx.lineWidth = 20;
const positionPrefill = [];
for (let i = 0; i < 999999; ++i) {
positionPrefill.push(r());
}
const endy = side * 0.2 + side * 0.8 * r();
const cpax = side * 0.5 * r();
const cpay = side * 0.5 * r();
const cpbx = side * 0.5 * r();
const cpby = side * 0.5 * r();
const definition = side * 0.15;
const flatFactor = 1 + rint(3);
const decay = 1; //+ rint(2);
const subsidex = (flatFactor * side) / definition;
const subsidey = side / definition;
const ellipse = [
side * 0.1 + side * 0.3 * r(),
side * 0.3 + side * 0.3 * r(),
side * 0.01 + side * 0.15 * r(),
side * 0.01 + side * 0.1 * r(),
-Math.PI * 0.5 + Math.PI * r(),
0,
Math.PI * 2
];
const eye = [ellipse[0], ellipse[1], ellipse[2] / 4, 0, Math.PI * 2];
const eyeinvert = r() < 0.5;
const halfFace = () => {
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0, side * 0.2);
ctx.bezierCurveTo(cpax, cpay, cpbx, cpby, side / 2, endy);
ctx.lineTo(side / 2, side);
ctx.lineTo(0, side);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "white";
var count = 0;
for (let y = 2; y <= definition + 2; ++y) {
for (let x = -flatFactor * 2; x < (0.5 * definition) / flatFactor; ++x) {
if (positionPrefill[count] < 0.5 - (x * decay) / definition) {
ctx.fillRect(
side / 2 + subsidex - (x + 1) * subsidex - 1 - side * 0.01,
y * subsidey - 1 - side * 0.01,
subsidex + 2,
subsidey + 2
);
}
count++;
}
}
ctx.closePath();
//eyes
ctx.beginPath();
ctx.fillStyle = eyeinvert ? "black" : "white";
ctx.ellipse(...ellipse);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = eyeinvert ? "white" : "black";
ctx.arc(...eye);
ctx.fill();
ctx.closePath();
};
const getFace = () => {
ctx.translate(side / 2, 0);
ctx.scale(-1, 1);
halfFace();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.translate(side / 2, 0);
halfFace();
ctx.setTransform(1, 0, 0, 1, 0, 0);
return ctx.getImageData(0, 0, side, side);
};
const face = getFace();
const bg = background();
// ctx.clearRect(0, 0, side, side);
// ctx.putImageData(face, 0, 0);
//ctx.globalCompositeOperation = "multiply";
// ctx.putImageData(bg, 0, 0);
// ------ Your code stops above this line ------
const sprite = ctx.getImageData(0, 0, side, side);
return { sprite, side, features };
}
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.
