Color Vision Animation
Lottie Player
This first iteration is a simple animation which plays using the Lottie player. It has no interaction, so it functions as a simple explanatory animation.
Triggering Markers with Javascript
In this version, I wanted to see how I might introduce some controls so that each step in the animation can be triggered one at a time.
Hmm. This prism animation is nice, but I really want to show how the individual hues trigger red, green, and blue cone cells. For that, I'll need to give the learner some more things to play with.
HSL Lightbulb
I thought it would be more interesting if the learner could generate whatever color they wanted using a virtual LED lightbulb. I used HSL color, as it is the most human-readable color notation and it clearly illustrates the relationship between hue and the color wheel. See this colorwheel codepen I made to see how the hue number corresponds to a spot on the color wheel.
See the Pen Colorwheel, Custom Properties Refactor by Monet (@mfort) on CodePen.
My next step was to convert the HSL value to RGB, and then get the relative percentages of red, green, and blue values. This will allow me to activate a relative number of red cones, green cones, or blue cones matching the general hue of the lightbulb.
To further complicate matters, we do not have an even number of light receptor cells in our retinas. On average, 60% of cones are red receptors, 30% of cones are green receptors, and 10% of cones are blue receptors.Hmm. I have some thinking to do.
Hue
Saturation
Lightness
RGB
%
What's Next
Check back for updates! I am working on a diagram of the human eye with rods and cones that can be activated in relation to the color of my HSL lightbulb.
