Optical Illusion II

Similar to Optical Illusion I, this work is also reminiscent of an optical illusion. Here, I explore Bezier curves to create differing lines. Bezier curves are mathematical and computer graphics concepts, similar to a curve, with control points that “pull” the curve towards themselves to create the curvature seen below.

/* Luna Jerjees
Optical Illusion 2
*/

let increments;

//create canvas, set background color to white
//set the size of each stroke and remove any shape fill
function setup() {
  createCanvas(600, 600);
  background('white');
  strokeWeight(7);
  noFill();
}

//Makes function calls 
function draw() {
  drawBezierLeft();
  stripes();
  drawBezierRight();
  
}

function drawBezierRight(){
  
  let x1 = 0; //initialize x values for bezier
  let x2 = 0;
  
  let inc = 30;//value to increment x position by
  let control1=400; //initializes x values for bezier control points
  let control2 =50;
  
  let colors = ['red', 'orange', 'yellow','green', 'blue', 'indigo', 'violet']; //array of colors 
  strokeWeight(4); //sets stroke size
  
  for (let i = 0; i< 60; i++) {
    stroke(random(colors));
    bezier(x1+=inc, 0, 
           control1, 150,
           control2, 450,
           x2+=inc, height);
    //sets each shape to a different size
    //creates a new bezier
    //a bezier is a mathematical and computer graphics concept
    //similar to a curve with control points that "pull" the 
    //curve towards themselves to create the curvature seen here.

  }
}
function drawBezierLeft(){
  
  let x1 = 0;//initialize x values for bezier
  let x2 = 0;
  
  let inc = 30; //value to increment x position by
  
  let control1= 400; //initializes x values for bezier control points
  let control2 = 50;
  stroke('red');
  let colors = ['red', 'orange', 'yellow','green', 'blue', 'indigo', 'violet']; //array of colors
  strokeWeight(4);
  for (let i = 0; i< 60; i++) {
    stroke(random(colors));
    bezier(x1-=inc, 0,
           control1, 150, 
           control2, 450,
           x2-=inc, 600);
    
     //sets each shape to a different size
    //creates a new bezier
    //a bezier is a mathematical and computer graphics concept
    //similar to a curve with control points that "pull" the 
    //curve towards themselves to create the curvature seen here.

  }
}
//creates the vertical stripes that create the optical illusion
function stripes(){
  
  strokeWeight(5);
  let inc = 4;
  let coord = 4;
  stroke('black');
  
  for (let i = 0; i < 150; i++){//creates a new line incremented on the x axis
    line(coord+= inc,0,coord+= inc,600);
  }
}