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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
}
}
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; } } }
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

Leave a Reply