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.
