# UI

## (AI generated) Description

This p5.js sketch generates a dynamic text display that allows users to interact and customize the presentation through various input forms:

- **Canvas Dimensions:** The sketch creates a 200x200 pixels canvas.
- **Initial Settings:**
  - The initial title text displayed is "P5JS."
  - The background color is set to tomato (`#ff6347`).
  - The text color is initially white (`255`).
  - The title size is initially set to `300`.
- **Interactivity:**
  - Users can change the title text via a text input field.
  - The size of the title text can be adjusted with a number input field.
  - A color picker allows for the modification of the background color.
  - A range slider input controls the text color, adjusting the grayscale value.
- **Text Style:**
  - The font used is "Rockwell."
  - Text is bold and italic.
  - Text alignment is centered both vertically and horizontally within the canvas.

The sketch provides an interactive experience where users can customize the appearance of a text display through simple UI controls.

## Relvant links:

- https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types#slider_controls
- https://p5js.org/reference/#group-DOM
- https://p5js.org/reference/#/p5/input