How to map a rectangle?

Patterns and Code
1

I have a rectangular sign that im surrounding with a strip of about 380 pixels as a marquis effect. The proportions of the sign are 4 to 1, which means that short sides are 38 pixels ‘tall’ and 152 pixels ‘wide’. What is the best way to set up a map for this?

2

Hi,
Sounds like a fun project! Try using something like this line example with 4 sides.

Start with where the strip signal starts, and draw a line. So for example, if it starts in the top left, and proceeds clockwise:

function (pixelCount) {

  function line(x, y, dx, dy, count) {
    var line = [];
    for (var i = 0; i < count; i++) {
      line.push([x + dx * i, y + dy * i]);
    }
    return line;
  }
  
  var map = [];
  // start at 0,0, move 1,0 for each pixel, 152 pixels
  map = map.concat(line(0,0, 1, 0, 152)) 
  //then moving down, assuming 1 pixel from above counts toward the 38 tall
  // start at 152,1, move 0,1 for each pixel, 36 pixels
  map = map.concat(line(152,1, 0, 1, 36)) 
  //then from the bottom right to bottom left
  map = map.concat(line(152, 37, -1, 0, 152))
  //and back up
  map = map.concat(line(0, 36, 0, -1, 36))
    
  return map;
}
2 Likes