Getting Started With Ruby Processing

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.

Processing was built by Casey Reas and Benjamin Fry, two protegés of indisciplinary digital art guru John Maeda at the MIT Media Lab.

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 floats and 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.

Setup

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.

Processing

Download Processing from the official website and install it. When you’re done, make sure that the resulting app is located in your /Applications directory.

JRuby

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

Install the ruby-processing gem globally with gem install ruby-processing.

If you’re using rbenv, don’t forget to run rbenv rehash.

JRuby Complete

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 jruby-complete using 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: setup and draw.

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 frame_rate method.

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 background().
• 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 my_sketch.rb.

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 fill and 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 noSmooth.

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 snake_case.

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 frame_count, width, height, mouse_x, and 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 setup and 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.

Another example of a game I built early on in my programming career can be found here. I later did a series of refactorings of this code on my personal blog.

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.

Learning More

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.

Built-in Samples

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.

Daniel Shiffman also wrote a book called The Nature of Code. The examples from it have been ported to Ruby and are another good resource.

Process Artist

There’s a fun Jumpstart Lab tutorial called Process Artist, that walks you through building a drawing program à la MS Paint.

Conclusion

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.