The Green Shoes Manual 1.1.362

Art for Slots

Many common shapes can be drawn with methods like oval and rect. You'll need to set up the paintbrush colors first, though.

The stroke command sets the line color. And the fill command sets the color used to paint inside the lines.

 Shoes.app do
   stroke red
   fill blue
   oval top: 10, left: 10, radius: 100
 end

That code gives you a blue pie with a red line around it. One-hundred pixels wide, placed just a few pixels southeast of the window's upper left corner.

The blue and red methods above are RGB array. See the section on Colors for more on how to mix colors.

Inspiration from Processing and NodeBox

The artful methods generally come verbatim from NodeBox, a drawing kit for Python. In turn, NodeBox gets much of its ideas from Processing, a Java-like language for graphics and animation. I owe a great debt to the creators of these wonderful programs!

Green Shoes does a few things differently from NodeBox and Processing. For example, Green Shoes has different color methods, including having its own RGB array, though these are very similar to Processing's color methods. And Green Shoes also allows images and gradients to be used for drawing lines and filling in shapes.

Shoes also borrows some animation ideas from Processing and will continue to closely consult Processing's methods as it expands.

Draws an arc shape (a section of an oval) at coordinates (left, top). This method just give you a bit more control than oval, by offering the :angle1 and :angle2 styles. (In fact, you can mimick the oval method by setting :angle1 to 0 and :angle2 to 2*Math::PI.)

 Shoes.app do
   fill yellow..green
   stroke red..blue
   strokewidth 10
   cap :curve
   a = animate 12 do |i|
     @e.remove if @e
     r = i * (Math::PI * 0.01)
     @e = arc 100, 50, 180, 360, 0, r
     a.stop if r >= 2*Math::PI
   end
 end

Draws an arrow at coordinates (left, top) with a pixel width.

 Shoes.app do
   para 'An arrow shape:', left: 20, top: 10
   arrow 30, 40, 70
 end

Sets the line cap, which is the shape at the end of every line you draw. If set to :curve, the end is rounded. The default is :rect, a line which ends abruptly flat. The :project cap is also fat, but sticks out a bit longer.

 Shoes.app do
   nofill
   strokewidth 20
   stroke green
   cap :curve
   line 100, 100, 300, 100
   line 100, 250, 300, 300
   cap :rect
   line 100, 150, 300, 150
   stroke blue
   cap :project
   line 100, 200, 300, 200
   line 200, 100, 200, 300
   strokewidth 1
   stroke red
   rect 100, 100, 200, 200
 end

Sets the fill bucket to a specific color (or pattern.) Patterns can be colors, gradients or images. So, once the fill bucket is set, you can draw shapes and they will be colored in with the pattern you've chosen.

To draw a star with an image pattern:

 Shoes.app do
   fill File.join(DIR, "../static/gshoes-icon.png")
   star 200, 200, 5, 100, 50
 end

To clear the fill bucket, use nofill. And to set the line color (the border of the star,) use the stroke method.

Blanks the fill color, so that any shapes drawn will not be filled in. Instead, shapes will have only a lining, leaving the middle transparent.

Empties the line color. Shapes drawn will have no outer line. If nofill is also set, shapes drawn will not be visible.

Draws a line using the current line color (aka "stroke") starting at coordinates (left, top) and ending at coordinates (x2, y2).

Draws a circular form at pixel coordinates (left, top) with a width and height of radius pixels. The line and fill colors are used to draw the shape. By default, the coordinates are for the oval's leftmost, top corner, but this can be changed by calling the transform method or by using the :center style on the next method below.

 Shoes.app do
   stroke blue
   strokewidth 4
   fill black
   oval 10, 10, 50
 end

To draw an oval of varied proportions, you may also use the syntax: oval(left, top, width, height).

Draw circular form using a style hash. The following styles are supported:

• top: the y-coordinate for the oval pen.
• left: the x-coordinate for the oval pen.
• radius: the width and height of the circle.
• width: a specific pixel width for the oval.
• height: a specific pixel height for the oval.
• center: do the coordinates specific the oval's center? (true or false)

These styles may also be altered using the style method on the Shape object.

Note: Green Shoes doesn't support center style.

Draws a rectangle starting from coordinates (top, left) with dimensions of width x height.

As with all other shapes, the rectangle is drawn using the stroke and fill colors.

 Shoes.app do
   stroke rgb(0.5, 0.5, 0.7)
   fill rgb(1.0, 1.0, 0.9)
   rect 10, 10, self.width - 20, self.height - 20
 end

The above sample draws a rectangle which fills the area of its parent box, leaving a margin of 10 pixels around the edge. Also see the background method for a rectangle which defaults to filling its parent box.

Draw a rectangle using a style hash. The following styles are supported:

• top: the y-coordinate for the rectangle.
• left: the x-coordinate for the rectangle.
• curve: the pixel radius of the rectangle's corners.
• width: a specific pixel width for the rectangle.
• height: a specific pixel height for the rectangle.
• center: do the coordinates specific the rectangle's center? (true or false)

These styles may also be altered using the style method on the Shape object.

Note: Green Shoes doesn't support center style.

Rotates the pen used for drawing by a certain number of degrees, so that any shapes will be drawn at that angle.

In this example below, the rectangle drawn at (30, 30) will be rotated 45 degrees.

 Shoes.app do
   fill "#333"
   rotate 45
   rect 30, 30, 40, 40
 end

Describes an arbitrary shape to draw, beginning at coordinates (left, top) and continued by calls to line_to, move_to, curve_to and arc_to inside the block. You can look at it as sketching a shape with a long line that curves and arcs and bends.

 Shoes.app do
   fill yellow
   shape do
     move_to 50, 30
     curve_to 100, 100, 10, 20, 100, 50
     line_to 20, 100
     line_to 30, 30
   end
 end

A shape can also contain other shapes. So, you can place an oval, a rect, a line, a star or an arrow (and all of the other methods in this Art section) inside a shape, but they will not be part of the line. They will be more like a group of shapes are all drawn as one.

Note: The above line_to, move_to and curve_to are Cairo::Context methods. Green Shoes uses them directly inside the block. So, Green Shoes doesn't support arc_to. Also Green Shoes shape can not contain other shapes.

Draws a star using the stroke and fill colors. The star is positioned with its center point at coordinates (left, top) with a certain number of points. The outer width defines the full radius of the star; the inner width specifies the radius of the star's middle, where points stem from.

Set the active line color for this slot. The pattern may be a color, a gradient or an image, all of which are categorized as "patterns." The line color is then used to draw the borders of any subsequent shape.

So, to draw a star with a red line around it:

 Shoes.app do
   stroke red
   nofill
   star 100, 100
 end

To clear the line color, use the nostroke method.

Sets the line size for all drawing within this slot. Whereas the stroke method alters the line color, the strokewidth method alters the line size in pixels. Calling strokewidth(4) will cause lines to be drawn 4 pixels wide.

Should transformations (such as skew and rotate) be performed around the center of the shape? Or the corner of the shape? Shoes defaults to :corner.

Note: Green Shoes doesn't support transform method.

Moves the starting point of the drawing pen for this slot. Normally, the pen starts at (0, 0) in the top-left corner, so that all shapes are drawn from that point. With translate, if the starting point is moved to (10, 20) and a shape is drawn at (50, 60), then the shape is actually drawn at (60, 80) on the slot.

Note: Green Shoes doesn't support translate method.

Next: Element Creation