let canvasWidth = 450;

let drawingHeight = 450;

let xCenter = canvasWidth / 2;

let yCenter = drawingHeight / 2;

let controlRegionHeight = 60;

let nSlider, degreeSlider;

let leftMargin = 100;

​

function setup() {

  createCanvas(canvasWidth, drawingHeight + controlRegionHeight);

  textSize(16);

  // slider to control the number of vertices on the edge of the circle

  nSlider = createSlider(4, 20, 10, 1).position(leftMargin, canvasWidth + 10);

  nSlider.size(canvasWidth-leftMargin);

  // slider to control the degree of connections

  degreeSlider = createSlider(1, 10, 4, 1).position(leftMargin, canvasWidth + 30);

  degreeSlider.size(canvasWidth-leftMargin);

}

​

function draw() {

  fill('aliceblue');

  rect(0,0,canvasWidth, drawingHeight);

  fill('white');

  rect(0,drawingHeight,canvasWidth, controlRegionHeight);

  // get the updates from any changes in the slider values

  numberNodes = nSlider.value();

  degreeValue = degreeSlider.value();

  // what we want is the degree to be less than the number of nodes

  if (degreeValue > numberNodes) {

    degreeValue = numberNodes;

    // update the degree

    degreeSlider.value(numberNodes); 

  }

  drawNodes(xCenter, yCenter, 200, numberNodes);

  drawLines(xCenter, yCenter, 200, numberNodes, degreeValue);

  // degreeSlider.attribute('max', nSlider.value()); // Ensure degreeSlider max does not exceed nSlider value

  // Draw labels and values

  noStroke();

  text('Nodes: ' + numberNodes, 10, drawingHeight + 20);

  text('Degree: ' + (degreeValue*2), 10, drawingHeight + 40);

​

}

​

function drawNodes(x, y, largeCircleRadius, n) {

  let angle = TWO_PI / n;

  stroke(0);

  fill(255);

  // ellipse(x, y, largeCircleRadius * 2, largeCircleRadius * 2); // Draw large circle

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

    let xOff = cos(angle * i) * largeCircleRadius;

    let yOff = sin(angle * i) * largeCircleRadius;

    fill(100);

    circle(x + xOff, y + yOff, 20); // Draw small circles

  }

}

​

// note that degree is half what we see on the canvas

function drawLines(x, y, largeCircleRadius, n, degree) {

  let angle = TWO_PI / n;

  // for each node on the circle

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

    // draw degree lines to adjacent nodes

    for (let j = 1; j <= degree; j++) {

      let iAngle = angle * i;

      let jAngle = angle * ((i + j) % n); // Wrap around the circle

      let x1 = cos(iAngle) * largeCircleRadius + x;

      let y1 = sin(iAngle) * largeCircleRadius + y;

      let x2 = cos(jAngle) * largeCircleRadius + x;

      let y2 = sin(jAngle) * largeCircleRadius + y;

      stroke(0, 102, 153);

      line(x1, y1, x2, y2); // Draw line between vertices

    }

  }

}

​