Generative Text – Week 4

Concept

This code defines a sketch that displays the letters “Zaid” in a random and animated way on a black background. The code is creating a canvas and for manipulating visual elements on the canvas. The code defines a font named “Courier New” and arrays for holding the letters to be displayed and the colors of those letters. It also creates a slider to adjust the speed of the animation. In the setup function, the canvas is created, the background color is set to black, and the font and text size are set.

The draw function is where the animation of the letters takes place. It starts by setting a slightly transparent black background. Then, it gets the value of the speed slider and iterates through the letters array. For each letter, it randomly changes its position, rotation, and size based on noise functions and the current frame count. It then uses the fill function to set the color of the letter based on the corresponding color in the colors array, and finally draws the letter using the text function. Overall, the code creates a dynamic and visually interesting display my name “Zaid” that changes in real-time based on the slider value.

Code

// Define the font to be used
let font = "Courier New";

// Define arrays for the letters and colors
let letters = [];
let colors = [];

// Define an array with the letters to display
let zaidLetters = ["Z", "a", "i", "d"];

// Define a variable to hold a slider for adjusting the speed
let speedSlider;

// Set up the canvas and other variables
function setup() {
  createCanvas(400, 400); // create a canvas with a size of 400x400 pixels
  background(0); // set the background color to black
  textFont(font); // set the font to the one defined earlier
  textSize(120); // set the text size to 120
  textAlign(CENTER, CENTER); // center the text alignment
  for (let i = 0; i < zaidLetters.length; i++) {
    letters.push(zaidLetters[i]); // add the letter to the letters array
    colors.push(color(random(255), random(255), random(255))); // add a random color to the colors array
  }
  speedSlider = createSlider(1, 10, 5); // create a slider for controlling the speed with a default value of 5
  speedSlider.position(10, 10); // set the position of the slider
}

// Draw the letters and animate them
function draw() {
  background(0, 20); // set the background color to a slightly transparent black
  let speed = speedSlider.value(); // get the value of the speed slider
  for (let i = 0; i < letters.length; i++) {
    // Randomly change the position and rotation of each letter
    let x = map(noise(i + frameCount / (50 * speed)), 0, 1, 0, width);
    let y = map(noise(i + 1000 + frameCount / (50 * speed)), 0, 1, 0, height);
    let angle = noise(i + 2000 + frameCount / (100 * speed)) * TWO_PI;
    let size = map(sin(i + frameCount / (30 * speed)), -1, 1, 90, 120);

    push();
    translate(x, y);
    rotate(angle);
    fill(colors[i]);
    textSize(size);
    text(letters[i], 0, 0);
    pop();
  }
}

Reflection / Future Improvements

This code is a fun and creative way to display text in a dynamic and animated way. It uses a combination of noise functions and various mapping techniques to generate the position, rotation, and size of each letter, resulting in a unique display with each run of the sketch.

One possible improvement for this code could be to add user interactivity by allowing the user to input their own text and select their own color palette. This could make the sketch more engaging for the user and allow for a wider range of creative possibilities. Another possible improvement could be to add more animation effects, such as scaling, fading, or moving the letters in different directions. This could add more visual interest and complexity to the sketch, making it even more dynamic and engaging. With some additional improvements and modifications, it could be further developed into a fully-featured text animation tool. The project was very fun to work with but it took time to get the hang of how to use text in a rather creative and artistic way.