5

As a learning project I'm attempting to re-create the procedurally generated hills from Tiny Wings using the HTML5 canvas. My goal is to generate textures like the hill in this picture:

Tiny Wings Screenshot

Thus far, I have a seamless repeating texture that I've generated. It looks a little like this:

Procedural Image 1

As you can see, this is part way there, however in Tiny Wings, the sinusoid patterns are often rotated on an angle. My question is this: Is it possible to take a seamlessly repeating pattern, rotate it, then clip it to a rectangle and still have a seamlessly repeating pattern?

I originally thought this was trivial, that any rotated repeating pattern clipped to it's original dimensions would still repeat. However my investigations lead me to believe this is not the case.

If what I'm describing isn't possible, how would I use a rotated version of the image I have generated as the pattern / fill for a shape? So far the only solution I can think of is to use a canvas clip region. Are there any other ways to accomplish this?

Related Questions:

Community
  • 1
  • 1
aaronsnoswell
  • 6,051
  • 5
  • 47
  • 69
  • What do you mean a scrolling pattern? It repeats in the x and y directions, if that's what you mean... – aaronsnoswell Feb 06 '12 at 11:59
  • I was trying to come up with a method. initially I thought you can generate the texture as it moves into the frame, but my answer below is a better solution. – tnt-rox Feb 06 '12 at 12:22

1 Answers1

1

To achieve what is in the image from tiny wings using the shape(texture) you supplied.

  1. draw your texture-shape vertically to screen (it looks like it has been skew'ed not rotated)
  2. apply a few semi-transparent hill shaped lines with a wide stroke width to create the phong shading effect.
  3. clip the texture-shape with the shape of the hill.
  4. apply a semi-transparent grunge texture to the whole canvas.
tnt-rox
  • 5,400
  • 2
  • 38
  • 52