Archives for : graphics

How to draw pi…

3141 digits with stampI’m possibly the least mathematically-minded programmer I know, but a maths-teacher friend recently prompted me to throw together an app we’ve called Pi-Wire. It started with the mathematical artwork of Cristian Ilies Vasile. To quote Visual news,

First Cristian Ilies Vasile had the idea of connecting each digit of π to its successive digit with links to the position of the numerically corresponding segments. Martin Krzywinski added to Vasile’s visualization…

The effect’s pretty impressive (check out the links). It distributes the digits 0-9 around the edge of a circle, and visualises the order in which they appear in π (or another constant). So, for the digits 3.14159, it draws connections from:

3 → 1, 1 → 4, 4 → 1, 1 → 5, 5 → 9

Chris Smith, maths teacher and noted pi geek, wondered whether it was possible to animate the effect, “so people get a handle for how segments are put together and then the dynamics of it.” The (very cool) software used in the original visualisations is most-often used in biology, though it would probably have been possible to do something here… I’ve heard it remarked that computer scientists like to “make” things, as a first resort, rather than last (gross generalisation, but I include myself in it…). Since there would be work involved in automating Circos, I thought I’d have a bit of fun with version 4.5 of the Windows Presentation APIs*.

The result was Pi Wire, which has been thrown together in the last few days. The application exposes parameters that adjust what’s being visualised, and it animates the process, as well as saving final (or intermediate) images. It renders pi, e, or φ to a variable number of decimal places. Each connection, in the example above, is rendered in colour, depending on the value of the (first) digit – 3s are pink/purple, 1s are orange, etc. It doesn’t look like much when working with only five decimal places, but the example shown in the picture uses the first 10,000 digits of pi. Chris blogged a little bit about the maths and patterns here.

Critically, the animation means a picture can be built up bit-by-bit (for demonstrating to kids, for example). As well as tweaking the render settings, we can adjust colours, line properties, and so on. We can switch on or off individual segments/digit values. The golden/orange graphic (right) shows only the progressions (for the first 100 digits) which start with 1. It shows the spread of which digits usually follow a 1.Pi 1000 digits - draw 1 only

It’s a bit of a rush job, though it’s (fairly) easy to use and hopefully interesting. Chris is certainly having a lot of fun making pretty pictures!

* Which I’d been using for work anyway (an old link, but one example).


No more flicker

Over the past couple of weeks the flicker has been gradually reduced. I’ve now implemented my own buffering code, rather than using the built-in support, to eliminate it altogether. We now have a decent frame rate with smooth robot movements and no annoying background flicker.

Reduced flicker

Up until now, JAKE has had some flickering in Java, especially when running programs with lots of on-screen objects. From now on, there’s a lot less flicker when the Java programs run, and this is reflected in the PacMan video I’ll be posting later tonight.

Minor updates this week

As well as the new world editor, there have been some other small updates to JAKE this week.

Firstly, the graphics have been improved slightly in the JAKE Java library, so that there’s no longer the same stretching and pixelating as before. The wall and beeper icons are now crisper. You can see this in one of the screenshots for the world editor, when compared to a scenario from a few weeks ago:

Secondly, tooltips have been added. The two screenshots below show how tooltips show up in both the world editor and the class diagram. For world editor objects, the tooltip shows the name and type of the object (e.g. “jake (robot)” or “myBeep (beeper)”). For class icons, the tooltip describes this class’s relationship to its parent:

Finally, the WorldObject class has been replaced by “Thing”. This saves any confusion from having the “World” and “WorldObject” classes next to each other in the diagram; we didn’t want it to appear that WorldObject was an instance of World. So, now, all objects in the World are “Things”.