Dusk

空の散乱や地球の影の物理から始めて、古いフィルムカメラのプリントのような淡い夕暮れが描けるか。180秒のどこで止めても、壁に飾れる1枚になっているか。

場所はポルトガルのロカ岬で、崖の上から西の大西洋を見ています。太陽はもう沈んでいて、残照・ブルーアワー・星だけを描きます。晩ごとに日付と空気とプリントが違うので、光の帯の位置と色、海に映る色、出てくる惑星が変わります。

全ループを1秒1コマで並べたもの：loop.jpg ↗（180コマ。3行で1晩）

Claude Code（Opus 5.5）にプロンプトを1回送りました。プロンプトは2段階で、Phase 1 でClaudeが最初の版を作り、静止画を出して止まります。人が返信してから Phase 2 で仕上げます。予定では人が手を入れるのは Phase 1 への返信1回だけでしたが、実際には3回です。作品のコードへの人の修正はありません。ギャラリーへの追加は、作品の納品後に別の依頼として行いました。

• Phase 1 の途中（v1 の制作中）：v1 はプロンプトどおり5か所を巡り、太陽の円盤と雲を描く版でした。人が「すでに素晴らしいんだけど」と止め、方向を変えました。日の出・日の入りの強い光と雲、建造物をなくし、1か所・1アングルで、淡い夕暮れのいろいろな色と、海の反射と、星空を楽しみたい、という指示です。
• Phase 1 の静止画への返信：「素敵、Phase 2 に進めて」

このため、プロンプトのうち「5か所以上を巡る」「黄金の時間と日没（太陽の円盤、グリーンフラッシュ）」「雲と光の筋」は使っていません。代わりに、1か所・1アングルで、日付と大気の違う6つの夕暮れを流しています。

HTML 1ファイルで動作し、画像・ライブラリ・通信はありません。光は浮動小数点のバッファにためて、トーンマップとディザをかけて表示します。

Claudeが Phase 2 で行った修正

• 露出計の空の測り方がずれて、露出が小刻みに揺れていた。測る方向を正しく取るよう直した。
• 光の帯だけが明るく、空と海が暗く沈んでいた。空だけにかける局所的な段階フィルターを入れた。高さだけで決めると帯の横に暗いくさびが出たので方位にも沿って測り、上限を固く切ると輪郭がマッハバンドの弧になったので、やわらかく頭打ちにした。
• 夜が茶色がかった灰色になった。夜に向けて全晩を青い黒のプリントに寄せ、露出計には大気光の明るさを足して開けすぎを止めた。
• もやと砂塵の晩で、左の空が18秒あたりで急に暗くなって止まった（0.2秒刻みの比較で発見）。多重散乱の表が太陽の高さ方向に3.7°刻みしかなく、補間の折れ目が出ていたため、128段（0.9°刻み）にした。正しく計算すると影の空が灰色に寄ったので、その2晩のプリントの黒を青く寄せた。
• 2560×1440（DPR 2）で描画が21 msかかった。1秒30コマで描き、出力を約830万画素までにした（13 ms）。

時間と使用量は、作品を作ったClaude Codeセッションのログ（API呼び出しごとの使用量）を区間ごとに合計した値です。人の返信を待った時間と、ギャラリー追加の作業は含みません。生のログはこのリポジトリには含まれていません。

モデルID

claude-opus-5-5

Effort

xhigh（セッション設定）

Human edits

0（指示は3回。上の制作条件を参照）

生成時間

2h1m21s（Phase 1 v1 35m14s + Phase 1 v2 44m20s + Phase 2 41m47s）

モデル呼び出し回数

224（v1 18 + v2 92 + Phase 2 114）

Input tokens

38,161,315

Cached input / cache read

37,118,677

キャッシュ書込

1,042,190

通常入力（キャッシュ書込を除く）

448

Output tokens

465,654（v1 179,608 + v2 182,059 + Phase 2 103,987）

Total processed tokens

38,626,969

コスト

記録なし

HTMLの実測行数

748行

HTMLの実測サイズ

49,584 bytes

確認したコマ

180コマ（1秒1コマ）＋0.2秒刻みの全ループ

入力は呼び出しごとに再送された履歴を含む累計で、Cached inputとキャッシュ書込はInputの内数です。Output tokensはthinkingを含みます。Total = Input + Output。サブエージェントやCodexは使っていません。

時間の注記

日本時間で、v1 は 09-30 23:23:04（プロンプトを受信）→ 23:58:18（人が中断）、v2 は 10-01 00:00:11（方向転換の指示を受信）→ 00:44:31（静止画の報告）、Phase 2 は 09:06:33（返信を受信）→ 09:48:20（納品の報告の直前）です。途中でコンテキスト上限による自動要約が数回入っています。

フレーム時間

Apple M3のMac上のヘッドレスChromium（Metal）で計測しました。1フレームの描画は 1920×1080 で約5 ms、1440×900（DPR 2）で約9 ms、2560×1440（DPR 2、内部はDPR 1.5）で約13 msです。1秒30コマで描くので、GPUの使用はそれぞれ約15%・27%・40%です。溶け替わりの6秒間は2晩ぶん描くので、空と海の分が倍になります。通常のブラウザウィンドウでは未計測です。

出典は作品のREADMEです。行数とバイト数は収録HTMLを実測しています。

要点

世界のどこかの夕暮れが約30秒で流れ、1周ごとに別の場所へ移る作品を求めています。大気は Rayleigh・Mie・オゾン・地球の影の物理から始めて自由に崩し、見た目は古いフィルムカメラのプリント（明るさで変わる粒子、浮いた黒、褪せた色、ハレーション、露出が開くほど粗くなる粒子）。目指す水準として川内倫子、杉本博司の海景、Rothko を挙げ、縞・インスタのフィルター・安っぽい古写真加工・フォトリアル・白飛びした太陽・CGの雲・つぶれたブルーアワー・濁ったグレーを失格にしています。Phase 1 で静止画を出して止まり、人が見てから Phase 2 で全場所を1秒ごとに書き出して確かめる2段階です。途中で入れた指示はプロンプトの記録に原文のまま載せています。

Create a single self-contained index.html: a slow, seamless, looping artwork in which one dusk somewhere on Earth passes in about 30 seconds — and then the next dusk begins somewhere else.

This is not a simulator, a website, or a UI. There are no controls. It is something to watch, like a photograph that breathes.

The work has two phases. In Phase 1 you build a first version, show me stills, and stop. Do not start Phase 2 until I reply.

Do not ask questions before Phase 1. Make every creative and technical decision yourself.

⸻

BEAUTY COMES FIRST

I do not want anything that is not beautiful. This is art, not a realistic rendering. Physics is only the starting point; art direction decides the final image. Every single frame should work as a print on a wall.

⸻

THE ARC OF ONE DUSK (about 30 seconds)

Choose the exact timing yourself, but pass through these moments:

1. Golden hour — low warm light, long soft gradients, the sky still bright.
2. Sunset — the disc touches the horizon, flattened and reddened by the atmosphere, its edge slightly darker than its centre. Very rarely, a green flash at the last instant.
3. Afterglow — the moment the sun is gone and the clouds light up from below, lowest clouds first turning grey, high cirrus staying pink and gold the longest.
4. Blue hour — the Earth's shadow rises in the east as a dark blue band with the pink Belt of Venus above it; the whole sky turns deep, luminous blue.
5. Night — the first star or planet appears, then more, by brightness.

Then the scene dissolves gently into the golden hour of the next place. The loop must have no visible seam.

⸻

PLACES

Each cycle is a different place on Earth, with its own latitude, date, horizon and air. For example:

* an open ocean horizon in the tropics, humid air
* a desert with fine dust in the air
* a high mountain ridge above a sea of clouds, very clean thin air
* a high-latitude coast in summer, where the sun slides along the horizon
* a city-free plain a few months after a large volcanic eruption, with violet twilight

Latitude and date must set the sun's path: near the equator it sinks steeply and fast; at high latitude it slants and lingers. Show this honestly.

Use at least five places and let them repeat in a fixed order.

⸻

THE ATMOSPHERE

Use physics so that the light behaves believably, then stylise it freely — simplify, soften, shift colours — until it reads as a picture rather than a simulation:

* Rayleigh scattering by air, Mie scattering by aerosols (with a forward-scattering glow around the sun), ozone absorption — the ozone is what keeps blue hour blue
* the sun's colour and brightness from its path length through the atmosphere
* the Earth's shadow and the Belt of Venus
* clouds lit by the sun from below after it has set, with the lit layer climbing from low clouds to high clouds as the sun sinks
* crepuscular rays where clouds or terrain block the sun
* aerosols and humidity that differ per place and visibly change the colours

Precomputed look-up tables (transmittance, sky-view) are welcome for performance.

⸻

THE LOOK

Artistic and a little retro, like a print from an old film camera — not photorealistic, not digital-clean.

* Visible film grain is part of the image. It follows luminance like real film (coarser in the shadows and mid-tones, finer in the highlights), changes every frame, and differs slightly per colour channel. Not a flat noise layer on top.
* Blacks are lifted into a soft matte; nothing is pure black or pure white.
* Colour is slightly faded and shifted, as in old colour negative film: warm, creamy highlights, and cool shadows that lean toward teal or green.
* Halation: a faint warm-red glow bleeds around the sun and the brightest parts of the sky.
* Soft, as if photographed with a lens that is slightly out of focus. Nothing is razor sharp. Depth is felt through haze.
* Long gradients carry the image; the grain hides any banding.
* Highlights roll off softly instead of clipping; the sun is a glowing disc, not a flat white blob.
* Exposure behaves like a patient photographer: as light fades, exposure opens slowly, so blue hour and night stay luminous and readable instead of turning black. As exposure opens, the grain grows, as it would on pushed film.
* A simple, calm composition with a low horizon and a lot of sky. Land or sea appears as soft silhouettes, reflections or glitter; no detailed objects. Simplify shapes into colour fields where it makes the picture stronger.

The level and mood to aim for: Rinko Kawauchi's pale, luminous film photographs, Hiroshi Sugimoto's Seascapes, Mark Rothko's colour fields.

Reject any result with:

* visible banding
* the orange-and-purple look of an Instagram filter
* cheap fake-vintage effects: scratches, dust, sepia, film borders, sprocket holes, light-leak presets, a heavy vignette
* photorealistic, digital-clean rendering
* lens-flare presets, neon, oversaturated colours
* a flat white sun
* sharp, CG-looking clouds
* a crushed, black blue hour
* muddy grey mixtures

⸻

TEXT ON SCREEN

The only text is a small, quiet caption in one corner, like a note on a photograph: the latitude, longitude and date of the current place. Nothing else — no title, UI, buttons, instructions, or debug overlays.

⸻

TECHNICAL REQUIREMENTS

* A single index.html using only HTML, CSS and JavaScript. WebGL2 is recommended.
* Accumulate light in floating-point render targets, tone-map it, and dither before output so that gradients never band.
* Everything is a function of time, so any moment can be reproduced. Support #t=12.5 in the URL to freeze at that time of the full loop.
* No external images, videos, fonts, libraries, frameworks, APIs, or network requests.
* Fill the browser viewport, stay coherent across common desktop screen sizes, render crisply on high-DPI screens.
* Run smoothly without excessive CPU or GPU usage. Start playing immediately when the file is opened.

⸻

PHASE 1 — FIRST VERSION, THEN STOP

1. Build a first working version.
2. For two contrasting places, render the five moments of THE ARC at 1600 px wide and save them as PNG files in ./stills/.
3. Look at every still honestly. Fix anything that is not beautiful before you show me.
4. Stop. Tell me where the stills are and wait for my reply.

⸻

PHASE 2 — FINISH

After my reply, finish all places.

Before delivering, render one frame per second of the entire loop for every place, look at all of them, and check 1:1 crops of the gradients for banding. Every frame must be beautiful. Check that the seam between places is invisible.

Start Phase 1 now.

方向転換のあとの v2 で Claude が出した静止画です（1600 px のPNGをJPEGにしたもの）。Phase 2 の修正の前の版なので、納品版とは露出と色が少し違います。v1 は制作の途中で止めたため、画像を残していません。

しくみ

空は空気分子の散乱（Rayleigh）、エアロゾルの散乱（Mie）、オゾンの吸収で計算し、ピナトゥボの晩だけ高さ21 kmの硫酸の層を足しています。透過率と多重散乱は起動時に表にし、空はカメラから見た方向の表を毎フレーム1回、80段の積分で描きます。地球の影は積分の1段ごとに解析的に求め、ぼかした境目で入れています。太陽の方位と天体の位置は日付とロカ岬の緯度・経度から計算し、明るい星約190個の実際の位置と等級に、惑星と天の川のほうへ密になる暗い星7000個を足しています。

海は空を6段階にぼかした表から、波の傾きの散らばりに合わせて映し、映り方はフレネルの式に従います。露出は起動時に0.5秒ごとに測っておいた空の明るさを、暗くなるときは86%だけ追い、約4秒でなめらかにします。そのうえで空だけに局所的な段階フィルターをかけて帯と空の差を2〜3段に収めます。最後に晩ごとのプリント、ハレーション、明るさと露出で粗さの変わる粒子、ディザをかけます。時間だけで絵が決まり、再生はフィルムのように1秒30コマで進みます。

確認したこと

180秒を1秒1コマ（1600×900）で書き出して全部見ました。修正のたびに描き直し、最後の版で5回目です。縞は全180コマで空を3本の帯に分けて1:1で測り、540か所のうち475か所が1.2/255以下でした。残りは地平のすぐ上の曲がり目、金星のにじみ、星の集まりで、1:1の拡大と残差を8倍にした画像で段がないことを確かめています。つなぎ目はループ全体を0.2秒刻みで描いて前のコマとの差を測り、溶け替わりはなめらかな山形（最大3.2/255）、それ以外は最大2.2/255でした。180秒目から0秒目へも同じようにつながります。390×844（DPR 3）、1440×900（DPR 2）、2560×1080、2560×1440（DPR 2）で構図と粒子を確認し、コンソールのエラーはありません。

Zenn記事：なし

X投稿：なし