Móire Pattern

//colors

var b_color;

var w_color;

​

//strokeweight of static

var stW;

​

//strokeweight of 

var stL;

​

//colors of strokes

var r_color;

var bl_color;

​

//motion

var deltaY;

​

​

function setup() {

  createCanvas(600, 600);

  b_color = '#000000';    //define variables

  w_color = '#FFFFFF'; 

  r_color = '#FF0000';

  bl_color = '#0000FF';

  stL = 4;

  stW = 2;   //lines strokewight

  deltaY = -400;   //value for movement 

}

​

​

function draw() {

  background(w_color);

  noFill();  //remove fill

  //call the functions

  static(); 

  //lockdown styles

      push ();               //need to put push and pop

      translate(0,deltaY);  //command that moves

      diagonals();

​

      pop();

      deltaY = deltaY + 0.7   //change speed of animation

      if (deltaY > 600) {

        deltaY = -250;  //change this value to change where the movement starts from

      }

}

​

function diagonals() {

  noFill();  //remove fill

  stroke(bl_color);

  strokeWeight(stW);  //strokeweight of moving lines

​

  var xstart = -100;

  var ystart = 100;    //variables for lines xpos and ypos start and end

  var xend = 600;

  var yend = 200;

  //diagonal lines repeated 160 times

  for(var i = 0; i < 160; i = i + 1){

    line(xstart,ystart,xend,yend);

      ystart = ystart + 5;

      yend = yend + 5;

  }

}

​

  function static() {

    noFill();  //remove fill

    stroke(r_color);

    strokeWeight(stL);  //strokeweight of moving lines

  var xstart = 600;

  var ystart = -200;    //variables for lines xpos and ypos start and end

  var xend = -150;

  var yend = 50;

  //diagonal lines repeated 160 times

  for(var i = 0; i < 160; i = i + 1){

    line(xstart,ystart,xend,yend);

      ystart = ystart + 5;

      yend = yend + 5;

   }

  }