{"id":347,"date":"2007-10-19T02:00:53","date_gmt":"2007-10-19T07:00:53","guid":{"rendered":"http:\/\/www.juixe.com\/techknow\/index.php\/2007\/10\/19\/running-with-shoes-2d-examples\/"},"modified":"2007-10-19T02:00:53","modified_gmt":"2007-10-19T07:00:53","slug":"running-with-shoes-2d-examples","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2007\/10\/19\/running-with-shoes-2d-examples\/","title":{"rendered":"Running with Shoes – 2D Examples"},"content":{"rendered":"

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

Shoes Bubbles<\/b>
\nThis 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.<\/p>\n

Shoes Bubble<\/span><\/span><\/span><\/span><\/span><\/p>\n

Here is the source…<\/p>\n

[source:ruby]
\n# Array of x,y coordinates for bubbles
\nbubbles = [[0, 0]] * 30<\/p>\n

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

Shoes Flower<\/b>
\nThis is an animation of two concentric sets of circles moving in different directions. As the circles move they change size and color.<\/p>\n

Shoes Flower<\/span><\/span><\/span><\/span><\/span><\/p>\n

Here is the code…<\/p>\n

[source:ruby]
\ndegree = 0
\ncolor = 0
\nsize = 0<\/p>\n

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

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

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

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

# Convert degrees to radians
\ndef to_radians(deg)
\n deg * Math::PI \/ 180
\nend
\n[\/source]<\/p>\n

Technorati Tags: ruby<\/a>, shoes<\/a>, gui<\/a>, toolkit<\/a>, 2d<\/a>, graphics<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[19,22,3],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-5B","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/347"}],"collection":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=347"}],"version-history":[{"count":0,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/347\/revisions"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=347"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}