The Shoes Manual

Art for Slots

Each slot is like a canvas, a blank surface which can be covered with an assortment of colored shapes or gradients.

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 Color objects. 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!

Shoes does a few things differently from NodeBox and Processing. For example, Shoes has different color methods, including having its own Color objects, though these are very similar to Processing's color methods. And 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.

arc(left, top, width, height, angle1, angle2) » Shoes::Shape

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 Shoes::TWO_PI.)

arrow(left, top, width) » Shoes::Shape

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

cap(:curve or :rect or :project) » self

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.

fill(pattern) » pattern

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 "static/avatar.png"
   star 200, 200, 5
 end

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

nofill() » self

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.

nostroke() » self

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

line(left, top, x2, y2) » Shoes::Shape

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

oval(left, top, radius) » Shoes::Shape

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).

oval(styles) » Shoes::Shape

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.

rect(top, left, width, height, corners = 0) » Shoes::Shape

Draws a rectangle starting from coordinates (top, left) with dimensions of width x height. Optionally, you may give the rectangle rounded corners with a fifth argument: the radius of the corners in pixels.

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.

rect(styles) » Shoes::Shape

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.

rotate(degrees: a number) » self

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

shape(left, top) { ... } » Shoes::Shape

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 red(0.2)
   shape do
     move_to(90, 55)
     arc_to(50, 55, 50, 50, 0, PI/2)
     arc_to(50, 55, 60, 60, PI/2, PI)
     arc_to(50, 55, 70, 70, PI, TWO_PI-PI/2)
     arc_to(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI)
   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.

star(left, top, points = 10, outer = 100.0, inner = 50.0) » Shoes::Shape

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.

stroke(pattern) » pattern

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 an arrow with a red line around it:

 Shoes.app do
   stroke red
   arrow 0, 100, 10
 end

To clear the line color, use the nostroke method.

strokewidth(a number) » self

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.

transform(:center or :corner) » self

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.

translate(left, top) » self

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.

Next: Element Creation