Doubao Seed API for Reasoning and Coding

Bouw een complete HTML-pagina in één bestand — één .html-document met alle CSS en JavaScript inline, nul externe afhankelijkheden, geen CDN-links, geen webfonts, geen afbeeldingsbestanden of data-URI's. Elk visueel element moet tijdens runtime procedureel worden getekend met de Canvas 2D API of inline SVG; er mogen nergens bitmaps, foto's of emoji voorkomen. De pagina is een realtime generatief canvas met een titel als "Oogstveld — Studio voor luchtgeometrie", en het volledige concept is een god's-eye, top-down aanzicht van bewerkte landbouwgrond die de gebruiker met schuifregelaars vormgeeft, terwijl één gepixelde maaidorser eroverheen kruipt en geordende banen uit ruwe gewassen wist — dat stille, bevredigende moment waarop orde uit chaos wordt gesneden. Compositie en rendering: vul de volledige viewport met een regelmatig rechthoekig raster van rogge-achtige veldpercelen, opgebouwd uit vlakke vectorvormen met een subtiele isometrische / pseudo-2.5D-verheffing, zodat elk perceel leest als een laag blok en niet als een platte rechthoek. Belicht de scène met één gerichte avondzon die vanuit één hoek laag en warm binnenvalt; elk perceel en de maaidorser moeten een lange, zachte schaduw in de tegenovergestelde richting werpen om de geometrische, blokachtige stevigheid van het veld te versterken. Het palet is een ingetogen, smaakvolle familie van aardetinten: mosterdgeel, oker, olijfgroen en één accent van verschroeide, geploegde gebrande omber voor vers gekeerde aarde — geen neon, geen zuivere primaire kleuren; houd het exclusief en gedempt. De algehele stijl is flat vector gecombineerd met isometrisch microreliëf, precies en architecturaal. Het levende gedrag: render binnen elk perceel fijne zaaiboor-rijen (dunne parallelle lijnen) waarvan de dichtheid instelbaar is. Eén gepixelde maaidorser — een kleine blokkerige sprite opgebouwd uit enkele rechthoeken — is het ENIGE bewegende element en het enige dat de symmetrie van het raster doorbreekt. Hij beweegt langzaam langs ofwel een naar binnen draaiend spiraalpad, ofwel een serpentine-boustrophedonroute (回字 / heen-en-weer) over de percelen. Terwijl hij beweegt, moet hij het staande gewas direct in zijn maaistrook "wissen" en realtime oogstbanen achterlaten — afwisselend lichte en donkere gemaaide stroken, zoals een gemaaid gazon of het spoor van de maaibalk van een echte maaidorser — permanent op het veld geschilderd tot aan een reset. De oogst is een continue, zelfstandig lopende animatie via requestAnimationFrame; kijken hoe het veld zich vult moet kalm en hypnotiserend aanvoelen. Interactiviteit — alle bedieningselementen zijn schuifregelaars (plus een paar kleine schakelaars/knoppen) in een strak, minimaal zij- of onderpaneel, en elk element moet live reageren zonder de pagina te herladen: een schuifregelaar voor het aantal veldpercelen (rasterresolutie, bijvoorbeeld 3×3 tot 12×12), een schuifregelaar voor de dichtheid van de zaaiboor-rijen, een schuifregelaar voor de gewaskleurtoon (die het staande gewas verschuift binnen het mosterd-oker-olijfbereik), een schuifregelaar voor oogstvoortgang of maaidorsersnelheid, en een schakelaar om het pad van de maaidorser te wisselen tussen spiraal en boustrophedon. Voorzie een subtiele knop Reset/Opnieuw planten die het veld opnieuw genereert en de passage herstart. Het wijzigen van het aantal percelen of de dichtheid moet de lay-out vloeiend opnieuw genereren; het verslepen van de kleurtoon moet realtime herkleurend werken. Maak het volledig responsive, zodat het raster en de schaduwen opnieuw worden berekend bij het wijzigen van de venstergrootte, houd de framerate soepel en zorg dat de code schoon en zelfstandig is, zodat het bestand correct opent door erop te dubbelklikken. Dit is geen game en geen dashboard — het is een instrument voor generatieve kunst. Drijf de procedurele geometrie, de padanimatie en de koppeling tussen parameters zo ver mogelijk door; de kwaliteit van de isometrische schaduwwerking, de lange avondschaduwen en de scherpte van de oogstbanen moeten deze render eruit laten springen.

Bouw één zelfstandig HTML-bestand (alleen inline CSS en JavaScript — absoluut geen externe bibliotheken, CDN's, frameworks, fonts of afbeeldings-URL's) dat een interactieve, fysisch plausibele demontagewerkbank voor een mechanisch zakhorloge-uurwerk rendert, volledig getekend met SVG en/of Canvas. De pagina moet correct openen en draaien door er in elke moderne browser op te dubbelklikken, waarbij alles realtime wordt berekend en geanimeerd. DE SCÈNE. Een top-down aanzicht van een geëxplodeerd messing horloge-uurwerk, uitgestald op een werkbank. Render als levende vectorkunst een veerton, een gestapelde tandwieltrein (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), een ankervork die heen en weer kantelt, een balanswiel met een spiraalvormige haarveer, en uur-/minuut-/secondewijzers die over een subtiele minutenring bewegen. Teken echte tandwieltanden (flanken in involuutstijl, geen simpele cirkels), correcte ingrijping op de steekcirkels, en zichtbare assen, robijnen, bruggen en schroeven. Het hele geheel is concentrisch opgebouwd rond de kern van het uurwerk; het bedieningspaneel is weggestopt in een donkere hoek. DE MECHANICA (dit is het punt — laat het echt simuleren, niet doen alsof). Modelleer de tandwieltrein met echte overbrengingsverhoudingen: de hoeksnelheid van elk wiel is gelijk aan die van de buur vermenigvuldigd met de negatieve verhouding van hun tandaantallen, zodat ingrijpende wielen zichtbaar tegengesteld draaien met proportionele snelheden en de tanden in elkaar grijpen zonder te overlappen of te schuiven. Het echappement moet echt tikken: het escape wheel beweegt telkens één tand vooruit in discrete stappen, vergrendeld en vrijgegeven door de oscillerende ankervork, die wordt aangedreven door het balanswiel dat op een vaste beat slingert. Elke vrijgave ("tik") produceert een scherpe stap in het escape wheel en een hoorbare tik met de Web Audio API (gesynthetiseerd, geen audiobestanden). De secondewijzer beweegt mee op de beat van het echappement; minuut- en uurwijzers worden daaruit afgeleid via de overbrengingsverhoudingen. Stuur de animatie aan met requestAnimationFrame en werkelijk verstreken tijd, zodat de timing nauwkeurig blijft. DE INTERACTIES (alles moet live reageren). - Een versleepbare opwindkroon/knop: sleep eraan (muis of touch) om de hoofdveer op te winden — een opwindmeter vult zich en de veerspoel trekt zichtbaar strakker. Laat los om de opgeslagen energie te laten ontladen en de trein aan te drijven; het uurwerk loopt tot de veer is ontspannen en rolt dan uit tot stilstand. - Een schuifregelaar voor de loopsnelheid die de beat/loopsnelheid schaalt, zodat je het langzaam kunt zien tikken of juist razendsnel kunt laten lopen. - Een schuifregelaar voor "exploderen" die de gestapelde componenten continu langs hun assen scheidt, van volledig gemonteerd tot een uitgewaaierde exploded diagram, met vloeiende interpolatie, verbindende hulplijnen tussen gescheiden onderdelen, en alles blijft correct draaien op elk explosieniveau. - Hover (of tik) op een component om het te laten werken als een juweliersloep: markeer dat onderdeel, dim de rest en toon een zwevend gelabeld bijschrift met de naam van het onderdeel en een beschrijving van de functie in één regel. - Knoppen: Opwinden, Loslaten, Reset. DE LOOK. Realistische industriële horlogemakerswerkplaats-esthetiek: warm verouderd messing, verweerd staalgrijs, diepe inktzwarte achtergrond, scherpe metaalhighlights, fijn geëtste tandwieltanden en afgeschuinde bruggen. Simuleer één lichtschacht uit een raam die vanaf linksboven schuin over de werkbank valt, zodat onderdelen zachte, langgerekte schaduwen werpen, en laat spiegelende highlights over de tandwielvlakken reizen terwijl ze draaien. Gebruik verlopen, filters en subtiele korrel voor diepte. Strakke, leesbare HUD-achtige bedieningselementen en labels in de donkere hoek. VEREISTEN. Alles in één .html-bestand; responsive lay-out die meeschalelt met de viewport; soepele animatie op 60fps; geen placeholder-graphics — het uurwerk moet procedureel worden getekend en daadwerkelijk mechanisch gekoppeld zijn, zodat een capabel model een horloge produceert dat echt opwindt, ingrijpt en tikt, terwijl een zwak model instort tot statische draaiende cirkels. Voeg korte inline comments toe die de overbrengingsverhoudingen en de echappementlogica benoemen.