let lineSpaces = [];

​

function setup() {

  const canvas = createCanvas(600, 600);

  canvas.parent("sketch");

  refreshRocket();

}

​

function draw() {

  background(32);

​

  if (lineSpaces.length == 0) {

    return;

  }

​

  fill(255);

  stroke(200);

​

  // Add 1 to length to add space above and below the rocket

  const rowHeight = height / (lineSpaces.length + 1);

​

  beginShape();

​

  // left edge of rocket

  for (let i = 0; i < lineSpaces.length; i++) {

    const rowWidth = (width * lineSpaces[i]) / maxSpaces;

    const rowX = width / 2 - rowWidth / 2;

    // Add 1 to i to add space above the rocket

    const rowY = rowHeight * (i + 1);

    vertex(rowX, rowY);

  }

​

  // right edge of rocket

  for (let i = lineSpaces.length - 1; i >= 0; i--) {

    const rowWidth = (width * lineSpaces[i]) / maxSpaces;

    let rowX = width / 2 + rowWidth / 2;

    // Add 1 to i to add space above the rocket

    const rowY = rowHeight * (i + 1);

    vertex(rowX, rowY);

  }

​

  endShape();

  noLoop();

}

​

function mouseClicked() {

  refreshRocket();

}

​

function refreshRocket() {

  const code = document.getElementById("code").value;

​

  const lines = code.split("\n");

​

  lineSpaces = [];

  maxSpaces = 0;

​

  for (const line of lines) {

    let spaces = 0;

​

    for (let i = 0; i < line.length; i++) {

      if (line[i] == ' ') {

        spaces++;

      } else if (lines[i] == '\t') {

        spaces += 2;

      } else {

        break;

      }

    }

​

    if (maxSpaces < spaces) {

      maxSpaces = spaces;

    }

    // Add 1 to spaces to set a min rocket width

    lineSpaces.push(spaces + 1);

  }

  // Add 2 to maxSpaces to add space to left and right of rocket

  maxSpaces+=2;

  loop();

  // Scroll back to the top after pasting

  window.scrollTo(0, 0);

}

​