← Nature3D assetfogon/charco
Charco
Drag to turn it// «Charco» · gpt-6-sol (medium)
// A shallow puddle on the ground: an irregular flat patch of blue water with lighter reflection spots, edged with darker wet dirt. Very flat.
const cx = 24, cy = 24;
const waterColors = ["#54bbed", "#61c8f2", "#70d2f6", "#47afe3"];
const dirtColors = ["#765c47", "#806449", "#8d6c4c", "#6b5344"];
function outline(x, y) {
const a = Math.atan2(y - cy, x - cx);
return 1
+ 0.055 * Math.sin(3 * a + 0.4)
+ 0.045 * Math.sin(5 * a - 1.1)
+ 0.025 * Math.sin(9 * a + 0.7);
}
for (let y = 5; y <= 43; y++) {
for (let x = 3; x <= 45; x++) {
const dx = (x - cx) / 18.5;
const dy = (y - cy) / 15.5;
const d = Math.sqrt(dx * dx + dy * dy);
const edge = outline(x, y);
if (d > edge) continue;
if (d > edge - 0.15) {
const shade = rand();
set(x, y, 0, dirtColors[shade < 0.2 ? 3 : shade < 0.62 ? 0 : shade < 0.86 ? 1 : 2]);
// A few raised clumps give the muddy outline a soft, uneven edge.
if (d > edge - 0.09 && rand() < 0.13) {
set(x, y, 1, "#806449");
}
} else {
set(x, y, 0, "#378fc8");
const shade = rand();
set(x, y, 1, waterColors[shade < 0.12 ? 3 : shade < 0.53 ? 0 : shade < 0.88 ? 1 : 2]);
}
}
}
// Broad, broken patches of sky reflected on the water.
function reflection(cx0, cy0, rx, ry, color, chance = 1) {
for (let y = Math.floor(cy0 - ry); y <= Math.ceil(cy0 + ry); y++) {
for (let x = Math.floor(cx0 - rx); x <= Math.ceil(cx0 + rx); x++) {
const q = ((x - cx0) / rx) ** 2 + ((y - cy0) / ry) ** 2;
if (q <= 1 && get(x, y, 1)?.startsWith("#") &&
waterColors.includes(get(x, y, 1)) && rand() < chance) {
set(x, y, 1, color);
}
}
}
}
reflection(17, 16, 5.2, 1.3, "#b9f4fb", 0.88);
reflection(15, 19, 2.8, 0.8, "#91e7f8", 0.9);
reflection(28, 19, 3.6, 1.0, "#a6effa", 0.85);
reflection(32, 22, 2.4, 0.7, "#d0f9fc", 0.85);
reflection(23, 29, 4.4, 0.9, "#91e7f8", 0.72);
reflection(29, 32, 2.1, 0.7, "#b9f4fb", 0.8);
// Tiny glints stay flat against the water's surface.
for (const [x, y] of [[13, 16], [20, 15], [27, 18], [33, 20], [19, 28], [26, 30]]) {
if (waterColors.includes(get(x, y, 1))) set(x, y, 1, "#e0fcfc");
}import { draw } from "./assets/voxel";
import { charco } from "./assets/charco";
// Every frame: standing on (x, y), the centre of its base.
draw(ctx, charco, 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 charco
# With Fogón's tools (connector)
add_assets({ slug: "<your-game>", ids: ["charco"] })
# It lands in client/assets/charco.ts
# https://fogon.page/object/charco