Rain on Glass

雨粒を1つずつ本当のレンズとして屈折させ、ピンぼけの街の光と古いフィルムのプリントで仕上げると、雨の窓が絵になるか。看板が消えた瞬間にその色がすべての雨粒から消えることに、見る人が気づけるか。720秒のどこで止めても、壁に飾れる1枚になっているか。

窓も通りも同じで、明かりの消える順と間合い、雨の降り方、夜明けの空の色が晩ごとに違います。通りには縦の看板、提灯、ネオンの看板5つ、コンビニ、自販機、窓14枚、ナトリウム灯5本があります。

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

Claude Code（Opus 5.5）にプロンプトを1回送りました。プロンプトは2段階で、Phase 1 でClaudeが雨粒とボケの描き方を比べて最初の版を作り、静止画を出して止まります。人が返信してから Phase 2 で仕上げます。人が手を入れたのは、Phase 1 の静止画に「素敵、Phase 2 に進めて」と返した1回だけです。作品のコードへの人の修正はありません。ギャラリーへの追加は、作品の納品後に別の依頼として行いました。

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

Claudeが Phase 1 で比べた描き方

• A：雨粒を1つずつ動かし、本当のレンズとして屈折させる。ボケは解析的な円 → 採用
• B：屈折だけの揺らぎの場 → CGの水に見えた
• C：絵画風 → どろどろになった
• D：集めてぼかすボケ → 円が欠けて、どれも同じ大きさになった

比較のコンタクトシート：approaches-contact-sheet.jpg ↗

Claudeが Phase 2 で行った修正

• 晩の境目で、曇りが一瞬クリーム色や桃色に転んだ。露出が夜明けのまま開いていたところへ、次の晩の明るい明かりが入ったため。露出を晩ごとに持って重ねる割合で混ぜ、曇りの色を暗めにし、新しい晩の明かりは重ねる割合を2.5乗で遅らせた。
• 夜明けの始まりを晩ごとに8〜9秒早め、淡い青の時間を長くした。
• 開発用の描き方の切り替えを取り除いた。
• 開いた直後の最初のコマに約1.3秒かかった（0秒目は境目なので、2晩ぶんの雨を進める必要があった）。再生を8秒目から始めるようにした（約0.2秒）。

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

モデルID

claude-opus-5-5

Effort

記録なし

Human edits

0（指示は Phase 1 への返信1回）

生成時間

47m2s（Phase 1 22m22s + Phase 2 24m40s）

モデル呼び出し回数

75（Phase 1 30 + Phase 2 45）

Input tokens

11,659,459

Cached input / cache read

11,334,647

キャッシュ書込

324,662

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

150

Output tokens

150,477（Phase 1 116,686 + Phase 2 33,791）

Total processed tokens

11,809,936

コスト

記録なし

HTMLの実測行数

790行

HTMLの実測サイズ

45,054 bytes

確認したコマ

720コマ（1秒1コマ）

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

時間の注記

日本時間で、Phase 1 は 10-01 19:54:48（プロンプトを受信）→ 20:17:10（静止画の報告）、Phase 2 は 20:51:49（返信を受信）→ 21:16:29（納品の報告の直前）です。Phase 2 の途中でコンテキスト上限による自動要約が1回入っています。

フレーム時間

Apple M3のMac上のヘッドレスChromium（Metal）で計測しました。1フレームの描画は 1920×1080 で約6〜10 ms、1440×900（DPR 2）で約15〜21 msです。再生は1秒30コマです。最初のコマは開いてから約0.2秒で出ます（ブラウザを立ち上げた直後は約1秒）。#t= で遠い時刻へ飛ぶと、雨をその時刻まで進めるので0.4〜1.1秒かかります。通常のブラウザウィンドウでは未計測です。

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

要点

夜の窓ガラスの雨越しに、ピンぼけの通りの明かりが一晩（約3分）かけて1つずつ消え、雨粒に朝の淡い青だけが残る作品を求めています。雨粒は逆さの小さな像を映すレンズ、ボケは距離で大きさが変わりキャッツアイになる柔らかい円、見た目は古いフィルムカメラのプリント（明るさで変わる粒子、浮いた黒、褪せた色、ハレーション、露出が開くほど粗くなる粒子）。目指す水準として Saul Leiter の雨越しのカラー写真、川内倫子、Gerhard Richter のぼかした絵画を挙げ、どろどろの雨粒・CGの水・サイバーパンク・縁の硬いボケ・ちらつき・つぶれた黒・濁ったグレー・縞を失格にしています。Phase 1 で描き方を3通り以上比べて静止画を出して止まり、人が見てから Phase 2 で4晩を仕上げて全ループを1秒ごとに確かめる2段階です。

Create a single self-contained index.html: a slow, looping artwork. Rain on a pane of glass at night. Beyond the glass, a city street is completely out of focus, and its lights are soft discs of colour. Over one night, from the small hours until dawn, the lights go out one by one, until only the pale blue of morning is left in the raindrops.

This is not a simulator, a website, or a UI. There are no controls, no interaction, and no sound. 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. Being new or clever only gets you in the door. This is art, not a realistic rendering. Physics is the starting point, and art direction decides the final image. Every single frame should work as a print on a wall.

Beauty here means:

* Detail at several scales at once: large, soft bokeh discs far behind; raindrops on the glass, each one a tiny lens holding a small, sharper, upside-down image of the lights; and a fine mist of micro-droplets between them.
* Quiet space. Parts of the glass carry only a few drops, and some of the frame is calm, dark colour.
* A clear composition that holds still. The camera never moves.
* Colour that is restrained, not loud. Neon here is seen through rain and film, so it is softened, faded and warm, never electric.

Any of these counts as a failure:

* blobs, smears, or mush: drops that do not read as clear glass lenses
* drops that look like a CG water material, or like a regular grid or pattern of circles
* oversaturated neon, cyberpunk or Blade Runner clichés, the orange-and-teal look of a film-grading preset
* bokeh discs with hard, digital edges, or all of one identical size
* flicker, sparks, or any other effect that draws attention to itself
* a crushed, black frame, or muddy grey mixtures
* visible banding

⸻

THE ARC OF ONE NIGHT (about 3 minutes)

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

1. Deep night: the street is still awake. Shop neon, a convenience store, sodium streetlights, a few lit windows. The drops are full of colour, and every drop carries every light.
2. Closing time: the signs go out one at a time, at irregular intervals. A tube does not snap off; it fades over a second or two as it cools. Each time a light goes out, that colour disappears from every drop on the glass at once. This is the heart of the work. Let the viewer notice it.
3. The last hours: only a few lights remain, maybe just the convenience store and the streetlights. The frame is darker, calmer and bluer, and the bokeh that remains feels precious.
4. Before dawn: the sky beyond the street slowly turns from blue-black to a pale, cold blue. The streetlights go out last, with the slow warm fade of sodium lamps.
5. Dawn: no artificial light is left. The drops hold only the pale morning blue, and perhaps one window turning warm as someone wakes up.

The rain is steady and gentle all night. It may soften toward dawn, but it does not stop. Drops form, grow, and merge; now and then one grows heavy enough to slide down, leaving a trail that breaks into smaller beads. None of this is an event; it is just the glass, alive.

Then the next night begins. There must be no hard cut. One idea: at dawn the glass slowly mists over into soft, pale light, and the next night emerges as the mist clears. Find the most beautiful way.

Make four nights and let them repeat in a fixed order. They share the same window and the same street, but the order and timing in which the lights go out differ, and so does the rain. Every night is reproducible.

⸻

THE GLASS AND THE LIGHT

Use optics so the light behaves believably, then stylise freely until it reads as a picture rather than a simulation:

* Each drop acts as a small lens. It refracts the out-of-focus scene behind it, so it shows a smaller, inverted, sharper image of the lights, with a darker rim where it bends light away, and a faint bright edge.
* The focus is on the glass. The street is far out of focus: its lights become discs whose size depends on distance, with soft edges, a gentle cat's-eye shape toward the corners of the frame, and slight colour fringing.
* Sliding drops leave clear trails through the mist. Through a trail, the bokeh looks a little cleaner, then the mist slowly returns.
* Light from the street glows softly in the mist on the glass.

⸻

THE LOOK

Artistic and a little retro, like a print from an old film camera, not photorealistic and 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 brightest lights.
* Exposure behaves like a patient photographer: as the lights go out, exposure opens slowly, so the late frames stay luminous and readable instead of turning black. As exposure opens, the grain grows, as it would on pushed film.
* Long gradients carry the image; the grain hides any banding.
* Highlights roll off softly instead of clipping.

The level and mood to aim for: Saul Leiter's colour photographs through rain and steamed glass, Rinko Kawauchi's pale, luminous film photographs, Gerhard Richter's blurred paintings.

Also reject cheap fake-vintage effects: scratches, dust, sepia, film borders, sprocket holes, light-leak presets, a heavy vignette, lens-flare presets.

⸻

TEXT ON SCREEN

The only text is a small, quiet caption in one corner, like a note on a photograph: the time of night. 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. Use soft limits instead of hard clamps wherever a value is limited.
* 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. Before settling on an approach, try at least three different ways of rendering the drops and the bokeh. Put them side by side on one contact sheet and choose the most beautiful. If none of them is beautiful, start again from a different idea instead of tuning constants.
2. Build a first working version with the chosen approach.
3. For two different nights, render the five moments of THE ARC at 1600 px wide, plus one 1:1 crop of drops for each night, and save them as PNG files in ./stills/.
4. Look at every still honestly. Fix anything that is not beautiful before you show me.
5. Stop. Tell me where the stills are and wait for my reply.

⸻

PHASE 2 — FINISH

After my reply, finish all four nights.

Before delivering, render one frame per second of the entire loop, look at all of them, and check 1:1 crops of the gradients for banding. At least 90% of the frames must be ones you would hang on a wall, and none may contain a failure from the list above. Check that the transition between nights has no visible cut.

Start Phase 1 now.

Phase 1 で Claude が出した静止画です（1600 px のPNGをJPEGにしたもの）。Phase 2 の修正の前の版なので、納品版とは露出と境目の色が少し違います。

しくみ

通りは2通りに描きます。1つはくっきりした通りの絵（ミップマップ付き）で、雨粒のレンズがこれを映します。もう1つはボケの絵で、明かりを1つずつ解析的な円として描き、縁をやわらかく、赤と青で半径を少し変えて色をにじませ、2つ目の絞りの円で切り取って隅に向かってキャッツアイにします。雨粒はCPUで1/30秒刻みに動かし、晩ごとの種から乱数を作るので、同じ時刻はいつも同じ絵になります。粒は体積を保って合わさり、一定の大きさを超えると引っかかっては滑りながら流れ落ち、跡に小さな粒を残します。流れた跡は曇りを拭い、曇りは時定数22秒で戻ります。

合成の段では、粒の表面の傾きからスネルの法則で屈折を求め、ガラスの奥の通りのどこが映るかを決めます。縁は全反射で暗く、フレネルの反射でかすかに明るくなります。粒のあいだの細かい霧の粒は手続き的に描き、曇りの濃さで増減します。露出は晩ごとの明かりと空の明るさから決め、明かりが消えるにつれてゆっくり開きます。最後にハレーション、露出で粗さの変わる粒子、黒の浮いた階調曲線、ディザをかけます。

確認したこと

720秒を1秒1コマで書き出し、60コマずつ12枚のシートで全部見ました。失格項目にあたるコマはありません。各晩の境目で曇りがいちばん濃い数コマ（4晩で約16コマ）はほぼ淡い色だけの画面になり、それを除いても壁に飾れるコマは97%以上と判断しています。縞は夜明けの空、暗い明け方前、曇りの境目を1:1で測り、残差を8倍にした画像と明るさを引き伸ばした切り抜きでも段がないことを確かめました。つなぎ目は前のコマとの差を測り、目立って大きいのは看板やコンビニが消える瞬間だけでした。境目の前後は2秒刻みでも見て、夜明けの青い曇りから灰色のヴェールを経て次の晩の色へ切れ目なく移ることを確かめています。720秒目から0秒目へも同じようにつながります。コンソールのエラーはありません。

Zenn記事：なし

X投稿：なし