Cut Holes In Shoes And Get A Mask

August 28th 12:39

by why

This greeny rainbow text is hand-crafted. And I’ll bet you can do this with Firefox’s canvas (or SVG,) but I can’t think of how. In Shoes, you use a masking layer.

Shoes.app do
  20.times do |i|
    strokewidth 4
    stroke rgb((0.0..0.5).rand, (0.0..1.0).rand, (0.0..0.3).rand)
    line 0, i * 4, 400, i * 4
  end

  mask do
    title "Shoes"
  end
end

The rainbow of lines is painted first. Twenty lines with a four pixel thickness.

Then, the text is laid over it in a masking layer. The masking layer is basically a box just like Shoes’ stacks and flows. Inside a masking box, colors do not matter. It’s like a stencil. Wherever you paint inside the mask is where the holes of the stencil are.

So when the mask is painted, it acts as the stencil and the box containing it is the spray paint. And, there, it says, “Shoes.” Which we all like to say so much.

Now begin the comments …

9 comments

defunkt

said on August 28th 14:34

Shoes.

Stephen Touset

said on August 28th 14:55

Doesn’t it seem like the masking layer should, well, mask? Stencils and masks are semantically opposites of one another.

Change the method name. :)

nil

said on August 28th 16:54

The SHOES!

Peter Burns

said on August 28th 17:48

I agree with Stephen here. The name and semantics could be more intuitive. One way of thinking of this would be: you cut out down a stencil, paint, then remove the stencil.

In this fashion, you could do:


Shoes.app do
  stencil do
    title "Shoes"

    paintStencil do
      20.times do |i|
        strokewidth 4
        stroke rgb((0.0..0.5).rand, (0.0..1.0).rand, (0.0..0.3).rand)
        line 0, i * 4, 400, i * 4
      end  
    end    
  end

end

I’d think of a mask as doing the opposite.  Take something that’s already drawn and cover it up with a layer on top.

ps level 1

said on August 28th 23:03

For a second it was 1984 and I was reading The Red Book again. Then I realized we used to call ’em clipping paths and it was all better.

Paragon

said on August 29th 00:04

He’s using the term “mask” just like it would be used in an imaging program: the mask of a layer determines which parts of the layer are visible.

Great work :).

Leon

said on August 29th 04:10

Peter, that’s what this does. it takes something that’s drawn, and covers it up with a layer. It all seems perfectly straightforward to me.

MenTaLguY

said on August 29th 16:33

Hm, the API doesn’t seem very flexible. How can I draw some stuff beneath the masked bits, if the mask applies to everything before it?

angel

said on August 30th 12:24

“mask” is cairo terminology and it makes sense to me to stick with the same name for the same functionality.

As an aside, I noticed in the shoes source that you are using your own C methods to access cairo directly. Other than rcairo sucking as a gem, what stopped you from using that lib directly in ruby methods?

Comments are closed for this entry.