Triangle Pegs

to generate a new and unique variation

Source Code

Every variart piece is open source, you can see exactly how it is drawn from the code.

var colors = ['#FCC829', '#ED5286', '#1F9CB0', '#A1D043', '#65B24A']
var isoTriangleChance = 0.3;

function isoTriangle(x, y, size){
  size = typeof size !== 'undefined' ? size : 1;
  
  s.polygon(x, y, x, y + (size * 50), x + (size * 50), y + (size * 50)).attr({
    fill: colors[getRandomInt(0, colors.length - 1)],
    opacity: getRandomArbitary(0.5, 1.0)
  });
}

for (var x = 0; x <= width; x += 50){
  for (var y = 0; y <= height; y += 50){
    // no dots on the edges
    if (x != 0 && x != width && y != 0 && y != height){
      s.circle(x, y, 4).attr({fill: '#000000'});
    }

    if (getRandomArbitary(0, 1) < isoTriangleChance){
      isoTriangle(x, y, getRandomInt(1, 3));
    }
    
    //if (getRandomInt(0, 100) < 30){
    //  s.path(Snap.format("M{x1},{y1}R{x1},{y1},{x2},{y2}", {x1: x, y1: y, x2: x + 100, y2: y + 100})).attr({fill: 'black'})
    //}    

  }
}