Week 2 – Assignment – Eye Candy

In week 2, we learned loops. I wanted to take that further by introducing them to my animated art in Processing.

I used random to create a rainbow effect for the elements, while the waves were generated using loops. Similarly, the tiles are also generated using loops, while the colors are randomized for each tile, hence creating this gradient-ish effect.

For this assignment, I really wanted to get myself familiar with the way P5 draws each frame. To quote, I think I should simplify the codes and be creative with the limited tools I have rather than going over the top. Basically, I am opting by using optical illusions to create the art shown.

Here are the codes I used for the art:

var x;
var y;
var changeDirection;


function setup() {
  createCanvas(600, 600);
  frameRate(6);
  y = 300;
  changeDirection = false;
}

function draw() {
  background(0);

  //loop for tile grids
  for (let x = 0; x < width; x += 50) {
    for (let y = 0; y < height; y += 50) {
      noFill();
      strokeWeight(1);
      stroke(random(255));
      rect(x, y, 50, 50);
    }
  }

  stroke(255);
  strokeWeight(5);
  //loop for the rainbow waves rectangles
  for (let x = 0; x < width; x += 50) {
    fill(random(100, 255), random(1, 200), random(50, 100));
    rect(x, 0, 50, random(150), 0, 0, 20, 20);
    rect(x, 600, 50, random(-150), 0, 0, 20, 20);
  }

  //text
  textAlign(CENTER, CENTER);
  textSize(48);
  fill(255);
  stroke(0);
  strokeWeight(4);
  fill(random(100, 255), random(1, 200), random(50, 100));
  text("Synthwaves", width / 2 + 5, y + 5);
  fill(255);
  text("Synthwaves", width / 2, y);
  fill(180);
  text("Synthwaves", width / 2 - 5, y - 5);
  
  //If - Else statement to change text direction
  if(y>320){
        changeDirection=true
  }
  else if (y<=270){
      changeDirection=false
  }

  if (y>=0 && changeDirection == false){
      y=y+5
  }

  else if(changeDirection == true){
      y=y-5
  }

  
  

}