Too loud?

Keyboard shortcuts

Anywhere on the site, while you are not typing.

M
Sounds on or off
E
Copy my email
T
Day or night
S
Change the season
D
Developer mode
?
These shortcuts
Esc
Close what is open

The lake, full size

back

Scroll to look closerDrag to wanderTap anything

01Fishing

How it works

Steer the hook to a fish and wait for a bite, then yank it out: move and click with a mouse, drag and tap with a finger, or point your phone and lift it sharply. Five kinds swim here. Arrows and the space bar work too.

  • One lake, a real camera. This is the same painted lake, not a new scene. The camera drops to the fisherman, turns the way he faces and tips up into his view: every pixel’s ray is followed down to the water on the GPU, and the creatures are drawn through the same perspective, each as large as its distance makes it.
  • The lake’s own fish. The fish you watched from above are the ones you catch, with a few more let into the water in front of the jetty. They come to look at the lure, and one takes it for a second: that is the bite, and a yank then always lands it. A yank at nothing sends them off.
  • Something else on the hook. Now and then a fish comes up with something about me: what I do off-screen, what I made before any of this was work, the work I am proudest of, the character I like and why, what I am listening to right now, and once in a long while how I got my job. Each goes in your creel, which this browser keeps for next time.
  • Your phone as the rod. A QR code and a six letter code open a room on two independent servers, PeerJS’s public one and our own Cloudflare relay, and the phone takes whichever answers. From then on its aim and its lift go straight to the page over WebRTC, usually a few milliseconds apart. The aim comes from the phone’s whole orientation, so it works held like a remote or upright, and a lift is the aim rising fast. One phone to a lake at a time.

02Colophon

How it’s made

The lake is not a picture or a video. It is painted in code and runs live in WebGL2, right in your browser.

  • Painted in a worker. Every tree, reed and lily pad is drawn by a script when the page opens, off the main thread, so the page still scrolls while it paints. Until then you see a blurred preview smaller than a kilobyte, inlined in the HTML.
  • Real water. A wave simulation on the GPU spreads the ripples when you tap, and the light on the lake floor is worked out for whatever part you are looking at, so it stays sharp as you zoom.
  • Sharper up close. Zoom in and the painting is redone at a higher resolution, so the details hold instead of blurring.
  • Made once a visit. The painting is kept, so coming back here, or to the home page, is instant.
  • Asleep when unseen. The loop stops when the lake is off screen or the tab is hidden, and a canvas this big caps its pixel density at 1.5x to spare the GPU.
  • Sounds made on the spot. Every splash, croak and quack, and the radio's music, is synthesised with Web Audio. There are no sound files.