Doubao Seed API for Reasoning and Coding

完全な単一ファイル HTML ページを作成してください — すべての CSS と JavaScript をインライン化した1つの .html ドキュメントで、外部依存はゼロ、CDN リンクなし、Web フォントなし、画像ファイルや data URI もなし。すべてのビジュアルは、実行時に Canvas 2D API またはインライン SVG で手続き的に描画すること。ビットマップ、写真、絵文字は一切使用しないでください。ページは「Harvest Field — Aerial Geometry Studio」のようなタイトルを持つリアルタイム生成キャンバスで、コンセプト全体は、神の視点のような真上から見た耕作農地です。ユーザーがスライダーで形づくる農地を、1台だけのピクセル風コンバインハーベスターがゆっくり進み、生の作物から秩序だった縞を拭き取るように切り出していく — 混沌から秩序が静かに、心地よく切り出される瞬間を表現します。 構図とレンダリング：ビューポート全体を、ライ麦畑のような区画が規則的な矩形グリッドで埋めるようにしてください。各区画はフラットベクター形状で構成し、さりげないアイソメトリック／疑似 2.5D の持ち上がりを与えて、平らな長方形ではなく低いブロックとして見えるようにします。光源は、片隅から差し込む単一の夕暮れの斜光（暖色、低角度）とし、すべての区画とハーベスターが反対方向へ長く柔らかい影を落とすことで、畑の幾何学的でブロック状の立体感を強調してください。パレットは上品で抑制されたアーストーン系に限定します：マスタードイエロー、オーカー、オリーブグリーン、そして耕したばかりの土のアクセントとして焦げたバーントアンバーを1色だけ。ネオン、純色の原色は使わず、高級感のある落ち着いたトーンにしてください。全体のスタイルは、フラットベクターとアイソメトリックな微細レリーフの融合で、精密かつ建築的にします。 生きたふるまい：各区画の内部には、細い播種列（細い平行線）を描画し、その密度を調整可能にします。1台のピクセル風コンバインハーベスター — 数個の矩形から描いた小さなブロック状スプライト — が唯一の移動要素であり、グリッドの対称性を崩す唯一の存在です。ハーベスターは、内側へ向かう螺旋経路、または蛇行する牛耕式（回字／往復）ルートのどちらかで、区画を横断しながらゆっくり進みます。移動中は、その刈り幅の直下にある立ち作物を「消去」し、芝刈り跡や実際のコンバインのヘッダー跡のような、明暗が交互に現れるリアルタイムの収穫縞を残してください。この縞はリセットされるまで畑に恒久的に描き込まれます。収穫は requestAnimationFrame による連続的な自律アニメーションとし、畑が少しずつ埋まっていく様子は穏やかで催眠的に感じられるようにします。 インタラクション — すべてのコントロールはスライダー（加えて小さなトグル／ボタンを数個）として、クリーンでミニマルなサイドパネルまたはボトムパネルに配置し、すべてページの再読み込みなしでライブに反応すること：畑の区画数（グリッド解像度、例：3×3 から 12×12）を調整するスライダー、播種列密度のスライダー、作物の色相（立ち作物をマスタード〜オーカー〜オリーブの範囲で変化）を調整するスライダー、収穫進行度またはハーベスター速度のスライダー、そしてハーベスターの経路を螺旋と牛耕式で切り替えるトグルを用意してください。畑を再生成し、走行を最初からやり直す控えめな Reset/Replant ボタンも提供します。区画数や密度を変更するとレイアウトが滑らかに再生成され、色相をドラッグするとリアルタイムに再着色されるようにしてください。 完全にレスポンシブにし、ウィンドウリサイズ時にはグリッドと影を再計算し、フレームレートを滑らかに保ち、ダブルクリックでファイルを開いたときに正しく動作するクリーンで自己完結したコードにしてください。これはゲームでもダッシュボードでもなく、生成アートの楽器です。手続き的ジオメトリ、経路アニメーション、パラメータ同士の連動を限界まで押し広げてください。アイソメトリックなシェーディング、長い夕暮れの影、そして収穫縞のシャープさが、このレンダリングを際立たせる要素です。

単一の自己完結型 HTML ファイルを作成してください（インライン CSS と JavaScript のみ — 外部ライブラリ、CDN、フレームワーク、フォント、画像 URL は絶対に使用しない）。SVG および／または Canvas だけで描画された、インタラクティブで物理的にもっともらしい機械式懐中時計ムーブメントの分解作業台をレンダリングします。このページは、最新ブラウザでファイルをダブルクリックするだけで正しく開いて動作し、すべてがリアルタイムに計算・アニメーションされる必要があります。 シーン。作業台の上に展開された真鍮製時計ムーブメントの分解図を、真上から見た構図にします。生きたベクターアートとして、香箱、積層された輪列（barrel wheel → center wheel → third wheel → fourth wheel → escape wheel）、前後に揺れる pallet fork、渦巻き状の hairspring を備えた balance wheel、そして控えめな chapter ring の上をスイープする時針・分針・秒針を描画してください。歯車の歯は本物らしく描きます（単なる円ではなく、インボリュート風の歯面）。ピッチ円で正しく噛み合い、アーバー、ジュエル、ブリッジ、ネジが見えるようにしてください。アセンブリ全体はムーブメント中心の周囲に同心的に構成し、コントロールパネルは暗い隅に収めます。 メカニクス（ここが要点です — 見せかけではなく、本当にシミュレートしてください）。輪列は実際の歯数比でモデル化します：各ホイールの角速度は、隣接ホイールの角速度に歯数比の負値を掛けたものとし、噛み合うホイールが比例した速度で明確に逆回転し、歯が重なったり滑ったりせずに噛み合って見えるようにします。脱進機は実際にチクタク動く必要があります：escape wheel は1歯ずつ離散的に進み、固定ビートで振動する balance wheel に駆動された pallet fork によってロック／リリースされます。各リリース（「tick」）では escape wheel がキレよく1ステップ進み、Web Audio API による可聴の tick 音を生成します（合成音、音声ファイルなし）。秒針は脱進機に同期して進み、分針と時針は歯車比から導出します。アニメーションは requestAnimationFrame と実経過時間で駆動し、タイミングが正確に保たれるようにしてください。 インタラクション（すべてライブに反応すること）。 - ドラッグ可能な winding crown/knob：マウスまたはタッチでドラッグしてゼンマイを巻き上げます — 巻き上げゲージが満ち、スプリングコイルが目に見えて締まります。離すと蓄えられたエネルギーが放出されて輪列を駆動し、ゼンマイがほどけるまでムーブメントが動作し、その後惰性で停止します。 - beat／動作速度をスケールする「rate」スライダー。ゆっくりチクタクさせたり、高速に走らせたりできるようにします。 - 「explode」スライダー。完全に組み上がった状態から扇状に広がる分解図まで、積層部品をそれぞれの軸に沿って連続的に分離します。滑らかに補間し、分離した部品同士を結ぶガイドラインを表示し、どの分解レベルでもすべてが正しく回転し続けるようにします。 - 任意の部品をホバー（またはタップ）すると、時計職人のルーペのように動作します：その部品をハイライトし、他を暗くし、部品名と1行の機能説明を記したラベル付きコールアウトを浮かせます。 - ボタン：Wind、Release、Reset。 ルック。リアルな時計工房のインダストリアルな美学：温かみのある経年真鍮、使い込まれたスチールグレー、深いインクブラックの背景、シャープな金属ハイライト、細かく刻まれた歯車の歯、面取りされたブリッジ。左上から作業台へ差し込む窓明かりの一筋をシミュレートし、部品が柔らかく伸びた影を落とすようにします。歯車面の回転に合わせてスペキュラーハイライトが移動するようにしてください。奥行きのためにグラデーション、フィルター、控えめな粒状感を使用します。暗い隅には、クリーンで読みやすい HUD 風のコントロールとラベルを配置します。 要件。すべてを1つの .html ファイルに収めること。ビューポートに合わせてスケールするレスポンシブレイアウト。滑らかな 60fps アニメーション。プレースホルダー画像は禁止 — ムーブメントは手続き的に描画され、機械的に本当に連動している必要があります。優れたモデルなら、実際に巻き上げられ、噛み合い、チクタク動く時計を生成し、弱いモデルなら静的に回る円へ崩れてしまう、その差が出るようにしてください。歯車比と脱進機ロジックの名前を示す短いインラインコメントを追加してください。