currentShape = 0;

let radiusSlider,

  button,

  backgroundSlider,

  strokeSlider,

  strokeWeightSlider,

  speedSlider;

​

function triangleByRadius(x, y, r) {

  // Calculate vertices using trigonometry

  // For an equilateral triangle, angles are 120° (2π/3 radians) apart

  // First vertex at top (270° or -π/2)

  const x1 = x + r * Math.cos(-Math.PI / 2);

  const y1 = y + r * Math.sin(-Math.PI / 2);

​

  // Second vertex at bottom right (30° or -π/2 + 2π/3)

  const x2 = x + r * Math.cos(-Math.PI / 2 + (2 * Math.PI) / 3);

  const y2 = y + r * Math.sin(-Math.PI / 2 + (2 * Math.PI) / 3);

​

  // Third vertex at bottom left (150° or -π/2 + 4π/3)

  const x3 = x + r * Math.cos(-Math.PI / 2 + (4 * Math.PI) / 3);

  const y3 = y + r * Math.sin(-Math.PI / 2 + (4 * Math.PI) / 3);

​

  triangle(x1, y1, x2, y2, x3, y3);

}

​

function setup() {

  createCanvas(400, 400);

​

  // Create a slider and place it at the top of the canvas.

  radiusSlider = createSlider(0, 100);

  radiusSlider.position(10, 10);

  radiusSlider.size(80);

​

  backgroundSlider = createSlider(0, 255);

  backgroundSlider.position(10, 50);

  backgroundSlider.size(80);

  backgroundSlider.value(0);

​

  strokeSlider = createSlider(0, 255);

  strokeSlider.position(10, 90);

  strokeSlider.size(80);

  strokeSlider.value(255);

​

  strokeWeightSlider = createSlider(0, 10);

  strokeWeightSlider.position(10, 130);

  strokeWeightSlider.size(80);

  strokeWeightSlider.value(1);

​

  speedSlider = createSlider(1, 5000);

  speedSlider.position(10, 170);

  speedSlider.size(80);

  speedSlider.value(500);

​

  button = createButton('Toggle Shape');

  button.position(10, 210);

​

  shapes = [circle, square, triangleByRadius];

}

​

function draw() {

  // Use the slider as a grayscale value.

  let g = radiusSlider.value();

  background(backgroundSlider.value());

​

  button.mousePressed(toggleSend);

​

  noFill();

  strokeWeight(strokeWeightSlider.value());

  stroke(strokeSlider.value());

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

    shapes[currentShape](

      200,

      200,

      200 + 2 * i * sin(frameCount / speedSlider.value() + i),

    );

  }

}

​

function toggleSend() {

  currentShape = currentShape + 1;

  if (currentShape == shapes.length) {

    currentShape = 0;

  }

}

​