I have been interested in data visualization for a long time and wanted to do a scraping & visualization project. In the search for ways to add GUI to ruby, I came across Shoes developed by _why. At first glance, It looked promising but soon found out that it lacked advanced features that I need.

After a long search, I came across a gem called Ruby-processing. It is a ruby wrapper around Processing built using JRuby and provides all the processing methods that you can write in ruby syntax.

I am writing this in my blog post because the documentation on using ruby-processing is not so clear and took me about a week to get a simple sketch running. Another two days were spent trying to figure out getting control panels working in the sketches.

What is Processing?

Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities. The language builds on the Java language, but uses a simplified syntax and graphics programming model.

Install Processing by visiting following link. Ruby-Processing currently supports version 2.0.3 for Mac.
http://processing.org/download/
After download, Drag the the file into Applications folder

JRuby???

JRuby is an implementation of the Ruby programming language atop the Java Virtual Machine, written largely in Java. JRuby is tightly integrated with Java to allow the embedding of the interpreter into any Java application with full two-way access between the Java and the Ruby code.

For the following instruction, I will be showing installation method for using JRuby-complete.Jruby-complete is a JRuby in a single jar file and does not require installation.

Download jruby-complete file from the following link.
http://jruby.org/download

Setup

First, install Ruby-Processing gem.

$ gem install ruby-processing

After the gem is set, you need to create ~/.rp5rc configuration file and include following line of code (Mac only).

 PROCESSING_ROOT: "/Applications/Processing.app/Contents/Resources/Java"

Copy downloaded jruby-complete file and move it to following directory
*it will vary depending on your ruby installation

/Users/<username>/.rvm/gems/ruby-2.1.0/gems/ruby-processing-2.4.3/lib/ruby/

and rename the file to jruby-complete.jar

Because there is file size limitation on ruby gems, ruby-processing can not include JRuby file in the gem itself and have to be placed in the folder manually.

Writing RP5 sketch

Now, we are ready to run Ruby-Processing. It requires two methods in order for the sketch to run.

def setup
#codes in setup method runs only once.
end

def draw
#codes in draw method loop continuously and updates canvas every frame
end

I am going to skip further instructions on how to write processing code in this blog post. There are lots of resources available online and in book format.

As a sample I wrote following code

load_library :control_panel  # load control_panel library
attr_reader :panel, :hide
attr_accessor :size_x, :size_y

def setup
    frame_rate 60 #sets framerate for the sketch
    size(800, 800) #canvas size in pixels

    @size_x = 1.to_f #setup instance variable in float
    @size_y = 1.to_f

    #following lines are for control panel setup
    @hide = false
    control_panel do |c|
      c.look_feel "Nimbus"  
      c.slider(:size_x, 1..width, 100)
      c.slider(:size_y, 1..height, 100)
      c.button :reset!
      @panel = c
    end
end

def draw
    #prevents control panel from looping
    unless hide
        @hide = true
        panel.setVisible(hide)
    end

    #remapping mouse position between values 0-255 for colors
    @new_mouse_x = map(mouse_x, 0, width, 0, 255)
    @new_mouse_y = map(mouse_y, 0, height, 0, 255)

    #setup colors and strokes
    background 255
    stroke(255)
    stroke_weight(0)
    fill(@new_mouse_x, @new_mouse_y, @new_mouse_x)

    #draw ellipse
    ellipse(width/2, height/2, @size_x, @size_y)
end

def reset!
    #resets values of sketch
    @size_x = 100.to_f
    @size_y = 100.to_f
    @new_mouse_x = 10
    @new_mouse_y = 10
end

There are two ways to run the code.
To run the sketch statically use:

$ rp5 --nojruby run <file name>.rb

or use following command to run sketch with live update

$ rp5 --nojruby watch <file name>.rb

Watch it in action! :)

http://vimeo.com/88125135