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

Added random color generation to my rand class, to support random colors for the petals.
Changed the petal shader to make use of random colors.
Modified the leaf shader to add the suggestion of veins on the underside.
Changed the background color to a medium gray for easier viewing.
Fixed an oversight by which the stem shader wasn't being affected by lighting.

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.

Created Node3d class to serve as parent nodes
refactored DynamicGeo to be a subclass of Node3d
Created Flower class containing a stem (with leaves), petals, and a center
Made moving the mouse vertically within the canvas control the pitch of the flower (better for seeing into the flower itself)

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

Refactored leaf class into base ComplexCurveModel class
Extended ComplexCurveModel for both leaves and petals
added in proper normal calculation.

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:

Scene: sets up a WebGL context.
DynamicModel: base class for a "dynamic" model which in this case means a model with procedurally generated geometry. The random generation is based on a given seed value, so can be persistent if that's what you want
Petal: A sub-class of DynamicModel that generates a leaf-shaped mesh and colors it from red to green away from the spine.
Curves Implements Bezier curves, both quadratic and cubic (two cubic curves are the basis for the shape of each leaf)
rand Implements a linear congruental random number generator with the ability to set a given seed