let size = 50;

let strokeWeightValue = 2;

let strokeColor = "#000000";

let fillColor = "#ff0000";

​

function setup() {

  const canvas = createCanvas(windowWidth * 0.8, windowHeight * 0.6);

  canvas.parent("canvas-container");

  updateCodeDisplay();

}

​

function draw() {

  renderShape();

  noLoop(); // Stop continuous rendering

}

​

function renderShape() {

  background(220);

  stroke(strokeColor);

  strokeWeight(strokeWeightValue);

  fill(fillColor);

​

  translate(width / 2, height / 2);

​

  if (currentShape === "circle") {

    circle(0, 0, size);

  } else if (currentShape === "square") {

    rectMode(CENTER);

    rect(0, 0, size, size);

  } else if (currentShape === "triangle") {

    triangle(-size / 2, size / 2, 0, -size / 2, size / 2, size / 2);

  } else if (currentShape === "line") {

    line(-size / 2, 0, size / 2, 0);

  } else if (currentShape === "arc") {

    arc(0, 0, size, size, 0, HALF_PI);

  } else if (currentShape === "quad") {

    quad(

      -size / 2,

      size / 2,

      size / 2,

      size / 2,

      size / 2,

      -size / 2,

      -size / 2,

      -size / 2

    );

  }

}

​

function changeShape(shape) {

  currentShape = shape;

  updateCodeDisplay();

  redraw(); // Trigger canvas update

}

​

function updateSize(newSize) {

  size = Number(newSize);

  updateCodeDisplay();

  redraw();

}

​

function updateStrokeWeight(newStrokeWeight) {

  strokeWeightValue = Number(newStrokeWeight);

  updateCodeDisplay();

  redraw();

}

​

function updateStrokeColor(newStrokeColor) {

  strokeColor = newStrokeColor;

  updateCodeDisplay();

  redraw();

}

​

function updateFillColor(newFillColor) {

  fillColor = newFillColor;

  updateCodeDisplay();

  redraw();

}

​

function updateCodeDisplay() {

  const codeDisplay = document.getElementById("codeDisplay");

  codeDisplay.value = generateShapeCode();

}

​

function generateShapeCode() {

  const fillHex = fillColor.toUpperCase();

  const strokeHex = strokeColor.toUpperCase();

  const roundedSize = size.toFixed(1);

  const roundedStrokeWeight = strokeWeightValue.toFixed(1);

​

  if (currentShape === "circle") {

    return `

fill('${fillHex}');

stroke('${strokeHex}');

strokeWeight(${roundedStrokeWeight});

circle(0, 0, ${roundedSize});

                `.trim();

  } else if (currentShape === "square") {

    return `

fill('${fillHex}');

stroke('${strokeHex}');

strokeWeight(${roundedStrokeWeight});

rectMode(CENTER);

rect(0, 0, ${roundedSize}, ${roundedSize});

                `.trim();

  } else if (currentShape === "triangle") {

    return `

fill('${fillHex}');

stroke('${strokeHex}');

strokeWeight(${roundedStrokeWeight});

triangle(${(-size / 2).toFixed(1)}, ${(size / 2).toFixed(1)}, 

         0, ${(-size / 2).toFixed(1)}, 

         ${(size / 2).toFixed(1)}, ${(size / 2).toFixed(1)});

                `.trim();

  } else if (currentShape === "line") {

    return `

stroke('${strokeHex}');

strokeWeight(${roundedStrokeWeight});

line(${(-size / 2).toFixed(1)}, 0, ${(size / 2).toFixed(1)}, 0);

                `.trim();

  } else if (currentShape === "arc") {

    return `

fill('${fillHex}');

stroke('${strokeHex}');

strokeWeight(${roundedStrokeWeight});

arc(0, 0, ${roundedSize}, ${roundedSize}, 0, HALF_PI);

                `.trim();

  } else if (currentShape === "quad") {

    return `

fill('${fillHex}');

stroke('${strokeHex}');

strokeWeight(${roundedStrokeWeight});

quad(${(-size / 2).toFixed(1)}, ${(size / 2).toFixed(1)}, 

     ${(size / 2).toFixed(1)}, ${(size / 2).toFixed(1)}, 

     ${(size / 2).toFixed(1)}, ${(-size / 2).toFixed(1)}, 

     ${(-size / 2).toFixed(1)}, ${(-size / 2).toFixed(1)});

                `.trim();

  }

}

​

function applyCode() {

  try {

    background(220); // Clear the canvas

    resetMatrix(); // Reset any transformations

    translate(width / 2, height / 2); // Center the drawing

    eval(document.getElementById("codeDisplay").value);

  } catch (e) {

    alert("Error in code: " + e.message);

  }

}

​