var numShapes = 20;

var strokeWidth = 4;

var strokeColor = '#00ddff';

var fillColor = [180, 255, 255];

var drawStroke = true;

var drawFill = true;

var radius = 20;

var shape = ['circle', 'triangle', 'square', 'pentagon', 'star'];

var label = 'label';

​

// gui

var visible = true;

var gui, gui2;

​

// dynamic parameters

var bigRadius;

​

const sketchForm = (p) => {

​

  p.setup = function() {

​

    p.createCanvas(p.windowWidth, p.windowHeight);

​

    // Calculate big radius

    bigRadius = p.height / 3.0;

​

    // Create Layout GUI

    gui = p.createGui(this);

    gui.addGlobals('numShapes', 'bigRadius', 'shape', 'label', 'radius',

      'drawFill', 'fillColor', 'drawStroke', 'strokeColor', 'strokeWidth');

    // Don't loop automatically

    p.noLoop();

​

  }

​

​

  p.draw = function() {

​

    // clear all

    p.clear();

    p.background(255);

​

    // set fill style

    if (drawFill) {

      p.fill(fillColor);

    } else {

      p.noFill();

    }

​

    // set stroke style

    if (drawStroke) {

      p.stroke(strokeColor);

      p.strokeWeight(strokeWidth);

    } else {

      p.noStroke();

    }

​

    // draw circles arranged in a circle

    for (var i = 0; i < numShapes; i++) {

​

      var angle = p.TWO_PI / numShapes * i;

      var x = p.width / 2 + p.cos(angle) * bigRadius;

      var y = p.height / 2 + p.sin(angle) * bigRadius;

      var d = 2 * radius;

​

      // pick a shape

      switch (shape) {

​

        case 'circle':

          p.ellipse(x, y, d, d);

          break;

​

        case 'square':

          p.rectMode(p.CENTER);

          p.rect(x, y, d, d);

          break;

​

        case 'triangle':

          ngon(3, x, y, d);

          break;

​

        case 'pentagon':

          ngon(5, x, y, d);

          break;

​

        case 'star':

          star(6, x, y, d / sqrt(3), d);

          break;

​

      }

​

      // draw a label below the shape

      p.push();

      p.noStroke();

      p.fill(0);

      p.textAlign(p.CENTER);

      p.text(label, x, y + radius + 15);

      p.pop();

​

    }

​

  }

​

​

  // check for keyboard events

  function keyPressed() {

    switch (p.key) {

      // type [F1] to hide / show the GUI

      case 'p':

        visible = !visible;

        if (visible) gui.show();

        else gui.hide();

        break;

    }

  }

​

​

  // draw a regular n-gon with n sides

  function ngon(n, x, y, d) {

    p.beginShape();

    for (var i = 0; i < n; i++) {

      var angle = p.TWO_PI / n * i;

      var px = x + p.sin(angle) * d / 2;

      var py = y - p.cos(angle) * d / 2;

      p.vertex(px, py);

    }

    p.endShape(p.CLOSE);

  }

​

​

  // draw a regular n-pointed star

  function star(n, x, y, d1, d2) {

    p.beginShape();

    for (var i = 0; i < 2 * n; i++) {

      var d = (i % 2 === 1) ? d1 : d2;

      var angle = p.PI / n * i;

      var px = x + p.sin(angle) * d / 2;

      var py = y - p.cos(angle) * d / 2;

      p.vertex(px, py);

    }

    p.endShape(p.CLOSE);

  }

};

​

​

let myp5 = new p5(sketchForm, 'formContainer');