Stephen Smith's Blog

Musings on Machine Learning…

Posts Tagged ‘graphics

Drawing in Code by Processing

leave a comment »


Last time, we started to explore Arduino programming. I noted that the Arduino IDE and language is largely based on Processing. In this article we’ll look at the Processing language and environment. Processing was designed to be a simple language to allow people in the Graphical Arts world to learn programming. Hence the language is oriented around drawing and animation.

There are quite a few education oriented programming systems such as Scratch which I talked about here. Processing is nice because it is really a subset of Java, so as you learn and become proficient at Processing, you are also learning a lot of Java. The drawing library in Processing is popular and has been ported to many other languages such as Python. The drawing library draws from PostScript and OpenGL and is quite powerful, in spite of its simplicity. Khan Academy uses a JavaScript version of Processing, namely ProcessingJS to teach programming for kids.

The Processing IDE and the subset of Java it uses are intended to be simple. The goal is to eliminate as much overhead as possible so you just write your program as sketches where you iteratively develop the end result. The feeling was that program design and object oriented design add too much of a barrier for non-technical people to learn programming. For artists, it is much more natural to learn by experimenting and playing rather than trying to design something before starting to program.

Drawing a Koch Snowflake

We drew a simple Koch Snowflake fractal back in my article introducing writing iOS Apps in Swift. The complete Processing code for this is at the end of the article. Notice how much simpler it is to do this in Processing than in Swift. This is part of why Processing is such a good language to learn programming with.

You enter the code into the Processing IDE:

And then hit the green play button to run the program and the following window pops up:

Feel free to play with the program (called a sketch) to do things like change the size, level or anything else.

Every Processing sketch has two routines:

  1. setup: run once when the program starts before anything else.
  2. draw: run repeatedly at the configured frame rate.

In our sketch below, the routine that does the actual drawing is the line() function. The first line in setup() is size() which configures the size of the drawing window.

All in all this is a fairly simple program to create something as complex as this fractal. This is why Processing and the Processing graphics library is so popular.


Processing is an open source language and environment, but further the folks at encourage the sharing of work. It is interesting to browse the work that other artists have done. Here are a couple of links:

Exhibition: a curated exhibition of projects.

OpenProcessing: Gallery of submitted projects.

Hour of Code: Gallery of submitted projects.

Gallery: Place to share and discuss projects.


If you are interested in learning how to code and you have an artistic temperament then Processing is a good place to start. If you’re interested in learning Java, then Processing is a good way to go. If you are a programmer and interested in learning graphics or animation then Processing is a really good place as well.


Processing source code for the Koch Snowflake fractal:

float turtleX;
float turtleY;
float turtleHeading = 0;

void setup() {
  size(600, 600);
  turtleX = width/5;
  turtleY = height/3;

void draw()
  int level = 3;
  int size = 400;

  turn( 60 );
  KockSnowflakeSide( level , size);
  turn( -120 );
  KockSnowflakeSide( level, size);
  turn( -120 );
  KockSnowflakeSide( level, size);
  turn( 180 );

void KockSnowflakeSide(int level, int size)
  if (level == 0)
      forward( size );
      KockSnowflakeSide( level - 1, size / 3 );
      turn( 60 );
      KockSnowflakeSide( level-1, size / 3);
      turn( -120 );
      KockSnowflakeSide( level-1, size / 3);
      KockSnowflakeSide( level-1, size / 3);

void forward(float amount) {
  float newX = turtleX + cos(radians(turtleHeading)) * amount;
  float newY = turtleY + sin(radians(turtleHeading)) * amount;

  line(turtleX, turtleY, newX, newY);

  turtleX = newX;
  turtleY = newY;

void turn(float degrees) {
  turtleHeading += degrees;

Written by smist08

April 11, 2020 at 4:49 pm

Amazing CGI

leave a comment »

I saw District 9 this weekend. Quite a good movie. Memorable CGI generated aliens “the prawns”. Quite an improvement from aliens that are clearly people with lots of makeup and fur suites, quite an improvement over using muppets and other robots/puppets. The aliens appear to move naturally, they have insect like mouth parts that are constantly moving and bodies that clearly an actor couldn’t fit into. Good work to the Vancouver company Imagine Engine that created them. The aliens fit right into the film and are completely realistic.

The I was blown away by the trailed for Cameron’s new movie Avatar which is coming in December. Again huge amounts of CGI creating a truly alien but beautiful planet and creatures. Really amazing how realistic these imagined worlds are becoming.

Even on standard PCs today with relatively inexpensive graphics cards from NVidia or AMD, its amazing the level of realistic graphics you can get in modern computer games. Each frame in the movies mentioned above might take hours to render to get the desired quality, but computer games today aren’t far behind and rendering 30 frames a second on current graphics co-processor cards. These cards often have 1 gig of their own memory and hundreds of parallel processors doing all the 3D calculations.

It looks like with modern movie making technology, truly whatever can be imagined can be created. Currently it might be limited to big budget productions cost $100 million to make. But prices keep coming down, techniques keep getting cheaper. Next we’ll see movies less expensive to produce, we’ll see this technology incorporated into video games. Should be amazing to see the crop of movies that start appearing over the next few years.

Written by smist08

August 24, 2009 at 1:55 am

Posted in graphics

Tagged with , , ,