Assignment 4: Generative Text Output (La Mariposa)

I wanted to make artwork using a Spanish poem I liked. It is called “La Mariposa”.

La Mariposa
“Si yo fuera otra cosa, sería mariposa” (If I were something else, I would be a butterfly”)
Sin dirección salvo la brisa (With no direction but the breeze)
Flotaría entre belleza y belleza (I would float among beauty after beauty)
Tocando el cielo y la fresa (Touching the sky and the strawberry)
Una vida que sale como risa (A life that emerges like laughter)
“Si yo fuera otra cosa, sería mariposa” (“If I were something else, I would be a butterfly”)
Doradas del sol mis alas (Golden are my wings in the sun)

This poem evokes a sense of freedom, beauty, and simplicity. The speaker imagines the carefree life of a butterfly, fluttering from one beautiful thing to another, symbolizing a desire for a life unburdened by worries and constraints. I also wanted to highlight the fleeting, delicate, and ephemeral nature of life, much like a butterfly’s existence in this project.

function mousePressed() {
  // Display the next poem line when the mouse is pressed
  currentLineIndex = (currentLineIndex + 1) % poemLines.length;
   clear();
  // Display the current poem line
  text(poemLines[currentLineIndex], width / 2, height / 2);
}

The biggest challenge was that I could not clear the remaining lines of the poem after I clicked the mouse. So, the lines did not renew, it kept writing new lines above the remaining line. After I learned the “Clear” function, I could clear the canvas and display the next line of the poem each time I clicked the mouse, renewing the poem text.

Furthermore, I tried to make the butterfly move around the canvas more realistically.

  // Calculate the angle for butterfly rotation based on velocity
  butterflyAngle = atan2(butterflyVelocityY, butterflyVelocityX) + PI / 2;

  // Apply the angle and display the butterfly
  push();
  translate(butterflyX, butterflyY);
  rotate(butterflyAngle);
  imageMode(CENTER);
  image(butterflyImage, 0, 0, butterflySize, butterflySize);
  pop();

  // Update butterfly position
  butterflyX += butterflyVelocityX;
  butterflyY += butterflyVelocityY;

  // Wrap the butterfly around the canvas edges
  if (butterflyX > width) {
    butterflyX = 0;
  } else if (butterflyX < 0) {
    butterflyX = width;
  }
  if (butterflyY > height) {
    butterflyY = 0;
  } else if (butterflyY < 0) {
    butterflyY = height;
  }

  // Add a flapping wing animation
  butterflySize = 100 + sin(frameCount * wingFlapSpeed) * 10; // Adjust wing flap speed
}

The butterfly image is rotated based on its velocity direction to make it more realistic. Also, a wing-flapping animation is added by changing the butterfly’s size over time. This gives the appearance of the wings flapping. To make the butterfly rotate slowly, I adjusted the wingFlapSpeed variable to control the speed of wing flapping.

Next time, it would be better to mix data visualization and generative text output together rather than to use images in the background.