What are f-stops? (with the help of processing.js)

Your browser does not support the canvas tag.

JavaScript is required to view the contents of this page.

I’ve been playing with processingjs lately and recently decided to explore it more as a tutorial tool. Above you get a small interactive simulation of the dimension of a lens aperture as a function of the f-stop number and its focal distance. Mainly this was to illustrate the working of a lens in a photography post I wrote on WHAT ARE F-STOPS? in portuguese some time ago. The experiment showed me that for the web the JS version is now much more interesting to use than the java only version. If you have any suggestion on how to improve this demo, please shout!