While at university I first started thinking about building a personal site, and from the beginning I knew I wanted it to feel unique and a little artistic. So in 2019 I built the procedurally generated p5.js sketch above and deployed it as a simple single-page app on Netlify, along with some basic contact information.
Each cloud is created algorithmically rather than relying on static images, which means every run produces a slightly different scene. I later expanded the sketch with mountains, a moon, stars, and a dark/light switcher to make the whole scene feel more complete.
Cloud generation
The cloud algorithm is deliberately simple. Each cloud starts by choosing a random number of points, then laying them out across a fixed width relative to the canvas height. The first and last points are kept small so the cloud tapers at the edges, while the inner points get random radii within a broader bounded range. That gives each cloud a different silhouette without letting it become too spiky or visually chaotic.
Rendering is done with basic p5.js shapes rather than image assets. The code draws a thin rounded rectangle as the base of the cloud, then draws a row of semicircular arcs above it using the generated point positions and radii. Because the whole shape is built from stored proportions, the same cloud can be resized cleanly when the viewport changes.
The cloud layer keeps a small set of clouds alive, assigns each one a speed from a short list to simulate a parallax effect. Each frame, clouds move horizontally based on elapsed time, with the timestep clamped so tab switching or frame drops do not make them jump too far. Once a cloud has moved off the right edge, it is recycled back to the left, preserving a continuous drifting effect without constantly rebuilding the scene.
Reflection
While developing and implementing this solution, I ran into all kinds of edge cases, including viewport resizing, optimization, and equal cloud distribution across screen sizes. As well as working on the application code, I spent a lot of time learning about publishing and optimizing a site, which gave me early experience in domain name registration, CI/CD pipelines, and content delivery networks.
My personal site has changed a lot since then, and this scene no longer sits on the landing page, but I still look back on it fondly as one of my earliest web projects.