Topics › Graphics

Spinning globe

This post describes my highly convoluted method of making an animated globe using Khan Academy's computer science framework.

A few weeks ago I found a set of coordinates for a world map in JSON format. I can't remember where exactly, but I think it was via a StackOverflow question. The first thing I did was to convert it into an SVG world map, because I like SVG and I've been meaning to get a world map for a while.

Project:

SVG Tutorial

A tutorial for creating simple SVGs. With interactive examples.

Project:

Image Processing with Pygame

Tutorial for how image processing works, using Pygame (and Numpy) as an example.

SVG optimiser

I've started work on a program I've been meaning to make for a while: an SVG optimiser. I've often found myself spending a lot of time tidying, simplifying and compressing SVGs created by Inkscape or Illustrator. Sometimes, changes are merely aesthetic, e.g. reducing numbers from an unnecessary six decimal places to one, or removing unused attributes. These changes make it easier to read the file, and can reduce its size noticeably. Other changes are more practical, such as removing transforms which otherwise make it difficult to see where paths and shapes are actually placed.

Pygame particle simulation in 3D

Below is a video of my first attempt to move my Pygame particle simulation into the third dimension (thus combining it with my Pygame 3D tutorial). I meant to write about it a while ago, but got distracted trying to work out how to display an image rotated in three dimension (for the walls). I still haven't worked it out.

3D Animation in SVG

A couple of months ago, I wrote a short post about experimenting with creating 3D graphics with SVG. Well, I've been experimenting a bit further, with shading and a bit of animation. I decided to make a mobile after seeing the Google logo celebrating Alexander Calder's 113th Birthday, which I think was some sort of Canvas animation.

Moving SVG elements in Z

This a quick post prompted by a question of Stack Overflow about how to move one element drawn after another below it. Because of the way SVG works, sequentially drawing elements on the page in the order they are in the file, there is no simple way to do this. Instead you have to play with the DOM, grabbing the element you want to bury and inserting it into the beginning of the document.

SVG animation: Rotating elements

A few days ago, I wrote about creating a rotating 3D SVG cube, which involves using EMCAScript to redraw every line. However, simple two-dimensional transformations can be animated in SVGs with much less hassle using <animateTransform>. For example:

The code for this animated square is

Rotating 3D SVG Cube

Since getting my head around how 3D graphics work (to a degree at least), I thought I'd apply what I know to my favourite format: SVG. Below is an SVG displaying a sqaure, but if you click on the arrows, the shape changes, giving the appearance of a cube rotating about either the x- or y-axis.

Topics:

Project:

Pygame 3D Graphics Tutorial

An introduction into how to create 3D graphics using Python and Pygame.