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

    // Optionally clear the background to avoid smearing

    background(220);

​

    // Apply a subtle shake to each point for a dynamic effect

    points.forEach(point => {

      let angle = random(TWO_PI);

      let radius = 0.5; // Control the magnitude of the "shake"

      point.x = point.originalX + cos(angle) * radius;

      point.y = point.originalY + sin(angle) * radius;

    });

​

    drawPoint(points);

  }

}

​

function mouseMoved() {

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

    distance = mouseX / 50;

    brushSize = mouseY / 50;

  }

  // Prevent default functionality for mouseMoved event

  return false;

}

​

function mousePressed() {

  // Ensure this function doesn't conflict with the drawing logic

  if (currentState !== "drawing") {

    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 we are in the input state, let the input box handle the typing

  if (currentState === "input") {

    // Do nothing if we're waiting for input

    // This allows the default behavior (typing) to proceed

  } else {

    // For other states, handle key presses for specific actions

    if (keyCode === 32) { // Spacebar pressed

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

      grayScale = !grayScale; // Toggle grayscale

    } else if (keyCode === 72) { // 'H' key pressed

      showUItext = !showUItext; // Toggle UI text

    } else if (keyCode === ENTER) { // Enter key pressed

      autoControl = !autoControl; // Toggle auto control

    }

  }

​

  // Only when Enter is pressed in input state, process this key

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

    // Hide the input box and update the state to "drawing"

    currentState = "drawing";

    // Call to generate the points for the inputted text

    createStringBody(inputBox.value());

    // Ensure the draw loop is running

    loop();

    // Prevent default behavior after processing the Enter key

    return false;

  }

}

​

​

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

​

  // Draw the effect with user input

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

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

  // Set text color, size, and alignment for the simple text

  fill(0); // Black color for the description text

  textSize(18); // Smaller text size for the description

  textAlign(CENTER, BOTTOM);

  // Display the simple description text below the fancy text

  text(`You said: "${userInput}"`, width / 2, height - 5);

}

​

​

​

function createStringBody(input) {

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

    sampleFactor: 0.3, // Lower for more points and smoother letters

    simplifyThreshold: 0

  });

​

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

​

  // Center the text on the canvas

  const xCenterOffset = (width - bounds.w) * 0.5 - bounds.x;

  const yCenterOffset = (height - bounds.h) * 0.5 - bounds.y;

​

  points = points.map(p => ({

    x: p.x + xCenterOffset,

    y: p.y + yCenterOffset,

    originalX: p.x + xCenterOffset,

    originalY: p.y + yCenterOffset

  }));

}

​

​

​

​

​

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

  // Set the color and alpha of the drawing

  if (grayScale) {

    fillColor.S = 0;

    fillColor.B = brightness;

  } else {

    // Assign a random hue for a colorful effect

    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, B, Alpha);

  // Draw either bubbles or lines based on isBubbleMode

  if (isBubbleMode) {

    // Draw an ellipse for each point

    let size = randomGaussian(brushSize, brushSize / 2);

    ellipse(x, y, size, size);

  } else {

    // Draw a line for each point

    let angle = random(TWO_PI);

    let length = randomGaussian(brushSize, brushSize / 2);

    let endX = x + cos(angle) * length;

    let endY = y + sin(angle) * length;

    line(x, y, endX, endY);

  }

}

​

​

​

function drawPoint(points) {

  // The drawing scale for width and height might need to be adjusted

  let sizeW = 1;

  let sizeH = 1;

​

  points.forEach(point => {

    brush(point.x * sizeW, point.y * sizeH);

  });

}

​

​

​