From 2e102a883c7118bb415957306bc0252c44938ca3 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:30:38 -0700 Subject: [PATCH 01/10] trying to fix an image, it vanished! --- imgs/001.jpg | Bin 0 -> 6227 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 imgs/001.jpg diff --git a/imgs/001.jpg b/imgs/001.jpg new file mode 100644 index 0000000000000000000000000000000000000000..084c6ba6002976b06855839f1235ac01c50d23f1 GIT binary patch literal 6227 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 Date: Mon, 29 Aug 2011 08:31:06 -0700 Subject: [PATCH 02/10] Now will the image appear? --- imgs/{001.jpg => 001.png} | Bin 1 file changed, 0 insertions(+), 0 deletions(-) rename imgs/{001.jpg => 001.png} (100%) diff --git a/imgs/001.jpg b/imgs/001.png similarity index 100% rename from imgs/001.jpg rename to imgs/001.png From f53619af5782667e9042d928b27d8572b4e56415 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:35:13 -0700 Subject: [PATCH 03/10] thoughts on users referencing the examples --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 16049ac..7df70b5 100644 --- a/README.md +++ b/README.md @@ -344,4 +344,6 @@ The pdf should be hosted under direct control, probably shoesrb.com From 7ce4953201003d85b3ce511a787cf5bbb64d86e8 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:37:57 -0700 Subject: [PATCH 04/10] testing a relative image url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7df70b5..660d3c7 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This is a copy of the original web site written by [_why](http://en.wikipedia.or It's now gone. :( -![000.jpg](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/000.jpg) +![000.jpg](imgs/000.jpg) In case you've just arrived: Shoes is a graphics toolkit for writing colorful apps using [the Ruby programming language](http://www.ruby-lang.org/en/). Ruby is built into Shoes. From 5a49fd7cd98a024f00f808397c47ea33754ffc97 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:39:21 -0700 Subject: [PATCH 05/10] another test --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 660d3c7..d9ba800 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This is a copy of the original web site written by [_why](http://en.wikipedia.or It's now gone. :( -![000.jpg](imgs/000.jpg) +![000.jpg](/imgs/000.jpg) In case you've just arrived: Shoes is a graphics toolkit for writing colorful apps using [the Ruby programming language](http://www.ruby-lang.org/en/). Ruby is built into Shoes. From 06b6d941c8968b295797192f68b8fd40911a2093 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:40:23 -0700 Subject: [PATCH 06/10] test using HTML --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d9ba800..c552fc7 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This is a copy of the original web site written by [_why](http://en.wikipedia.or It's now gone. :( -![000.jpg](/imgs/000.jpg) + In case you've just arrived: Shoes is a graphics toolkit for writing colorful apps using [the Ruby programming language](http://www.ruby-lang.org/en/). Ruby is built into Shoes. From 6918100e579c50a2d5f23200298a6b25efc305b7 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:40:45 -0700 Subject: [PATCH 07/10] Relative image URLs are not possible. Fail. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c552fc7..7df70b5 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This is a copy of the original web site written by [_why](http://en.wikipedia.or It's now gone. :( - +![000.jpg](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/000.jpg) In case you've just arrived: Shoes is a graphics toolkit for writing colorful apps using [the Ruby programming language](http://www.ruby-lang.org/en/). Ruby is built into Shoes. From 465522bacab70cd9f85b50fbabc9266dd51b08e0 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:45:17 -0700 Subject: [PATCH 08/10] fixing another image url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7df70b5..20b3cca 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ Notice that while buttons just dropped into the window, we drew the circle at a ---------------------- -![005.jpg](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/005.jpg) +![005.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/005.png) Now, a rectangle and an arrow. From 17e6f9e839e11d195a1d719010bbfa9427645cf4 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:50:47 -0700 Subject: [PATCH 09/10] Moved images above text, for consistent style. Added HTML comments to prevent the triple-backtick syntax from pissing off Geany's syntax highlighting for markdown. --- README.md | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 20b3cca..65884de 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ Shoes.app { } } ``` + Stacks are essential! The most important two elements in Shoes are *stacks* and *flows*. @@ -63,6 +64,7 @@ Shoes.app { } } ``` + We also painted the *background* white. Did you see that? @@ -86,6 +88,7 @@ Shoes.app { ) } ``` + The Shoes brush always starts out black. @@ -112,6 +115,7 @@ Shoes.app { ) } ``` + The *fill* is red on these shapes. And the *stroke* is black. (Because we didn't change it.) These two pens - stroke and fill - draw every shape. @@ -123,6 +127,8 @@ TODO: Change the colour of the two shapes. Then update the screenshot. ---------------------- +![Aaaa. My sweet children, I have kidnapped you! And brought you to my secret Shoes study class!!](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/nks-kidnap.png) + Of course, you can always design your app with an *image*. Even images from the web! ```ruby @@ -130,18 +136,19 @@ Shoes.app { image "http://spiralofhope.com/i/ruby-shoes--nks-kidnap.png" } ``` + -![Aaaa. My sweet children, I have kidnapped you! And brought you to my secret Shoes study class!!](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/nks-kidnap.png) - Shoes even caches images in memory and on disk, like browsers do. Images are loaded in background threads as well, to prevent apps from slowing down. ---------------------- +![007.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/007.png) + Now, a very important element: the *para*. As in: paragraph. Probably the third most important element (after stacks and flows.) ```ruby @@ -149,11 +156,12 @@ Shoes.app { para strong("Q."), " Are you beginning to grasp hold of Shoes?" } ``` - -![007.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/007.png) + ---------------------- +![008.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/008.png) + Beyond para, you've got *title* and *subtitle*, which are bigger fonts. You can add a bunch of font styles as well. Look for *strong* and *em* in this bit. ```ruby @@ -165,8 +173,7 @@ Shoes.app { } } ``` - -![008.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/008.png) + ---------------------- @@ -180,6 +187,7 @@ Shoes.app { @note = para "Nothing pushed so far" } ``` + ---------------------- @@ -196,6 +204,7 @@ Shoes.app { } } ``` + ---------------------- @@ -215,6 +224,7 @@ Shoes.app do ) end ``` + In this example, I used *do* and end *rather* than the braces `{` and `}`. They have the same meaning. @@ -240,6 +250,7 @@ Shoes.app do end end ``` + ---------------------- @@ -255,9 +266,13 @@ Shoes.app do end end ``` + ---------------------- +![014.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/014.png) + + On to a taste of animation. The Shoes icon moves randomly a bunch of times each second. ```ruby @@ -273,8 +288,7 @@ Shoes.app do end end ``` - -![014.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/014.png) + ---------------------- @@ -305,6 +319,7 @@ The scenery." ) end ``` + So, when the link gets clicked, the stack gets cleared. The poem will disappear. @@ -328,6 +343,7 @@ Shoes.app(:width => 300, :height => 400) do end end ``` + Don't worry if you haven't picked up a whole lot reading through these. To get the hang of it, you'll need to alter these yourself. Try fiddling with the numbers and colors. Experiment, you know? From 0f4985bbcb2b6848a2ba193b8c7197433466f805 Mon Sep 17 00:00:00 2001 From: spiralofhope Date: Mon, 29 Aug 2011 08:53:05 -0700 Subject: [PATCH 10/10] More TODOs for animation. --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 65884de..bdccaa3 100644 --- a/README.md +++ b/README.md @@ -255,6 +255,9 @@ end ---------------------- ![013.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/013.png) + In this one, we make a five-point star. And it follows the mouse around as you move. @@ -271,7 +274,9 @@ end ---------------------- ![014.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/014.png) - + On to a taste of animation. The Shoes icon moves randomly a bunch of times each second. @@ -295,6 +300,7 @@ end ![015.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/015.png) Remember a few examples ago when we handled a button click? How about doing the same with a link? @@ -326,6 +332,9 @@ So, when the link gets clicked, the stack gets cleared. The poem will disappear. ---------------------- ![016.png](https://github.com/spiralofhope/shoes_tutorial_walkthrough/raw/master/imgs/016.png) + Okay, last one for now. Let's generate a hundred random circles. This example also uses the *rgb* method to make colors from red, green and blue fractions.