let sections = 13;

let font, fontsize = 32;

let points = [];

let autoControl = false, showUItext = true, grayScale = false, fillColor = {H: 0, S: 0, B: 0, Alpha: 100}, brightness = 100, saturation = 100;

let brushTime = 10, distance = 10, brushSize = 10;

let inputBox; // Input box for user input

​

// Preload font

function preload() {

  font = loadFont("Montserrat-VariableFont_wght.otf"); // Make sure this path correctly points to your font file

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textSize(fontsize);

  textAlign(CENTER, CENTER);

​

  // Initialize input box

  inputBox = createInput(''); // Initialize with empty string

  inputBox.position(width / 2 - inputBox.width / 2, height / 2 + 50); // Position below the prompt text

  inputBox.hide(); // Hide the input box initially

}

​

function draw() {

  background(220); // Set background color

​

  switch (currentState) {

    case "start":

      text("Click anywhere to begin", width / 2, height / 2);

      break;

    case "sectioned":

      drawSections();

      break;

    case "input":

      inputBox.show();

      fill(0); // Set text color

      text("Enter what you feel:", width / 2, height / 2 - 50); // Prompt for user input

      break;

    case "drawing":

      inputBox.hide(); // Hide the input box when drawing

      displayTextEffect(); // Display the effect with user input

      break;

  }

  if (currentState === "drawing") {

    background(220);

​

    // Update points with a slight random offset to create a shaking effect

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

      let angle = random(TWO_PI);

      let radius = randomGaussian() * 0.5; // Adjust for desired effect intensity

      points[i].x += cos(angle) * radius;

      points[i].y += sin(angle) * radius;

    }

​

    // Draw the points

    drawPoint(points);

  }

}

​

function mouseClicked() {

  if (currentState === "start") {

    currentState = "sectioned";

  } else if (currentState === "sectioned") {

    currentState = "input";

    // Reposition input box in case window was resized

    inputBox.position(width / 2 - inputBox.width / 2, height / 2 + 50);

  }

  // Clicking does not advance state from "input"; handled by keyPressed

}

​

function keyPressed() {

  if (keyCode === ENTER && currentState === "input" && inputBox.value() !== '') {

    currentState = "drawing";

  }

}

​

function drawSections() {

  // Example logic for drawing sections, adjust as necessary

  let numRows = 4;

  let numCols = Math.ceil(sections / numRows);

  let sectionWidth = width / numCols;

  let sectionHeight = height / numRows;

​

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

    let col = i % numCols;

    let row = Math.floor(i / numCols);

    let x = col * sectionWidth;

    let y = row * sectionHeight;

​

    stroke(0); // Section border color

    noFill();

    rect(x, y, sectionWidth, sectionHeight);

  }

}

​

function displayTextEffect() {

  let userInput = inputBox.value(); // Get user input

  background(220); // Clear background

  fill(0); // Set text color

  text('Okay, so you feel ${userInput}', width / 2, height / 2); // Display the message with user input

}

​