Assignment – 2: Optical illusion

For this assignment, I have decided to use for loops to make a type of black and white optical illusion. I used one global variable to animate both the lines and the circles. Calculating the rotations using the angles were bit difficult at first. Furthermore, used map method for each lines and circles to change the position of the points and the color hues respectively. Particular section that I am proud of is computing the x and y positions of the line using cos and sin to move the lines.

For further improvement, adding user interaction based on mouse clicking or mouse position could be a viable direction. Moreover, randomizing the user interaction to a certain extent is an area that I am trying to improve.

let angle = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);

  let circles = 10;
  let diameter = width / 2 + cos(angle) * 50; 

  for (let i = 0; i < circles; i++) {
    let gray = map(i, 0, circles - 1, 0, 255);
    fill(gray);

    ellipse(width / 2, height / 2, diameter, diameter);
    diameter -= 20;
  }

  drawLines();

  angle += 0.04;
}

function drawLines() {
  let numLines = 12;
  let lineLength = 200;

  for (let i = 0; i < numLines; i++) {
    let rotatingAngle = map(i, 0, numLines, 0, TWO_PI);
    let x1 = width / 2 + cos(rotatingAngle + angle) * (width /6 );
    let y1 = height / 2 + sin(rotatingAngle + angle) * (width /6);
    let x2 = x1 + cos(rotatingAngle) * lineLength;
    let y2 = y1 + sin(rotatingAngle) * lineLength;

    stroke(255);
    strokeWeight(2);
    line(x1, y1, x2, y2);
  }
}