← Basics3D assetfogon/xilofon
Xilofón
Drag to turn it// «Xilofón» · gpt-6-sol (medium)
// Xylophone («Xilofón»).
// Low wooden frame, with the keys running across it.
const woodDark = "#70431f";
const wood = "#98602b";
const woodLight = "#bd823e";
const woodGold = "#dfaa58";
for (let y = 11; y <= 44; y++) {
const inset = Math.floor((y - 11) / 12);
const left = 5 + inset;
const right = 39 - inset;
box(left, y, 10, right, y, 13, woodDark);
box(left + 2, y, 14, right - 2, y, 15,
rand() < 0.13 ? "#9b6633" : wood);
box(left, y, 13, left + 2, y, 16, woodLight);
box(right - 2, y, 13, right, y, 16, wood);
set(left, y, 15, woodGold);
set(right - 2, y, 16, woodLight);
}
// Front and back crosspieces, with a pale bevel on the front.
box(5, 10, 11, 39, 12, 16, wood);
box(5, 10, 15, 39, 10, 16, woodGold);
box(6, 11, 17, 38, 11, 17, "#f0c477");
box(8, 43, 11, 36, 45, 16, wood);
box(8, 44, 16, 36, 44, 16, woodLight);
// Four stout, squared legs.
for (const [x, y] of [[7, 12], [35, 12], [10, 40], [33, 40]]) {
box(x, y, 0, x + 3, y + 3, 11, woodDark);
box(x, y, 2, x + 2, y, 10, wood);
box(x, y, 9, x + 3, y + 3, 12, woodLight);
box(x + 3, y + 1, 1, x + 3, y + 3, 8, "#623b20");
}
box(5, 12, 10, 39, 14, 12, woodLight);
box(8, 42, 10, 36, 44, 12, woodDark);
// Each key has a dark lower edge, a saturated face, and a thin bright ridge.
const keys = [
["#a73545", "#dc5260", "#fa8790"],
["#b54c32", "#e87848", "#ffac6b"],
["#b88029", "#eab448", "#ffe080"],
["#a3952f", "#d5ce50", "#f3ed86"],
["#588c37", "#84c653", "#b9eb76"],
["#318e62", "#4dc88b", "#83e8ae"],
["#267f84", "#43bdc3", "#80e7df"],
["#33749e", "#52a9d3", "#8cdbf2"],
["#3b5d9c", "#648bcb", "#9db9eb"],
["#604b96", "#9275c4", "#c4a9ed"],
["#8a5b98", "#bf87c6", "#e8b3e6"]
];
keys.forEach(([shadow, face, shine], i) => {
const y = 13 + i * 3;
const left = 8 + Math.floor(i / 3);
const right = 36 - Math.floor(i / 3);
box(left, y, 16, right, y + 1, 17, shadow);
box(left, y, 18, right, y + 1, 18, face);
box(left + 1, y + 1, 19, right - 1, y + 1, 19, shine);
// Rounded-looking ends and tiny pale key fasteners.
box(left, y, 18, left + 1, y, 18, shine);
box(right - 1, y, 18, right, y, 18, shadow);
set(left + 2, y + 1, 19, "#f5dca2");
set(right - 2, y + 1, 19, "#eac58b");
});
// Two mallets resting on the floor in front of the instrument.
line(34, 5, 1, 45, 1, 1, 0, "#966832");
line(35, 5, 2, 44, 2, 2, 0, "#d0a25b");
box(31, 3, 1, 34, 6, 4, "#aaa99b");
box(31, 3, 3, 34, 6, 5, "#e9e8d9");
box(31, 3, 4, 33, 5, 5, "#faf9ec");
box(34, 4, 2, 34, 6, 4, "#b8b9ac");
line(41, 10, 1, 36, 0, 1, 0, "#976a34");
line(40, 9, 2, 36, 1, 2, 0, "#cda05a");
box(40, 8, 1, 43, 11, 4, "#aaa99b");
box(40, 8, 3, 43, 11, 5, "#e9e8d9");
box(40, 8, 4, 42, 10, 5, "#faf9ec");
box(43, 9, 2, 43, 11, 4, "#b8b9ac");import { draw } from "./assets/voxel";
import { xilofon } from "./assets/xilofon";
// Every frame: standing on (x, y), the centre of its base.
draw(ctx, xilofon, x, y, { size: 64, angle: 0, t: performance.now() / 1000 });
// size: its longest side, in px
// angle: turn on the floor, in radians
// t: seconds; if it moves, that animates it# In a terminal, in the game's folder
fogon assets add xilofon
# With Fogón's tools (connector)
add_assets({ slug: "<your-game>", ids: ["xilofon"] })
# It lands in client/assets/xilofon.ts
# https://fogon.page/object/xilofon