Stephen Smith's Blog

Musings on Machine Learning…

Drawing in Code by Processing

leave a comment »


Introduction

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.

Gallery

Processing is an open source language and environment, but further the folks at Processing.org 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.

Summary

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 );
  }
  else
  {
      KockSnowflakeSide( level - 1, size / 3 );
      turn( 60 );
      KockSnowflakeSide( level-1, size / 3);
      turn( -120 );
      KockSnowflakeSide( level-1, size / 3);
      turn(60);
      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);
  fill(0);

  turtleX = newX;
  turtleY = newY;
}

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

Written by smist08

April 11, 2020 at 4:49 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: