# Koi

> Koi: a clear pond over river stones where koi swim, flee a fast hand, nose up to a still one and race for the food you drop. A real-time WebGPU experiment by Luis Bizarro.

A koi pond in a garden, seen from above in late-morning sun: clear green water over real river stones, nine koi drawn each visit from thirteen varieties (kohaku, sanke, showa, ogon, platinum, asagi, chagoi, hi utsuri, ki utsuri, tancho, bekko, goshiki and kujaku) and a raft of lily pads with two water lilies. Around the water: a thin bronze edge, gravel, a curved travertine bench, a moss island with a red maple whose leaves fall and float on the water, drifts of flowering shrubs in pink, magenta, coral, yellow, blue and white, with silver artemisia, lavender, salvia and feather grass, and a stone lantern that glows from dusk, all reflected in the pond. The water is a heightfield simulation: moving the pointer drags a wake through it, a click drops food that sends rings across the surface, the fish leave wakes when they swim near the top, and moving the browser window sloshes the whole pond. The fish are a school with their own minds: they wander, dart away from a fast hand, come back and nose at a hand held still, and race for the food and gulp it at the surface. Sun caustics are traced through the simulated surface every frame onto the bed, the fish and pads cast soft shadows, the surface reflects the sky, the maple and the shrubs and glitters where the sun catches the ripples, and the koi have scales, translucent fins and real patterns. Scrolling, or swiping with two fingers on a phone, moves the time of day: moonlit night, dawn, morning, noon, golden hour and dusk, with the sun, the sky, the water colour and the shadows following. CC0 water sounds play when you touch the pond.

- Live: https://koi.bizar.ro/ (needs WebGPU: a recent Chrome, Edge or Safari)
- Built with: Raw WebGPU and WGSL, TypeScript and Vite.
- After: top-down koi pond photography.
- Author: Luis Bizarro, creative technologist and real-time 3D developer for the web

## Author

Luis Bizarro builds real-time 3D for the web with WebGL and WebGPU: shaders, interactive scenes and award-winning creative websites. His work includes Apple, Airbnb, Active Theory, National Design Studio, UNIT9 and independent studios.

- [Portfolio](https://bizar.ro/): every project and experiment
- [Portfolio for agents](https://bizar.ro/llms.txt)
- Contact: luis@bizar.ro