Spaces:
Running
Running
File size: 3,635 Bytes
4635d45 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>authoring test</title>
<style>
body { font: 13px system-ui, sans-serif; margin: 16px; background: #f4f4f4; }
#result { font-weight: bold; margin: 8px 0; }
#grid { display: flex; flex-wrap: wrap; gap: 10px; }
figure { margin: 0; background: #fff; border: 1px solid #ccc; padding: 4px; }
figure canvas { display: block; image-rendering: pixelated; }
figcaption { font-size: 11px; text-align: center; margin-top: 2px; }
pre { background: #fff; border: 1px solid #ccc; padding: 8px; max-width: 640px; overflow: auto; }
/* checkerboard so sprite transparency is visible */
.cell { background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
linear-gradient(-45deg, #ddd 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ddd 75%),
linear-gradient(-45deg, transparent 75%, #ddd 75%);
background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
</style>
</head>
<body>
<h3>authoring pipeline test</h3>
<div id="result">running…</div>
<div id="grid"></div>
<pre id="manifest"></pre>
<script type="module">
import { fit512, newCanvas, rad } from "../js/imageops.js";
import { buildCharacter } from "../js/onboard.js";
import { deriveAll } from "../js/derive.js";
// (a) synthetic 200x200 drawing: white bg, two dark eye dots, a dark mouth arc.
function syntheticDrawing() {
const c = newCanvas(200, 200);
const g = c.getContext("2d");
g.fillStyle = "#ffffff";
g.fillRect(0, 0, 200, 200);
g.fillStyle = "#202020";
for (const cx of [72, 128]) { g.beginPath(); g.arc(cx, 78, 7, 0, 2 * Math.PI); g.fill(); }
g.strokeStyle = "#202020";
g.lineWidth = 3;
g.beginPath();
g.ellipse(100, 136, 22, 10, 0, rad(20), rad(160), false);
g.stroke();
return c;
}
function cell(label, base, sprite) {
const fig = document.createElement("figure");
const cv = newCanvas(140, 140);
cv.className = "cell";
const ctx = cv.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.drawImage(base, 0, 0, 140, 140);
if (sprite !== base) ctx.drawImage(sprite, 0, 0, 140, 140);
fig.appendChild(cv);
const cap = document.createElement("figcaption");
cap.textContent = label;
fig.appendChild(cap);
return fig;
}
try {
// 200x200 square maps to the full 512 canvas (scale 2.56, no offset), so
// feature coords below are the 200-space dots/arc times 2.56.
const drawing = syntheticDrawing();
const canvas512 = fit512(drawing);
const eyes = { L: [184, 200], R: [328, 200] };
const mouthBox = [205, 328, 307, 371];
const { manifest, canvases } = buildCharacter(canvas512, "테스트", eyes, 20, mouthBox);
deriveAll(canvases, manifest);
const base = canvases["base.png"];
const grid = document.getElementById("grid");
for (const [name, sprite] of Object.entries(canvases)) {
grid.appendChild(cell(name, base, sprite));
}
document.getElementById("manifest").textContent = JSON.stringify(manifest, null, 2);
const n = Object.keys(canvases).length;
const msg = `AUTHORING OK ${n}`;
document.title = msg;
document.getElementById("result").textContent = msg;
} catch (err) {
const msg = `AUTHORING FAIL ${err && err.message ? err.message : err}`;
document.title = msg;
document.getElementById("result").textContent = msg;
console.error(err);
}
</script>
</body>
</html>
|