WebGL is a tech­nol­o­gy that al­lows web browsers to dis­play graph­ics using the fast rou­tines of the graph­ics card, and Three.js is a frame­work which makes work­ing with WebGL a lot eas­i­er. Among many other things, Three.js pro­vides “con­trols”, Javascript ob­jects which han­dle the in­ter­ac­tion be­tween mouse events and the WebGL can­vas. One such con­trol is Track­ball­Con­trols. It maps mouse drag­ging ges­tures on an imag­i­nary track­ball and ro­tates the scene ac­cord­ing­ly. I have used it to make mod­els of poly­he­dra ro­tat­able for my view­ers: Stub­smüt­ter und Trib­anoc­ci (a link to the Ger­man sec­tion of this blog).

Per de­fault, the imag­i­nary Track­ball fills the en­tire avail­able brows­er win­dow. This is less than ideal if the ac­tu­al WebGL can­vas is just a tiny il­lus­tra­tion with­in a larg­er text:

I have writ­ten my very own ed­i­tor with syn­tax high­light­ing to write these sketch­es. This is far less im­pres­sive than it might ap­pear on a first glance: wxWid­gets, and there­fore also wx­Python, pro­vide ac­cess to the Scin­til­la li­brary via the Styled­TextC­trl el­e­ment, and this el­e­ment can dis­play HTML source code and style the dif­fer­ent el­e­ments in dif­fer­ent col­ors. Scin­til­la pro­vides “lex­ers” for dif­fer­ent lan­guages, parsers which are able to de­ter­mine which frag­ments of a doc­u­ment are key­words, iden­ti­fiers, string lit­er­als, nu­mer­i­cal lit­er­als, op­er­a­tors, com­ments and so on, and to­kens from dif­fer­ent cat­e­gories can be styled dif­fer­ent­ly. So “writ­ing my own ed­i­tor” in fact just means “glu­ing to­geth­er some stan­dard pieces”. It looks like this:

I’m not com­ple­tely con­tent with the ap­pearan­ce of the pre­ce­ding sketch, and so I de­ci­ded to try to pret­ti­fy it a bit. I re­pla­ced all the equa­ti­ons ge­ne­ra­ted by mi­me­tex as GIF images with texts I pipe through Ma­th­Jax, so if you have Ja­va­script disa­bled, you’ll see all equa­ti­ons as \(\LaTeX\) plain­text. Fur­ther­mo­re, I re­pla­ced all the screen­caps I took from Open­Of­fice or Excel and re­pla­ced them with with pret­ty mat­plot­lib plots; and I also re-did all the pre­vious mat­plot­lib plots. And I tried to en­han­ce the lay­out of the page a bit, and added more stills from the se­ries. So this is my se­cond take, the con­tent re­mains un­ch­an­ged, but I at­temp­ted to make the ap­pearan­ce more fit­ting for a se­ries about cute girls.

This sketch is de­vot­ed to the pop­u­la­tion dy­nam­ics of the fic­tion­al world de­pict­ed by the Japanese an­i­mat­ed TV se­ries “Puel­la Magi Mado­ka Mag­i­ca”. As such, it is in­evitable going to re­veal at least one major plot point. So if you are plan­ning to watch this show, I sug­gest that you post­pone read­ing this sketch until you are done watch­ing it. You have been warned: there will be spoil­ers.

I hes­i­tat­ed up­dat­ing Fire­fox to ver­sion 4.0, since I feared it might break a lot of ex­ten­sions I use. Well, it cer­tain­ly broke my theme Orbit Clas­sic. But now that I made the tran­si­tion, I de­cid­ed that I won’t main­tain Orbit Clas­sic any longer. With Fire­fox 4.0, I’m happy with the de­fault theme – all the more since it’s pos­si­ble to cram all the chrome tight­ly to­geth­er, so there isn’t much left to style any­way. It’s the com­pact­ness of Google Chrome com­bined with the awe­some ex­ten­si­bil­i­ty and flex­i­bil­i­ty of Fire­fox.

In chap­ter 4 of “In­ter­fer­ences”, I’m using sev­er­al lay­ers stacked on top of each other with cu­mu­la­tive drop shad­ows. Of course I have writ­ten a Python ex­ten­sion for Inkscape to gen­er­ate such cas­cad­ing shad­ows au­to­mat­i­cal­ly.

Let’s start with a sim­ple ex­am­ple: five round­ed rect­an­gles stacked upon each other.