let sections = 12;

let font;

let points = [];

let fontsize = 200;

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

let sounds = [];

let img;

​

// Preload font

function preload() {

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

  img = loadImage("/bg/useit2.jpg");

  sounds[0] = loadSound("/songs/zac.mp3");

  sounds[1] = loadSound("/songs/background.mp3");

  sounds[2] = loadSound("/songs/background.mp3");

  sounds[3] = loadSound("/songs/background.mp3");

  sounds[4] = loadSound("/songs/background.mp3");

  sounds[5] = loadSound("/songs/zac.mp3");

  sounds[6] = loadSound("/songs/zac.mp3");

  sounds[7] = loadSound("/songs/zac.mp3");

  sounds[8] = loadSound("/songs/zac.mp3");

  sounds[9] = loadSound("/songs/background.mp3");

  sounds[10] = loadSound("/songs/zac.mp3");

  sounds[11] = loadSound("/songs/zac.mp3");

  sounds[12] = loadSound("/songs/zac.mp3");

}

​

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":

      textSize(32);

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

      break;

    case "sectioned":

      image(img, 0, 0, width, height);

      drawSections();

      break;

    case "input":

      inputBox.show();

      fill(0); // Set text color

      textSize(32);

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

    // Calculate which section was clicked based on mouse position

    let numCols = Math.ceil(sections / 4); // Using 4 rows as before

    let sectionWidth = width / numCols;

    let sectionHeight = height / 4; // Assume four rows as per drawSections logic

    let col = Math.floor(mouseX / sectionWidth);

    let row = Math.floor(mouseY / sectionHeight);

    let sectionIndex = row * numCols + col;

​

    if (sectionIndex >= 0 && sectionIndex < sections) {

      // Play the sound associated with this section

      sounds[sectionIndex].loop();

    }

​

    // Proceed to the input state

    currentState = "input";

    inputBox.show();

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

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

    currentState = "sectioned";

  }

  // 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" && keyCode === ENTER) {

    transitionToDrawingState();

    // 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

  textSize(fontsize); // Set text size for the inputted text effect

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

​

  // 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); // Draw the points with the shaky effect

​

  // Draw the simple description text at the bottom with a smaller font size

  textSize(18); // Set text size for description

  fill(0); // Set text color for description

  noStroke(); // Ensure there's no stroke on description text

  textAlign(CENTER, BOTTOM); // Align text to bottom center

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

}

​

​

​

​

​

function createStringBody(input) {

  // Generate points for the inputted text that spell out the word

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

    sampleFactor: 0.3, // Adjust for detail

    simplifyThreshold: 0

  });

​

  // Measure the actual width of the text

  let textW = textWidth(input);

​

  // Calculate the offset to center the text on the canvas

  const xCenterOffset = (width - textW) / 2;

  const yCenterOffset = (height + fontsize * 0.75) / 2; // Adjust 0.75 if needed

​

  // Adjust the points to the center of the canvas

  points = points.map(p => {

    return {

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

  });

}

​

function transitionToDrawingState() {

  // Stop all sounds

  sounds.forEach(sound => {

    if (sound.isPlaying()) {

      sound.stop();

    }

  });

​

  // Transition to the drawing state

  currentState = "drawing";

  createStringBody(inputBox.value());

  loop();

}

​