Week 4 Assignment: Generative Text

Inspiration

For this assignment, I aimed to build on my previous projects and utilize the concepts from class to create a generative piece of text. I felt a strong urge to extrapolate the design from my previous butterfly animated sketch in creating the outline of a text made by a set of moving butterflies. I also wanted to use my last name, Al-Towaity, as opposed to my first name. The reason for this is twofold: 1) it is amusing to use butterflies to represent an Arab, tribal name, and 2) I am using the number “280” [two-eighty], which, if read fast enough, approximates the pronunciation of my name. These two reasons bring in an additional layer of personalization to the sketch that extends beyond the design itself.

Process and Implementation

As for the technical implementation, I exported the Butterflyclass from my previous assignment into this sketch. I, then, modified the hyperparameters of the parametric function to scale it down and adjusted the rate of drawing the curves of each butterfly to give the illusion of moving butterfly wings. I also made sure to include replaying the drawing of each butterfly once the curves have spanned a given angle (4pi in this case).

// source: Sarah Al-Towaity-Intro to IM- Assignment 3.1 https://editor.p5js.org/sarah-altowaity1/sketches/YqvekMK43 

class Butterfly {
....
  drawButterfly() {
    push(); // save the current drawing state 
    translate(this.x, this.y); // move the origin to the object's position
    stroke(this.color); // set the stroke color based on the chosen color 
    rotate((this.angleRot * PI) / 4); // rotate the object 
    noFill(); 
    strokeWeight(1);
    beginShape();
    // draw the curve 
    for (let i = 0; i <= this.theta; i += 0.06) {
      // calculate the radius based on the parameteric equation for the butterfly curve 
      let r =
        exp(sin(i)) -
         this.a * cos(4 * i) +
        pow(sin((1 / this.b) * 12 * (2 * i - PI)), 5);
      // calculate x and y position of the curve 
      let x = r * cos(i) * 1.5 * noise(i, frameCount*0.01);
      let y = r * sin(i) * 1.5 * noise(i, frameCount*0.01);
      // draw circle 
      curveVertex(x, y, r);
    }
    endShape();
    if (this.theta < 2 * TWO_PI){
      this.theta += 0.09; // increment theta for animation 
    }
    else{ // reset theta to 0 once its value reach 4*pi to create the effect of flying effect
      this.theta = 0; 
    }
    pop(); // restore original sketch state 
  }
}

I also used the method of extracting points from text from Professor Aaron’s Circle word example to create butterflies centered around each extracted point.

function setup() {
  createCanvas(500, 500);
  // set background 
  background(148, 69, 71);
  
  // create a bounding box around the text 
  let boundingBox = font.textBounds(textString, 0, 0, textSize);

  // convert texts to an array of points 
  // sampleFactor and simplifyThreshold control the smoothness and quantity 
  // of generated points 
  points = font.textToPoints(
    textString,
    width / 2 - boundingBox.w / 2,
    height / 2 + boundingBox.h / 2,
    textSize,
    {
      sampleFactor: 0.07,
      simplifyThreshold: 0,
    }
  );
  
  // populate butterflies array with generated butterfly objects using the points
  // obtained above 
  for (let i = 0; i < points.length; i++) {
    let x = points[i].x;
    let y = points[i].y;
    butterflies.push(new Butterfly(x, y));
  }
}

For an added touch of animation, I added a resizing factor attribute to the Butterfly class that changes when the mouse is within a particular distance of the butterfly. This way, the butterflies enlarge when the mouse is over them and return to their normal size once the mouse moves further away.

function mouseMoved() {
  // resize butterflies that are within 40 pixels from the 
  for (let i = 0; i < butterflies.length; i++) {
    let distance = dist(mouseX, mouseY, butterflies[i].x, butterflies[i].y);
    if (distance < resizeDistance) {
      butterflies[i].resizeFactor = random([-1, 1]) * random(2,3);
    } else {
      butterflies[i].resizeFactor = 1; // restore normal size when the mouse is moved away
    }
  }
}

 

Embedded Sketch

Reflections and Ideas for the Future

One thing I struggled with was minimizing lags and delays while drawing. I would have loved for the sketch to be bigger and to have more sample points (and butterflies) for a fuller, more vibrant look. However, I noticed that the editor would get stuck and the animation would lag with more components. I attributed this to the many butterfly objects being drawn, a process that involved multiple looping iterations. Hence, as a future improvement, I would like to find ways to optimize the memory and space requirements of this sketch so that it can be seamlessly scaled up without issues.