SHEET 07 · SUPPLEMENT — HOW THIS CHART WAS DRAWN
CURRENT / 07 is a concept study built by an AI agent under an art-directed brief, blind against another model's build of the same world. This is the honest log: the order it received, the one trick it pushed, and what three hostile critique passes found.
Wave 2 of the DAINER.AI showcase is a duel: five world-concepts, rebuilt clean-room, judged against an unseen rival. This site drew brief W2-08.
current-07 · CURRENT / 07 · the night ferry's living chart — a seven-station night-ferry line whose nautical chart is alive; the currents are computed, and routes bend around your hand like water.
ink sea #08131a · chart cream #f2ead8 · storm blue #4f7d9e · buoy red #c8452f
Crimson Pro (display) + Azeret Mono (chart labels, timetables, instruments)
Pointer-bent route field — canvas flow-field currents plus route splines that deform smoothly around the cursor or touch and relax back; stations pin timetable cards.
Bend the routes · hover/tap stations for timetable cards · a depth-soundings toggle · a live "current speed" readout derived from the field.
Harbour timetable formality with one poetic line per section.
Everything on the hero is one system. A procedural flow field — three summed sine waves over position and time — is the strait's current. The same field drives four things at once: the drifting trail particles of the sea, the paper boats you set adrift, the drift/set numbers on the tide-stream panel, and the bend of the ferry route itself.
The route is a Catmull-Rom spline through the seven stations, sampled into ~100 points. Each point carries an offset that eases toward a target: a small ambient sway, plus — when your hand is on the water — a radial push with a sideways shear, so the line bulges around you the way water parts around a hull. Release, and every point relaxes home. This is the actual bend, from this page's source:
/* ---------- bend ---------- */
function bend(dt){
const R=Math.min(190,HW*.24),MX=56,k=Math.min(1,dt*7);
for(let i=0;i<base.length;i++){
let tx=Math.sin(T*.7+i*.23)*2.4,ty=Math.cos(T*.6+i*.31)*2.4;
if(hand.on){const dx=base[i].x-hand.x,dy=base[i].y-hand.y,d=Math.hypot(dx,dy);
if(d<R&&d>.5){const f=Math.pow(1-d/R,1.6)*MX;tx+=dx/d*f;ty+=dy/d*f;}}
off[i].x+=(tx-off[i].x)*k;off[i].y+=(ty-off[i].y)*k;
}
}The station buttons are real DOM buttons translated to the bent spline every frame, so keyboard users tab through the same water everyone else touches. The "hand" itself has a keyboard body: arrow keys move it, Enter sets a paper boat adrift, and the boats then belong to the field like everything else.
Three passes, both viewports, screenshots read cold and treated as evidence. What each one found:
One HTML file, all CSS and JS inline, no build step, no framework, no images — every line on the chart is drawn live by canvas or SVG. Fonts are the only external request. Zero console errors in the final harness run, both viewports. The Selat Penyu, its stations, its ferry company and its keeper of corrections are fictional; the tide mathematics and the craft are not.