regular polygon

In this example below you will see how to do a regular polygon with some HTML / CSS and Javascript

This code will generate a regular polygon with any number of sides with canvas

Thumbnail
This awesome code was written by microcipcip, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright microcipcip ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>regular polygon</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/microcipcip/regular-polygon-dzQwMV */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

canvas {
  background: #f9f9f9;
  border: 4px solid #DDDDDD;
}


/*Downloaded from https://www.codeseek.co/microcipcip/regular-polygon-dzQwMV */
var regularPolygon = function regularPolygon() {
  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  // exit if not all values are defined
  if (!opts && !opts.canvas) return;

  // set private variables
  var canvas = void 0,
      ctx = void 0,
      originX = void 0,
      originY = void 0,
      radius = void 0,
      sides = void 0,
      borderColor = void 0,
      bgColor = void 0;

  // utility methods
  this.random = function (min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  };

  // methods
  this.setCanvas = function () {
    canvas = opts.canvas.$el;
    canvas.width = opts.canvas.w;
    canvas.height = opts.canvas.h;
    ctx = canvas.getContext('2d');
  };

  this.setOrigin = function () {
    originX = canvas.width / 2;
    originY = canvas.height / 2;
  };

  this.setRadius = function () {
    var radiusVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

    radius = radiusVal || opts.radius || 100;
  };

  this.setSides = function () {
    var sidesVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

    sides = sidesVal || opts.sides || 3;
  };

  this.setBorderColor = function () {
    var borderColorVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

    borderColor = borderColorVal || opts.borderColor || '#13435b';
  };

  this.setBgColor = function () {
    var bgColorVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

    bgColor = bgColorVal || opts.bgColor || '#3d9bca';
  };

  this.drawPolygon = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();

    for (var i = 0; i < sides; i++) {
      var angle = 2 * Math.PI / sides * -i; // note: drawing CCW
      var x = originX + Math.cos(angle) * radius;
      var y = originY + Math.sin(angle) * radius;
      ctx.lineTo(x, y);
    }

    ctx.closePath();

    ctx.globalAlpha = 0.8;
    ctx.fillStyle = bgColor;
    ctx.fill();

    ctx.globalAlpha = 1;
    ctx.lineWidth = '4';
    ctx.strokeStyle = borderColor;
    ctx.stroke();
  };

  // init
  this.setCanvas();
  this.setOrigin();
  this.setRadius();
  this.setSides();
  this.setBorderColor();
  this.setBgColor();
  this.drawPolygon();
};

var poly = new regularPolygon({
  canvas: {
    $el: document.querySelector('canvas'),
    w: 600,
    h: 600
  },
  radius: 100,
  sides: 8
});

var colors = ["Bisque", "Black", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat"];

setInterval(function () {
  var randomColor = poly.random(0, colors.length);
  poly.setRadius(poly.random(40, 290));
  poly.setSides(poly.random(3, 12));
  poly.setBorderColor(colors[randomColor]);
  poly.setBgColor(colors[randomColor]);
  poly.drawPolygon();
}, 500);

Comments