Assingment 4: Sw(eeeeee)irl

Concpet:

I got inspired by one of the given examples that we got the chance of looking through. My idea was very simply just let the letters “W” and “E” have a little fun swirling around the canvas.

 

inspo:https://www.lyceelecorbusier.eu/p5js/?p=2653#more-2653

Highlight of Code: 

As shown in the set of codes below, I was able to control how the letters appeared on screen depending on its position. As well as the distance between each letter and their angle. You can smoothly draw around the canvus as it displays the letters. After displaying them all the code repeats.

function draw() {
  if (mouseIsPressed) {
    // Calculate the distance between current and previous mouse positions
    let d = dist(x, y, mouseX, mouseY); 
    textFont('impact'); 
    textSize(fontSizeMin + d / 2); // Set text size based on the distance
    let newLetter = letters.charAt(counter); // Get the next letter from the letters string
    stepSize = textWidth(newLetter); // Calculate the step size based on text width

    if (d > stepSize) {
      let angle = atan2(mouseY - y, mouseX - x); // Calculate the angle between current and previous mouse positions

      push(); 
      translate(x, y); // Translate the origin to the previous mouse position
      rotate(angle + random(angleDistortion)); // Rotate the text randomly
      text(newLetter, 0, 0); // Draw the text at the translated and rotated position
      pop(); // Restore the previous transformation state

      counter++; // Move to the next letter
      if (counter > letters.length - 1) {
        counter = 0; // Reset the counter when all letters have been used
        clearCanvas(); // Clear the canvas when the cycle is complete
      }
//moving according to coordinates
      x = x + cos(angle) * stepSize; 
      y = y + sin(angle) * stepSize; 
    }
  }
}

Reflection and Ideas for Future Work:

I wanted to take more inspotations and combine them in order to come up with an idea that refelcts my own work rather than someone else.

Edit: https://editor.p5js.org/mariamalkhoori/sketches/SpcDmSs92