If you’re like me, you love to code because it is a creative process.
In another life, I am a musician. I’ve always loved music because it represents a synthesis of the concreteness of math and the ambiguity of language. Programming is the same way.
But despite the creative potential of programming, I often find myself spending days working out the kinks of HTTP requests or dealing with SSL certificates. Some part of me yearns for a purely Apollonion environment in which to use code to make something new and unseen.
When I feel a void for purely creative coding, I turn to the Processing language.
What Is Processing?
Processing is a simple language, based on Java, that you can use to create digital graphics. It’s easy to learn, fun to use, and has an amazing online community comprised of programmers, visual artists, musicians, and interdiscplinary artists of all kinds.
Since the project began in 2001, it’s been helping teach people to program in a visual art context using a simplified version of Java. It comes packaged as an IDE that can be downloaded and used to create and save digital art “sketches”.
In 2009, Jeremy Ashkenas, creator of Backbone.JS, Underscore.JS, and Coffeescript), published the ruby-processing gem. It wraps Processing in a shim that makes it even easier to get started if you know Ruby.
In this post, we’ll take a look at how you can create your first interactive digital art project in just a few minutes.
Why Ruby Processing?
Since Processing already comes wrapped in an easy-to-use package, you may ask: “why should I bother with Ruby Processing?”
The answer: if you know how to write Ruby, you can use Processing as a visual presentation layer of a much more complex program. Games, interactive art exhibits, innovative music projects, anything you can imagine; it’s all at your fingertips.
Additionally, you don’t have to declare types,
voids, or understand the differences between
ints to get started, as you do in pure Processing.
Although there are some drawbacks to using the Ruby version Processing (most notably slower performance), having Ruby’s API available to translate your ideas into sketches more than makes up for them.
When getting started with Ruby Processing for the first time, it can be a little bit overwhelming to get all of the dependencies set up correctly. The
ruby-processing gem relies on JRuby, Processing, and a handful of other dependencies. Here’s how to get them all installed and working.
I’ll assume you already have the following installed: homebrew, wget, java, and a Ruby manager such as rbenv.
Download Processing from the official website and install it. When you’re done, make sure that the resulting app is located in your
Although it’s possible to run Ruby Processing on the MRI, I highly suggest using JRuby. It works much better, as Processing itself is built on Java.
Install the latest JRuby version (1.7.18 at the time of this writing). For example, if you’re using
rbenv, the command would be
rbenv install jruby-1.7.18, followed by
rbenv global jruby-1.7.18 to set your current ruby to JRuby.
ruby-processing gem globally with
gem install ruby-processing.
If you’re using
rbenv, don’t forget to run
You’ll need the
jruby-complete Java jar. Fortunately, there are a couple of built-in Ruby Processing commands that make it easy to install.
rp5 is the Ruby Processing command. It can be used to do many things, one of which is to install
wget. To do so, run
rp5 setup install.
Once the installation is complete, you can use
rp5 setup check to make sure everything worked.
Setup Processing Root
One final step. You’ll need to set the root of your Processing app.
This one-liner should take care of it for you:
echo 'PROCESSING_ROOT: /Applications/Processing.app/Contents/Java' >> ~/.rp5rc
Ready To Go
Now that we have everything installed and ready to go, we can start creating our first piece of art!
Making Your First Sketch
There are two basic parts to a Processing program:
The code in
setup runs one time, to get everything ready to go.
The code in
draw runs repeatedly in a loop. How fast is the loop? By default, it’s 60 frames per second, although it can be limited by your machine’s processing power. You can also manipulate it with the
The following example sketch sets the window size, background and stroke colors, and draws a circle with a square around it.
def setup size 800, 600 background 0 stroke 255 no_fill rect_mode CENTER end def draw ellipse width/2, height/2, 100, 100 rect width/2, height/2, 200, 200 end
Here’s a quick run-through of what each of these methods is doing:
size: Sets the window size. It takes two arguments: width and height (in pixels).
background: Sets the background color. It takes four arguments: R, G, B, and an alpha (opacity) value.
stroke: Sets the stroke color. Takes RGBA arguments, like
no_fill: Tells Processing not to fill in shapes with the fill color. You can turn it back on with
fill, which takes RGBA values.
rect_mode: Tells Processing to draw rectangles using the x and y coordinates as a center point, with the other two arguments specifying width and height. The other available modes are: CORNER, CORNERS, and RADIUS.
ellipse: Draws an ellipse or circle. Takes four arguments: x-coordinate, y-coordinate, width, and height.
rect: Draws a rectangle or square. Takes four arguments: x-coordinate, y-coordinate, width, and height.
Note that the coordinate system in Processing starts at the top-left corner of the screen, not in the middle as in the Cartesian Coordinate System.
Running the Program
If you’re following along at home, let’s see what we’ve made! Save the code above into a file called
There are two ways to run your program: you can either execute it once with
rp5 run my_sketch.rb, or you can watch the filesystem for changes with
rp5 watch my_sketch.rb. Let’s just use the
run version for now.
Pretty basic, but it’s a good start!
Using just the seven methods above, you can create all kinds of sketches. You may also want to add some color with the
stroke methods described above.
Other Commonly Used Methods
Here are a few other useful Processing methods to add to your toolbox:
line: Draws a line. Takes four argments: x1, y1, x2, y2. The line is drawn from the point at the x, y coordinates of the first two arguments to the point at the coordinates of the last two arguments.
stroke_weight: Sets the width of the stroke in pixels.
no_stroke: Tells Processing to draw shapes without outlines.
smooth: Tells Processing to draw shapes with anti-aliased edges. On by default, but can be disabled with
For a list of all the methods available in the original version of Processing, check out this list. Note that the Java implementation of these methods is in
camelCase, but in Ruby they are probably in
Some methods have also been deprecated, usually because you can use Ruby to do the same thing more easily.
If you see anything in the Processing docs and can’t get it to run in Ruby Processing, use
$app.find_method("foo"), passing in the name of the Processing command to find out how to invoke it in Ruby.
Responding to Input
Now that we know how to make a basic sketch, let’s build something that can respond to user input. This is where we leave static visual art behind, and start to make interactive digital art.
Although you can use all kinds of physical inputs to control Processing (e.g. Arduino, Kinect, LeapMotion), today we’ll just use the mouse.
Processing exposes a number of variables containing the application’s state at runtime, such as
mouse_y. We can use the last two to control aspects of our program.
Here’s a sketch that changes with the mouse’s x and y coordinates. It draws lines of random weight starting at the top of the screen at the mouse’s x position (
mouse_x, 0) to a y coordinate between 0 and 200 pixels to the right of the mouse’s y position (
mouse_y + offset, height).
def setup size 800, 600 background 0 # First argument is grayscale value, second is opacity. Feel free to use RGBA instead. stroke 255, 60 frame_rate 8 end def draw r = rand(20) stroke_weight r offset = r * 10 line mouse_x, 0, mouse_y + offset, height end
Load that up and check it out!
Wrapping Your Sketch in a Class
One last note before we go. Perhaps it goes without saying, but you can totally do everything you normally do in Ruby in Ruby Processing.
You can call other methods from within your
draw methods. In fact, you can even wrap everything in a class that inherits from
Processing::App. With the power of Object Oriented Programming available, you can build a whole project, with state and behavior to that control the visual output of processing through these two methods.
Here’s a snippet from a version of Tic Tac Toe that inherits from
Processing::App that I built with Rolen Le during gSchool.
require 'ruby-processing' class TicTacToe < Processing::App attr_accessor :current_player def setup size 800, 800 background(0, 0, 0) @current_player = 'x' end def draw create_lines end def create_lines stroke 256,256,256 line 301, 133, 301, 666 line 488, 133, 488, 666 line 133, 301, 666, 301 line 133, 488, 666, 488 #borders line 133, 133, 666, 133 line 666, 133, 666, 666 line 133, 666, 666, 666 line 133, 133, 133, 666 end ... end
To see the rest of the code, visit the GitHub repo.
I’m still working on generalizing a pattern for game development with that I like. Keep an eye out for future posts about the best way to build a game with Ruby Processing.
There’s so much more you can do in Processing than what we’ve covered here! Bézier curves, translations, rotations, images, fonts, audio, video, and 3D sketching are all available.
The best way to get comfortable with Processing is to do a lot of sketching. Just tinkering with the methods covered in this post would be enough to keep you busy creating new things for a lifetime.
If you’ve really caught the bug and want to go even deeper, check out some of these resources.
If you run
rp5 setup unpack_samples, you’ll get a bunch of Processing sketch samples in a directory located at
~/rp_samples. I encourage you to open them up and take a look. There’s a lot you can glean by changing little bits of code in other projects.
Online Examples From Books
Learning Processing is an excellent book by Daniel Shiffman. In addition to being a valuable resource for Processing users, it has a number of examples available online.
There’s a fun Jumpstart Lab tutorial called Process Artist, that walks you through building a drawing program à la MS Paint.
Processing is an awesome multi-disciplinary tool. It sits at the intersection of coding, visual art, photography, sound art, and interactive digital experiences. With the availability of the Ruby version, it’s super easy to get started.
If you’re a programmer looking for a way to express your creativity, you couldn’t find a better way to do it than to try tinkering with Processing. I hope this post gets you off to a great start. Good luck and keep sketching!
P.S. Have you created anything with Processing or a similar sort of tool? Why don’t you share it with us? Throw us a comment below.