Assignment Week – 4

I wanted to take the route of generative text, I wanted something that has a motion of swaying side to side having some sort of hypnotic effect. Additionally, I wanted the text to be in a pixelated font mainly for the aesthetic element, I used the font Silkscreen to achieve that look.

As a beginner in p5.js I had to use online resources such as the p5.js reference page, and YouTube: Patt Vira’s videos.

I am especially proud of being able to figure out the following formulas and that block of code, it might seem basic but it took me a while to wrap my head around them. The following block is what gives the element of swaying as there are two texts overlapping each other using, the top layer mimicking the motion of the layer under it. Updating the angle based on a sinusoidal function, creating a dynamic movement in the pattern which is what creates the swaying motion. And, I added the interaction element of being able to switch the colors of the text randomly – the colors are randomized and the letters are transparent.

function draw() {
  background(0);
  stroke(255);
  let x = r * cos(angle);
  let y = r * sin(angle);
  translate(20, 300);

  for(let i = 0; i < points.length; i++) {
    line(points[i].x, points[i].y, points[i].x + x, points[i].y + y);
  }

  fill(textColor);
  textSize(size);
  textFont(font); 
  text(msg, x, y);

  let increment = 2 * sin(t);
  t++;
  angle += increment;
}

function mousePressed() {
  // Change text color on mouse click
  textColor = color(random(255), random(255), random(255), 100);

  // Introduce noise to the points
  for (let i = 0; i < points.length; i++) {
    points[i].x = originalPoints[i].x + random(-10, 10);
    points[i].y = originalPoints[i].y + random(-10, 10);
  }
}

I initially wanted to add the Dubai landscape behind the text, however that was a complete failure, I couldn’t figure out what went wrong, but that is the only thing that I would change with my code.

Here is my entire code:

let font;
let points = [];
let originalPoints = [];
let msg = "dubai";
let size = 250; 
let r = 15; 
let angle = 0; 
let t = 0;
let textColor;

function preload() {
  font = loadFont("fonts/Silkscreen-Regular.ttf");
}

function setup() {
  createCanvas(850, 400);
  points = font.textToPoints(msg, 0,  0, size);
  originalPoints = points.map(point => createVector(point.x, point.y));
  angleMode(DEGREES);
  textColor = color(255, 100);
}

function draw() {
  background(0);
  stroke(255);
  let x = r * cos(angle);
  let y = r * sin(angle);
  translate(20, 300);

  for(let i = 0; i < points.length; i++) {
    line(points[i].x, points[i].y, points[i].x + x, points[i].y + y);
  }

  fill(textColor);
  textSize(size);
  textFont(font); 
  text(msg, x, y);

  let increment = 2 * sin(t);
  t++;
  angle += increment;
}

function mousePressed() {
  // Change text color on mouse click
  textColor = color(random(255), random(255), random(255), 100);

  // Introduce noise to the points
  for (let i = 0; i < points.length; i++) {
    points[i].x = originalPoints[i].x + random(-10, 10);
    points[i].y = originalPoints[i].y + random(-10, 10);
  }
}