• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Getting Visual with Ruby Processing

on

  • 6,574 views

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.

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.

Statistics

Views

Total Views
6,574
Views on SlideShare
6,570
Embed Views
4

Actions

Likes
5
Downloads
34
Comments
0

2 Embeds 4

https://twitter.com 3
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Getting Visual with Ruby Processing Getting Visual with Ruby Processing Presentation Transcript

    • Getting Visual with Ruby-Processing
      Richard LeBer
      atlrug2010.11.10
    • aka
    • Ooh – pretty pictures!
    • 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
    • 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("SanSerif",30) # Set text fontenddef draw text "Hello World!", 10, 105 # Render text at (10,105)end
    • 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
    • getting_started.rb
      def setup size 200, 200 background 0 no_stroke smooth @rotation = 0end
      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.1end
    • require 'ruby-processing'
      class Sketch < Processing::Appdef setup# Do this onceenddef draw# Do this over and over...endend
      Sketch.new
      Here be magic…
      Ruby-Processing adds these, if they’re missing
    • getting_started.rb
      def setup size 200, 200 background 0 no_stroke smooth @rotation = 0end
      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.1end
    • A word about coordinates *
      (width-1, 0)
      (0, 0)
      (0, height-1)
      (width-1, height-1)
      * or, why you can’t get there from here
    • Lost in translation
      translate x, y
      (0, 0)
      Translated
    • Rotation
      (0, 0)
      rotate x_radians
      Rotated
      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,50end
      def draw background 255 stroke 0 fill 175 translate 25,10
      image @jarjar,
      10,10,50,50end
      def draw background 255 stroke 0 fill 175
      image @jarjar,
      10,10,50,50end
    • 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
    • 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 …
    • Instance variables are our friends
      Class Sketch < Processing::Appdef setup# Stuff... @rotation = 0
      enddef draw# More stuff...
      @rotation += 0.1end
      end
      Using an instance variable (@rotation) allows the angle of rotation to persist and increment across redrawings
    • Putting it all together

    • Gotta build!
    • Playing with sketches
      # bounce.rb
      BLUE = "#0000FF"GREEN = "#00FF00"RED = "#FF0000"BALL_COLOR = BLUEBALL_SPEED = 5BALL_SIZE = 32attr_accessor :ball_speed,
      :ball_color, :ball_sizedef setup# …enddef draw# …end
      > rp5 run bounce.rb

      > rp5 watch bounce.rb

      > rp5 live bounce.rb

      > rp5 app bounce.rb

      > rp5 applet bounce.rb

      > rp5 help

    • # 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 enddef 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 positionend
      Color and interaction
    • 3D
      # texture.rbclass Texture < Processing::Appdef setup size 640, 360, P3D @img =load_image”yoda.jpg" no_strokeenddef 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_shapeendendTexture.new :title => "Texture"
      data/yoda.jpg
    • Image processing
      # flashlight.rb
      def setup size 267, 200 @image =load_image’trex.jpg' @image_pixels = @image.pixels.
      map {|p| [red(p), green(p), blue(p)]}enddef 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 })endend update_pixelsend
      data/trex.jpg
    • 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)enddef draw @video.read if @video.available tint mouse_x, mouse_y, 255 image @video, 0, 0, mouse_x, mouse_yendendManipulateVideoImageSketch.new
      :title => "Manipulate Video Image",
      :width => 640, :height => 480
    • How
      does
      this
      thing
      work?
    • In the beginning…
      Java
      Processing
      Ruby-Processing
    • Method translation
    • Methods? We got methods *
      * My favorites, in no particular order. See http://processing.org/reference/
    • Call-backs
    • Some libraries
      * These are Java libraries. I haven’t tested them with ruby
    • Choosing is hard
    • Java or Ruby?
    • Ruby-Processing: East of Java *
      // Java// From example 18-3 of Learning Processing by Daniel ShiffmanString[] 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
      * aka, Why we love Ruby!
    • 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 = 14end
      Processing::Graph::DateAxis.new(:title=>"Date",:orientation=>:horizontal,:grid=>true,:interval=>:month)
      ds.on_highlightdo |o|
      highlight_data(o)end
      Equivalent Java:
    • Speed Benchmark 1
      • Java vs. Ruby
      • 0 and 100 iterations
      • Average of 5 tests
    • Speed Benchmark 2
      • Java vs. Ruby
      • 0 and 1,000 iterations
      • Average of 5 tests
    • 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 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
    • Check these out, too
    • 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