Randomized Location-based Flowers with WebGL

This demo procedurally generates flowers using pure WebGL. If you mouse over the canvas, you can rotate the model directly by moving the mouse horizontally. Mouse out to resume animation.

To get a new flower, either enter coordinates, select a city from the drop-down, or just refresh the page.

You can optionally enter a set of latitude / longitude coordinates to serve as the seed. The same seed is guaranteed to always generate the same flower, so something like this could be used to provide an extra layer of detail / visual interest for location-based applications.

Pretty much all of the code was written from scratch, with the only external code being the glMatrix vector/matrix library.

This was built over the course of about a week, though I didn't work on it every day during that time. If you'd like to get a feel for how the project progressed, please scroll through the below release notes below to see what changed with each update.

v0.9: Making things prettier

v0.8: Lat/Long seed values. I've added in inputs to set the random seed based on lat/long coordinates

v0.7: Colors! Added rudimentary shaders

v0.6: Full Flower Finally putting it all together into a full flower. Everything is still colored via normals- next step is to improve the shaders.

v0.5: Lathed Geometry added LathedGeo class to create geometry by lathing a curve. I'll be using this fo the central parts of the flower.

This is again being rendered with normals for color.

v0.4: Leaves and Petals

Shown here are petals (top two rows) and leaves (bottom two rows). In both cases, the backfaces are rendered with either green (leaves) or red(petals), and the front faces are rendered with the color that corresponds to the normal.

If you mouse over the canvas, you can rotate all the models by moving your mouse left and right. Mouse out to resume animation around the Y axis.

v0.3: Stems and starting in on lighting Adding leaves to the stem, plus laying the groundwork for lighting.

v0.2: Fully 3d Leaves Big update to leaf geometry generation, with curvature along all three axes.

v0.1: Getting started Rough cut of the basic scene and model hierarchy.

Notable files: