Running with Shoes – 2D Examples

I’ve already mentioned the Shoes, the mini Ruby-based GUI Toolkit, and gone into detail about its 2D graphics capabilities. In this post I will just provide some additional example of animated graphics developed with Shoes.

Shoes Bubbles
This sample application follows the mouse when it hovers around the application window and draws growing bubbles. The bubbles have scan lines thanks to the mask method.

Shoes Bubble

Here is the source…

# Array of x,y coordinates for bubbles
bubbles = [[0, 0]] * 30

# Bubbles Shoes application
Shoes.app :width => 537, :height => 500 do
# 24 frames/second
animate(24) do
bubbles.shift
bubbles << self.mouse[1, 2]
clear do
# Create pinkish linescan
(500/5).times do |i|
strokewidth 2
stroke rgb(1.0, 0.5, 1.0, 1.0)
line 0, i * 5, 537, i * 5
end
# Mask is expensive
mask do
# Create an oval bubble
bubbles.each_with_index do |(x, y), i|
oval x, y, 120 – (i * 5), 120 – (i * 5)
end
end
end
end
end

Shoes Flower
This is an animation of two concentric sets of circles moving in different directions. As the circles move they change size and color.

Shoes Flower

Here is the code…

degree = 0
color = 0
size = 0

Shoes.app :width => 537, :height => 500 do
mx, my = (500/2).to_i, (537/2).to_i
animate(24) do
clear do
# Manage color
nostroke
background rgb(1.0, 0.5, 1.0, 1.0)

# Update some variables
degree += 1
size += 1
degree = 0 if(degree >= 360)
size = 0 if(size >= 100)
color = 0.0 if(color >= 1.0)
color += 0.05 if(degree % 10 == 0)

# Draw inner circle
fill red(color)
10.times do |i|
current_size = 100 + size
d = to_radians(i * 60 + degree)
rx = Math::cos(d) * 100
ry = Math::sin(d) * 100
center_x = -current_size/2 + rx + mx
center_y = -current_size/2 + ry + my
oval center_x, center_y, current_size, current_size
end

# Draw outer circle
fill blue(color)
20.times do |i|
current_size = 50 + size
d = to_radians(i * 30 – degree)
rx = Math::cos(d) * 150
ry = Math::sin(d) * 150
center_x = -current_size/2 + rx + mx
center_y = -current_size/2 + ry + my
oval center_x, center_y, current_size, current_size
end
end
end
end

# Convert degrees to radians
def to_radians(deg)
deg * Math::PI / 180
end

Technorati Tags: , , , , ,

Related posts:

  1. Running with Shoes – 2D Graphics and Animation
  2. Running with Shoes – Show Me More
  3. Running with Shoes – Shapely
  4. Running with Shoes – Colorfy
  5. Running with Shoes – Transform
  6. Running with Shoes – Tasty Text


One Response to “Running with Shoes – 2D Examples”

  • Scott Hanselman's Computer Zen - The Weekly Source Code 12 - Back in Black Edition Says:

    [...] If you’re looking to do small GUI applications, you might take a moment to look at "Shoes" the tiny Ruby UI Tookit. Why? Well, if you’re an old WinForms or new WPF guy like myself, (or an old Java guy, also like myself) it’s helpful to other perspectives on what a Domain Specific Language for UI might look like. The sample source is here. Here are four different snippets in four different language that show a single button with a click event handler that shows a message. Here’s the same thing in Shoes. Note that the documentation for Shoes is available as a Ransom Note. The creator never uses the acronym "GUI" in the docs or materials, but prefers to think of Shoes as a "toy." It’s a pretty near toy, take a look at the 2D animation examples. [...]

Leave a Reply