Based on Moiré Patterns from Code as a Creative Medium

https://github.com/CodeAsCreativeMedium/exercises/blob/main/02_iteration/14_moire_patterns/moire_js/moire_js.js

*/

​

let angle = 0;

let numLines = 10;

let spacing = 50; //spacing between lines

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  stroke(255);

  strokeWeight(2);

  smooth(); //improves the image quality of the image

}

​

function draw() {

  background(0);

​

  //creates the lines in the background

  for (let i = 0; i < numLines; i += 2) {

    let x = map(i, 0, numLines - 1, width / 2 - spacing, width / 2 + spacing);

    line(x, 0, x, height);

  }

​

  let mx = mouseX / 200.0; //determines the speed of the turning lines by dividing the mouse's x position by a number

  angle = 0.95 * angle + 0.05 * mx; //determines how far the lines turn, also essentially maps the position to the x position of the mouse within the screen

  console.log(angle, mx);

​

  //starts translation just for rotating lines

  push();

  translate(width * 0.6, height / 2); //width x 0.6 adjusts the lines so they are just off center, centering the lines would be at width x 0.5 (same as width/2)

  //translate moves the lines to the center of the screen height wise

  rotate(angle); //rotates the lines based on the angle that was decided above

  for (let i = 0; i < numLines; i++) {

    x = map(i, 0, numLines - 1, -spacing, spacing); //maps the number of lines to determine how many lines are in the rotating lines

    line(x, -height * 0.4, x, height * 0.4); //draws the line just 0.4 away from the top ans bottom of the screen

  }

  pop();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​