Afra Binjerais – Assignment 4

In this assignment, I wanted to do a generative text that moves.  I did that by doing an array and watching a YouTube tutorial that taught me how to move the fonts, which was quite easy to do.

Then, I was thinking of adding an interactive element with the mouseClicked element but I wasn’t sure how to do that, as I kept getting errors as the font oscillates back to forth (using sin waves) by default.

With the help of Pi (thanks Pi) I was able to do that, where each time the mouse was clicked the fonts oscillated back and forth faster and faster.

So this is the code

let font;
let points = [];
let r = 4;  
let angle = 0;
let angleIncrement = 1;  // New variable to control the angle increment rate
var landscape;

function preload() {
  font = loadFont("fonts/Inconsolata_Condensed-Light.ttf");
  landscape = loadImage('background.jpg');
}

function setup() {
  createCanvas(510, 400);
  points = font.textToPoints("AFRA", 0, 300, 300, {
    sampleFactor: 0.1
    // simplifyThreshold: 0
  });
  angleMode(DEGREES);
}

function draw() {
  background(landscape);
  for (let i = 0; i < points.length; i++) {
    ellipse(points[i].x + r * sin(angle + i * 20), points[i].y, 10, 10);
  }
  angle += angleIncrement;  // Use the angleIncrement variable
}

function mouseClicked() {
  angleIncrement += 5;  // Increase the angle increment rate on each click
}

and this is the final product 🙂

Honestly, I’m proud of my work so far, with this being my 4th assignment with code, but in the future, I would love to work with Arabic letters and see what it would look like.

Reference to the video I watched:

https://www.youtube.com/watch?v=eZHclqx2eJY