Getting Visual with
Ruby-Processing
Richard LeBer
atlrug 2010.11.10
aka
Ooh – pretty pictures!
Capabilities
• Grayscale, RGB and HSB color with transparency
• Point, line, shapes, curve, Bezier, text
• Rotate, transla...
Let’s get started!
hello_world.rb
def setup
size 200, 200 # Set window size
fill 0 # Set fill (and text) color to black
text_font create_font...
Installation is easy
> # Check that Java is installed:
> jvm -version
java version "1.6.0_22”
…
> sudo gem install ruby-pr...
getting_started.rb
def setup
size 200, 200
background 0
no_stroke
smooth
@rotation = 0
end
def draw
fill 0, 20
rect 0, 0, ...
require 'ruby-processing'
class Sketch < Processing::App
def setup
# Do this once
end
def draw
# Do this over and over...
...
getting_started.rb
def setup
size 200, 200
background 0
no_stroke
smooth
@rotation = 0
end
def draw
fill 0, 20
rect 0, 0, ...
A word about coordinates *
* or, why you can’t get there from here
(width-1, 0)(0, 0)
(0, height-1) (width-1, height-1)
Lost in translation
Translated
translate x, y
(0, 0)
Rotation
rotate x_radians
You spin me right ‘round,
baby, right ‘round…
Examples
def draw
background 255
stroke 0
fill 175
translate 25,10
rotate radians(60)
image @jarjar,
10,10,50,50
end
def d...
getting_started.rb (again)
def setup
size 200, 200 # Set canvas size: width, height
background 0 # Set background black
no...
getting_started.rb
def draw
fill 0, 20 # Set fill color to black,
# 20% opaque
rect 0, 0, width, height # Draw rectangle o...
Instance variables are our friends
Class Sketch < Processing::App
def setup
# Stuff...
@rotation = 0
end
def draw
# More s...
Putting it all together
…
Gotta build!
Playing with sketches
# bounce.rb
BLUE = "#0000FF"
GREEN = "#00FF00"
RED = "#FF0000"
BALL_COLOR = BLUE
BALL_SPEED = 5
BALL...
# follow_mouse.rb
def setup
color_mode HSB, 1.0 # HSB color, values 0.0..1.0
no_stroke # No outlines
ellipse_mode CENTER #...
3D
# texture.rb
class Texture < Processing::App
def setup
size 640, 360, P3D
@img = load_image ”yoda.jpg"
no_stroke
end
de...
Image processing
data/trex.jpg
# flashlight.rb
def setup
size 267, 200
@image = load_image ’trex.jpg'
@image_pixels = @ima...
Video
# manipulate_video.rb
require 'ruby-processing’
class ManipulateVideoImageSketch < Processing::App
load_library "vid...
How
does
this
thing
work?
In the beginning…
Java
Processing
Ruby-Processing
Method translation
Ruby Java
ellipse ellipse
color_mode colorMode()
key_pressed? keyPressed()
Methods? We got methods *
Control Shapes Images Transform Math Text
screen point create_image translate lerp text
height l...
Call-backs
mouse_moved key_pressed
mouse_pressed key_released
mouse_released key_typed
mouse_clicked
mouse_dragged
Some libraries
Anar CAD, parametric modeling, … http://anar.ch
LiveConnect Interface applets to Javascript http://mzl.la/l...
Choosing
is hard
Java or Ruby?
Java Ruby
Syntax  
Types, classes Java types, POJO,
JavaBeans, etc.
Ruby classes
Metaprogramming Limited E...
Ruby-Processing: East of Java *
* aka, Why we love Ruby!
// Java
// From example 18-3 of Learning Processing by Daniel Shi...
Ruby + Processing = metaprogramming
Processing::Menu.new (:font=>font, :minimizes=>true) do |m|
m.add "Pick year", :pick_y...
Speed Benchmark 1
• Java vs. Ruby
• 0 and 100 iterations
• Average of 5 tests
1
1
33.0
5.4
Each frame
0 iterations
RubyJava
Speed Benchmark 2
• Java vs. Ruby
• 0 and 1,000 iterations
• Average of 5 tests
1
1
1.34
6.83
Each frame
0 iterations
Ruby...
Do
real
people
use this?
Yes!
• Art and interactive graphics
• Interactive data mining
• Graphing
• Mapping
• Custom graphics
Product quality graph
Product Mix Chart
County meeting map
2008 Presidential Election
election_2008.rb
Logistics map
Finishing
up
Geek alert!
• Library and gem usage is tricky
• Both Processing and Ruby-Processing are still evolving
• There are bugs. I...
Check these out, too
Processing The original Processing
framework in Java
http://processing.org/
Processing.js Javascript ...
Learn more *
• http://processing.org/
• https://github.com/jashkenas/ruby-processing/
• Getting Started with Processing, b...
Slideshare RichardLeBer1:
Getting Visual with Ruby Processing
Github (code
examples)
https://github.com/rleber/getting_vis...
Getting Visual with Ruby Processing
Getting Visual with Ruby Processing
Upcoming SlideShare
Loading in …5
×

Getting Visual with Ruby Processing

8,957 views

Published on

Tutorial on the use of Ruby Processing for developing visual graphics and interactive graphics. Includes conceptual and real-world examples, including use for business data mining.

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,957
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
45
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Getting Visual with Ruby Processing

  1. 1. Getting Visual with Ruby-Processing Richard LeBer atlrug 2010.11.10
  2. 2. aka
  3. 3. Ooh – pretty pictures!
  4. 4. Capabilities • Grayscale, RGB and HSB color with transparency • Point, line, shapes, curve, Bezier, text • Rotate, translate, scale, matrix transformations • 3D camera, viewport, lighting, texture • Choice of renderers, including OpenGL • Images, image manipulation, pixel-oriented graphics • Video: frame capture, control, creation • Audio: capture, processing, synthesis, output • Real-time interaction: mouse, keyboard, serial, network • Create .svg, .jpg, .tif, .tga, .png, .pdf, .mov, .dxf (CAD) • Cross-platform : *nix, OSX, Windows • Create standalone applications and web applets • Many extension libraries
  5. 5. Let’s get started!
  6. 6. hello_world.rb def setup size 200, 200 # Set window size fill 0 # Set fill (and text) color to black text_font create_font("SanSerif",30) # Set text font end def draw text "Hello World!", 10, 105 # Render text at (10,105) end
  7. 7. Installation is easy > # Check that Java is installed: > jvm -version java version "1.6.0_22” … > sudo gem install ruby-processing Successfully installed ruby-processing-1.0.9 … > rp5 unpack samples > cd samples > rp5 run getting_started.rb
  8. 8. getting_started.rb def setup size 200, 200 background 0 no_stroke smooth @rotation = 0 end def draw fill 0, 20 rect 0, 0, width, height translate width/2, height/2 rotate @rotation fill 255 ellipse 0, -60, 20, 20 @rotation += 0.1 end
  9. 9. require 'ruby-processing' class Sketch < Processing::App def setup # Do this once end def draw # Do this over and over... end end Sketch.new Here be magic… Ruby-Processing adds these, if they’re missing
  10. 10. getting_started.rb def setup size 200, 200 background 0 no_stroke smooth @rotation = 0 end def draw fill 0, 20 rect 0, 0, width, height translate width/2, height/2 rotate @rotation fill 255 ellipse 0, -60, 20, 20 @rotation += 0.1 end
  11. 11. A word about coordinates * * or, why you can’t get there from here (width-1, 0)(0, 0) (0, height-1) (width-1, height-1)
  12. 12. Lost in translation Translated translate x, y (0, 0)
  13. 13. Rotation rotate x_radians You spin me right ‘round, baby, right ‘round…
  14. 14. Examples def draw background 255 stroke 0 fill 175 translate 25,10 rotate radians(60) image @jarjar, 10,10,50,50 end def draw background 255 stroke 0 fill 175 translate 25,10 image @jarjar, 10,10,50,50 end def draw background 255 stroke 0 fill 175 image @jarjar, 10,10,50,50 end
  15. 15. getting_started.rb (again) def setup size 200, 200 # Set canvas size: width, height background 0 # Set background black no_stroke # Disable drawing outlines smooth # Draw smooth (anti-aliased) edges @rotation = 0 # Set initial rotation to 0 radians end
  16. 16. getting_started.rb def draw fill 0, 20 # Set fill color to black, # 20% opaque rect 0, 0, width, height # Draw rectangle over entire # window, fading it 20% translate width/2, height/2 # Move drawing origin to # center of window rotate @rotation # Rotate around new origin fill 255 # Set fill color to white ellipse 0, -60, 20, 20 # Draw circle, center at # (0,-60), size 20x20 @rotation += 0.1 # Increase angle of rotation end # and repeat …
  17. 17. Instance variables are our friends Class Sketch < Processing::App def setup # Stuff... @rotation = 0 end def draw # More stuff... @rotation += 0.1 end end Using an instance variable (@rotation) allows the angle of rotation to persist and increment across redrawings
  18. 18. Putting it all together …
  19. 19. Gotta build!
  20. 20. Playing with sketches # bounce.rb BLUE = "#0000FF" GREEN = "#00FF00" RED = "#FF0000" BALL_COLOR = BLUE BALL_SPEED = 5 BALL_SIZE = 32 attr_accessor :ball_speed, :ball_color, :ball_size def setup # … end def draw # … end > rp5 run bounce.rb … > rp5 watch bounce.rb … > rp5 live bounce.rb … > rp5 app bounce.rb … > rp5 applet bounce.rb … > rp5 help …
  21. 21. # follow_mouse.rb def setup color_mode HSB, 1.0 # HSB color, values 0.0..1.0 no_stroke # No outlines ellipse_mode CENTER # Position relative to center end def draw background 0.0, 0.0, 1.0 # White fill mouse_x.to_f / width, mouse_y.to_f / height, 1.0 ellipse mouse_x, mouse_y, 50, 50 # Draw at mouse position end Color and interaction
  22. 22. 3D # texture.rb class Texture < Processing::App def setup size 640, 360, P3D @img = load_image ”yoda.jpg" no_stroke end def draw background 0 translate width/2, height/2 rotate_y map(mouse_x, 0, width, -PI, PI) begin_shape texture @img vertex -100, -100, 0, 0, 0 vertex 100, -40, 0, @img.width, @img.height/3 vertex 0, 100, 0, @img.width/2, @img.height end_shape end end Texture.new :title => "Texture" data/yoda.jpg
  23. 23. Image processing data/trex.jpg # flashlight.rb def setup size 267, 200 @image = load_image ’trex.jpg' @image_pixels = @image.pixels. map {|p| [red(p), green(p), blue(p)]} end def draw load_pixels width.times do |x| height.times do |y| loc = x + y * width distance = dist(x, y, mouseX, mouseY) adjustment = (75 - distance) / 75 pixels[loc] = color(*@image_pixels[loc]. map {|rgb| rgb * adjustment }) end end update_pixels end
  24. 24. Video # manipulate_video.rb require 'ruby-processing’ class ManipulateVideoImageSketch < Processing::App load_library "video" import "processing.video" def setup @video = Capture.new(self, width, height, 30) end def draw @video.read if @video.available tint mouse_x, mouse_y, 255 image @video, 0, 0, mouse_x, mouse_y end end ManipulateVideoImageSketch.new :title => "Manipulate Video Image", :width => 640, :height => 480
  25. 25. How does this thing work?
  26. 26. In the beginning… Java Processing Ruby-Processing
  27. 27. Method translation Ruby Java ellipse ellipse color_mode colorMode() key_pressed? keyPressed()
  28. 28. Methods? We got methods * Control Shapes Images Transform Math Text screen point create_image translate lerp text height line load_image rotate lerp_color text_font width triangle image scale map text_size color_mode rect load_pixels shear_x norm text_align background quad pixels[ ] shear_y constrain text_width fill ellipse get apply_matrix mag text_ascent stroke arc set push_matrix degrees text_descent no_stroke curve update_pixels pop_matrix radians load_font frame_count bezier copy Mouse Keyboard create_font frame_rate begin_shape filter mouse_x key save end_shape blend mouse_y key_code save_frame box pmouse_x sphere pmouse_y * My favorites, in no particular order. See http://processing.org/reference/
  29. 29. Call-backs mouse_moved key_pressed mouse_pressed key_released mouse_released key_typed mouse_clicked mouse_dragged
  30. 30. Some libraries Anar CAD, parametric modeling, … http://anar.ch LiveConnect Interface applets to Javascript http://mzl.la/liveconn Minim Sound processing http://bit.ly/minim_ SVG Export Save drawings as .svg files * http://bit.ly/svgex Traer Physics (gravity, etc.) * http://bit.ly/traer Wiring Device control, robotics * http://wiring.org.co/ * These are Java libraries. I haven’t tested them with ruby
  31. 31. Choosing is hard
  32. 32. Java or Ruby? Java Ruby Syntax   Types, classes Java types, POJO, JavaBeans, etc. Ruby classes Metaprogramming Limited Extensive Libraries Many Some Speed Faster Slower Web applets Integrated Weak
  33. 33. Ruby-Processing: East of Java * * aka, Why we love Ruby! // Java // From example 18-3 of Learning Processing by Daniel Shiffman String[] data = loadStrings("data.txt"); bubbles = new Bubble[data.length]; for (int i = 0; i < bubbles.length; i++) { float[] values = float(split(data[i], ",")); bubbles[i] = new Bubble(values[0], values[1], values[2]); } # ruby bubbles = load_strings("data.txt").map do |line| Bubble.new(*line.split(",").map{|num| num.to_f }) end
  34. 34. Ruby + Processing = metaprogramming Processing::Menu.new (:font=>font, :minimizes=>true) do |m| m.add "Pick year", :pick_year m.add "Pick item", :pick_item m.add "Quit", :quit m.text_size = 14 end Processing::Graph::DateAxis.new( :title=>"Date", :orientation=>:horizontal, :grid=>true, :interval=>:month ) ds.on_highlight do |o| highlight_data(o) end
  35. 35. Speed Benchmark 1 • Java vs. Ruby • 0 and 100 iterations • Average of 5 tests 1 1 33.0 5.4 Each frame 0 iterations RubyJava
  36. 36. Speed Benchmark 2 • Java vs. Ruby • 0 and 1,000 iterations • Average of 5 tests 1 1 1.34 6.83 Each frame 0 iterations RubyJava
  37. 37. Do real people use this?
  38. 38. Yes! • Art and interactive graphics • Interactive data mining • Graphing • Mapping • Custom graphics
  39. 39. Product quality graph
  40. 40. Product Mix Chart
  41. 41. County meeting map
  42. 42. 2008 Presidential Election election_2008.rb
  43. 43. Logistics map
  44. 44. Finishing up
  45. 45. Geek alert! • Library and gem usage is tricky • Both Processing and Ruby-Processing are still evolving • There are bugs. I had to check out the Github master branch to resolve a bug in one of these sketches • There are some compatibility issues, e.g. with Snow Leopard’s 64-bit JVM, and with $RUBYOPT • You may need to monkey with the JVM’s runtime parameters
  46. 46. Check these out, too Processing The original Processing framework in Java http://processing.org/ Processing.js Javascript port of Processing http://processingjs.org/ Field An alternative for graphics and visual art, based on Python http://openendedgroup .com/field/wiki NodeBox Free Mac application for 2D visuals, based on Python http://bit.ly/nodebox
  47. 47. Learn more * • http://processing.org/ • https://github.com/jashkenas/ruby-processing/ • Getting Started with Processing, by Casey Reas and Ben Fry • Learning Processing, by Daniel Shiffman http://www.learningprocessing.com/ https://github.com/jashkenas/learning-processing-with-ruby • Processing: A Programming Handbook for Visual Artists and Designers, by Casey Reas and Ben Fry • Visualizing Data, by Ben Fry * Thanks to all of the above for many of the examples
  48. 48. Slideshare RichardLeBer1: Getting Visual with Ruby Processing Github (code examples) https://github.com/rleber/getting_visual_wi th_ruby_processing Email Richard.LeBer@gmail.com Twitter @RichardLeBer Photo credits Flickr: Matias.Dutto, zen, Travelin’ Librarian, Scott Kinmartin, Kaptain Kobold, bucklava, Jon_Marshall, ChrisGoldNYC, clouserw

×