20,000 ellipses, no pixels.
この写真は、縁をぼかした 20,000 枚の楕円のみで描いています。ピクセルはひとつもありません。スクロールすると、順を追って仕組みの解説を読むことができます。
This photo is drawn with nothing but 20,000 soft-edged ellipses — not a single pixel. Scroll on to read how it works, one step at a time.
Edges, not pixels.
看板に寄ると、出てくるのは四角いピクセルではなく、縁のある楕円です。ぼかしの幅を画面に対して一定に保つので、寄るほど縁がくっきりします。
Move in on the sign and you find ellipses with edges, not square pixels. The blur is held at a fixed width on screen, so the closer you go, the sharper the edges.
Painted coarse to fine.
楕円は、写真の平均の 1 色を背景にして、上に大きなものから順に置いていきます。この図は置いた順に 6 枚の層へ分けたものです。ドラッグで回してみることができます。
The ellipses are laid over the photo's average colour, largest first. This view splits them into six layers in the order they went down. Try dragging to turn them.
Layer · Ellipses
←Drag to turn→
One ellipse at a time.
- 1
元の写真といちばん違う場所を探す。
- 2
そこに置く楕円の色を、計算でひとつに決める。
- 3
大きさ・向き・ぼかしを、ずれが減らなくなるまで少しずつ変える。
Find where the picture is most wrong, work out the colour that fits there, then nudge size, angle and blur until the error stops dropping. Repeat 20,000 times.
Base — one colour
写真全体の平均の色。ここから描き始めます。
Every ellipse, outlined.
最後に、20,000 枚をそれぞれの色の輪郭だけで描きました。写真は、楕円の輪郭線のみにしたものです。
Finally, all 20,000 ellipses drawn as outlines in their own colours — the photograph, reduced to the edges of its ellipses.
- Ellipses
- 20,000
- File
- 280 KB（同じ写真の JPEG は 339 KB）
- Draw
- One WebGL draw call
- Fit
- 19 min on a laptop CPU