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…

[source:ruby]
# 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
[/source]

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…

[source:ruby]
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
[/source]

Technorati Tags: , , , , ,