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

let isBubbleMode = true; // Start with bubble mode

​

// 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") {

    // Clear the background to avoid smearing

    background(220);

​

    // Randomly offset points to create the shaky effect

    points.forEach(point => {

      point.x += random(-1, 1);

      point.y += random(-1, 1);

    });

    // Interaction logic that may affect the drawing

    if (!autoControl) {

      distance = mouseX / 50;

      brushSize = mouseY / 50;

    }

​

    // Draw the points

    drawPoint(points);

  }

}

​

function mouseMoved() {

  if (currentState === "drawing" && !autoControl) {

    distance = mouseX / 50;

    brushSize = mouseY / 50;

  }

  // Prevent default functionality for mouseMoved event

  return false;

}

​

function mousePressed() {

  loop();

}

​

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

  if (!autoControl) {

    distance = mouseX / 50;

    brushSize = mouseY / 50;

  }

}

​

function keyPressed() {

  if (currentState === "input" && keyCode === ENTER) {

    // Confirm input and switch to drawing state

    currentState = "drawing";

    // Call to generate the points for the inputted text

    createStringBody(inputBox.value());

    loop(); // Ensure the draw loop is running

  } else if (keyCode === 32) { // Spacebar

    // Toggle between bubble and line mode

    isBubbleMode = !isBubbleMode;

  }

  switch (keyCode) {

    case 32: // Space

      grayScale = !grayScale; // Existing functionality

      isBubbleMode = !isBubbleMode; // Toggle between bubble and line modes

      break;

    case 72: // 'H'

      showUItext = !showUItext;

      // Previously slider visibility was toggled here. Consider alternative UI feedback.

      break;

    case 13: // Enter

      autoControl = !autoControl;

      break;

    // Add other cases as necessary

  }

}

​

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

  textSize(32); // Set text size if needed

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

  createStringBody(userInput); // Generate points for the inputted text

  drawPoint(points); // Draw the points with the shaky effect

}

​

​

function createStringBody(input) {

  points = font.textToPoints(input, 0, 0, fontsize, {

    sampleFactor: 0.25,

    simplifyThreshold: 0

  });

​

  bounds = font.textBounds(input, 0, 0, fontsize);

​

  let offsetX = width / 2 - bounds.w / 2;

  let offsetY = height / 2 + bounds.h / 2; // Center vertically

  points = points.map(p => ({

    x: p.x + offsetX,

    y: p.y + offsetY

  }));

}

​

​

function autoVariablefont(frame) {

  let speed = 100;

  let circleSize = 20;

​

  distance = (sin(frame / speed) * 400 + 400) / 50;

  brushSize = (cos(frame / speed) * 400 + 400) / 50;

​

  // Removed the direct manipulation of slider1 and slider2. 

  // Consider applying these values to the relevant functionalities directly.

​

  framelength = distance;

}

​

function changeWords() {

  string = stringList[int(random(0, stringList.length - 1))];

  createStringBody();

}

​

function brush(x, y) {

    if (grayScale) {

        fillColor.S = 0;

        fillColor.B = brightness;

    } else {

        fillColor.H = int(random(0, 255));

        fillColor.S = saturation;

        fillColor.B = 255;

    }

    const { H, S, B, Alpha } = fillColor;

    fill(H, S, B, Alpha);

    stroke(H, S, 30, Alpha);

​

    // Check for mode and draw either ellipses or lines

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

        let posX = randomGaussian(0, distance);

        let posY = randomGaussian(0, distance);

​

        if (isBubbleMode) {

            // Draw bubbles

            let size = randomGaussian(5, brushSize);

            ellipse(x + posX, y + posY, size, size);

        } else {

            // Draw lines

            let angle = random(TWO_PI);

            let lineLength = randomGaussian(5, brushSize);

            let endX = cos(angle) * lineLength + x + posX;

            let endY = sin(angle) * lineLength + y + posY;

            line(x + posX, y + posY, endX, endY);

        }

    }

}

​

​

function drawPoint(points) {

  points.forEach(point => {

    brush(point.x, point.y);

  });

}

​