let fonts = ["Arial", "Courier New", "Georgia", "Times New Roman", "Verdana", "Comic Sans MS", "Trebuchet MS"]; // List of fonts

let placeWords = []; 

let label; // To store the label

​

function setup() {

  noCanvas();

​

  // Create label and position it

  label = createP("Enter words:"); 

  label.style('font-size', '18px'); // Adjust font size of the label

  label.position(windowWidth / 2 - 40, windowHeight / 2 - 70); // Position label above text field

​

  // Create input field and center it

  textfield = createInput();

  textfield.position(windowWidth / 2 - 60, windowHeight / 2 - 30); // Centered horizontally and vertically

  textfield.size(120); // Set the size of the text field

  textfield.changed(newText);

}

​

function newText() {

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

  let userText = createP(userInput); // Create a paragraph with user input

  let textLength = userInput.length; // Get the length of the input text

  let randomX = random(windowWidth - 100);  // Random X position

  let randomY = random(windowHeight - 50);  // Random Y position

  let randomFont = random(fonts);           // Pick a random font

  userText.position(randomX, randomY);      // Set random position

  userText.style('font-family', randomFont); // Set random font

  userText.style('font-size', random(16, 32) + 'px'); // Set random font size

  // Apply color based on the length of the text

  if (textLength > 15) {

    userText.style('color', '#165BAA');  // Blue for > 15 characters

  } else if (textLength > 10) {

    userText.style('color', '#F765A3');  // Pink for > 10 characters

  } else if (textLength > 5) {

    userText.style('color', '#A155B9');  // Purple for > 5 characters

  } else {

    userText.style('color', '#0B1354');  // Dark blue for <= 5 characters

  }

​

  textfield.value(''); // Clear text field after displaying the text

}

​

function windowResized() {

  // Reposition elements when window is resized

  label.position(windowWidth / 2 - 60, windowHeight / 2 - 60);

  textfield.position(windowWidth / 2 - 60, windowHeight / 2 - 30);

}

​