{"id":317,"date":"2007-08-27T23:54:43","date_gmt":"2007-08-28T04:54:43","guid":{"rendered":"http:\/\/www.juixe.com\/techknow\/index.php\/2007\/08\/27\/running-with-shoes-2d-graphics-and-animation\/"},"modified":"2007-08-27T23:54:43","modified_gmt":"2007-08-28T04:54:43","slug":"running-with-shoes-2d-graphics-and-animation","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2007\/08\/27\/running-with-shoes-2d-graphics-and-animation\/","title":{"rendered":"Running with Shoes – 2D Graphics and Animation"},"content":{"rendered":"

I’ve already gone over the basic UI features of the Shoes<\/a> toolkit. Shoes is a nice little domain specific language for developing GUI applications in Ruby. Here I’ll go over some of the 2D graphics and animation capabilities in Shoes.<\/p>\n

Shoes has a light weight 2D support where you can draw lines, rectangles, and circles. To create an application that draws a line we can execute the following bit of code.<\/p>\n

[source:ruby]
\nShoes.app :width => 200, :height => 200 do
\n # line x1, y1, x2, y2
\n line 20, 40, 60, 80
\nend
\n[\/source]<\/p>\n

To draw an oval insert the following code inside the shoes code block.<\/p>\n

[source:ruby]
\nShoes.app :width => 200, :height => 200 do
\n # oval center_x, center_y, width, height
\n oval 50, 100, 100, 50
\nend
\n[\/source]<\/p>\n

And to a simple rectangle, you can do so by using the rect method.<\/p>\n

[source:ruby]
\nShoes.app :width => 200, :height => 200 do
\n # rect top_x, top_y, with, height
\n rect 100, 100, 30, 10
\nend
\n[\/source]<\/p>\n

Shoes also supports the animate method which can be used, as it’s name applies, to repeatably call a block of code that animates some graphics. The animate method takes a parameter, the number of frames per second. For example, to draw a new image once a second we can call animate(1). To draw an image twice a second call animate(2). Here is a simple example of the animate method in action.<\/p>\n

[source:ruby]
\ntext_field = nil
\nShoes.app :width => 200, :height => 200 do
\n text_field = text Time.new.to_s
\n animate(1) do
\n text_field.replace Time.new.to_s
\n end
\nend
\n[\/source]<\/p>\n

The above piece of code creates a text field and updates the value of the text field with the current time once a second. This way you can animate a simple text-based clock.<\/p>\n

Here is another animation example. The following code draws a rectangle. The rectangle is moved twice a second to a random location within the application window. This code uses the fill and stroke methods, which accept arguments to define the fill and stroke color respectively. You can also use the strokewith method to set the width of the pen stroke. Also notice that the following example invokes the width and height methods which return the current width and height of the application window.<\/p>\n

[source:ruby]
\nmoving_box = nil
\nShoes.app :width => 200, :height => 200 do
\n # fill red, green, blue, alpha
\n fill 1.0, 0.5, 1.0, 1.0
\n stroke 0.5, 0.5, 1.0, 1.0
\n strokewidth 5
\n moving_box = rect 10, 10, 20, 20<\/p>\n

animate(2) do
\n x = (0..width-20).rand
\n y = (0..height-20).rand
\n moving_box.move x, y
\n end
\nend
\n[\/source]<\/p>\n

As you can see, it is easy to draw 2D graphics using Shoes.<\/p>\n

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

I’ve already gone over the basic UI features of the Shoes toolkit. Shoes is a nice little domain specific language for developing GUI applications in Ruby. Here I’ll go over some of the 2D graphics and animation capabilities in Shoes. Shoes has a light weight 2D support where you can draw lines, rectangles, and circles. […]<\/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-57","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/317"}],"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=317"}],"version-history":[{"count":0,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/317\/revisions"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}