Hex Crossed

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 crossingLines = intVariable('crossingLines', 0, 25);
var backgroundColor = '#333';
var strokeAttrs = {fill: 'none', stroke: 'white', strokeWidth: 4};

s.rect(0, 0, width, height).attr({fill: backgroundColor});

// draw a hexagon in the center of the canvas
var points = [];
var rotation = 90;
var radius = 125;

for (var _i = 0; _i <= 6; _i = ++_i) {
  var angle = _i * 2 * -Math.PI / 6 + (rotation * Math.PI / 180);
              
  points.push(radius * Math.cos(angle) + (width/2));
  points.push(radius * Math.sin(angle) + (height/2));
}

s.polygon({points: points}).attr(strokeAttrs);

    
for (var i = 0; i < crossingLines; i++){
  // connect two random points with a line
  var point1 = getRandomInt(0, 5);
  var point2 = getRandomInt(0, 5);              
  
  s.line(points[point1 * 2], points[point1 * 2 + 1], points[point2 * 2], points[point2 * 2 + 1]).attr(strokeAttrs);            
}