Project-04 String Art

//Michael Li
//Section C 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 70;

function setup() {
    createCanvas(400, 300);
    background(200);
    

}

function draw() {
    background("darkred");
    //remapped values for eyeball translation
    var tranX1 = constrain(map(mouseX, 0, 400, 120, 280), 120, 280)
    var tranX2 = constrain(map(mouseX, 0, 400, 130, 270), 130, 270)
    var tranX3 = constrain(map(mouseX, 0, 400, 140, 260), 140, 260)
    var tranX4 = constrain(map(mouseX, 0, 400, 150, 250), 150, 250)
    //set variable for rotation
    var rot = 90
    //eye white
    stroke(255);
    //two lines bottom left and top right
    line(0, 150, 250, 400); 
    line(150, -100, 400, 150)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set initial points for line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //repeat the process diagnally. 
    //draw line top right and bottom left
    line(150, 400, 400, 150);
    line(0, 150, 250, -100)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (400-150)/numLines;
    dy1 = (150-400)/numLines;
    dx2 = (250-0)/numLines;
    dy2 = (-100-150)/numLines;

    //set initial points for line
    x1 = 150;
    y1 = 400;
    x2 = 0;
    y2 = 150;

    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    // spiral controlled by the mouseY position

    //use push and pop to limit the conditions inside
    push()
    //tranlsate origin to the middle of the canvas
    translate(200, 150)
    //set variables for the line positions
    var x =100
    var y = 100
    var dist = 50 //distance between each line
    var rot2 = 5 //set value for rotation degree
    var rotation = constrain(map(mouseY, 0, 300, -500, 100), -500, 100)
    //sets value of y, the loops repeats for 200 times
    for (y = 100; y <= 300; y += 1){
        rotate (radians(rot2)) //rotation of the line around the origin
        stroke("lightyellow") //stroke color
        //draw line to form the spiral
        line(rotation, y, x+dist, y+dist)
        rot2 += 0 //constant rotation
    }

    pop()

    //eyeball formation
    //use written function eyeBall below to draw the eyeball formation

    //Innermost DarkRed
    push()
    stroke("darkred")
    //translate the position based on the mouseX position
    //use tranX variables for remapped values
    translate(tranX1, 150); 
    //use for loop to repeat the Eyeball Function
    for (var spin = 0; spin <=6; spin += 1){
        //written function to draw components of the eyeballs
        eyeBall(30, 30, 30, 30)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //2nd layer lightblue
    push()
    stroke("lightblue")
    //use remapped value for translation based on mouseX
    translate(tranX2, 150);
    //rotate 45 degrees for variation from the last component
    rotate(radians(45))
    //for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //Eyeball function decrease value to increase size
        eyeBall(20, 20, 20, 20)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //3rd layer light green
    push()
    //use remapped value for translation based on mouseX
    translate(tranX3, 150);
    //rotate 90 degrees for variation from the last compone nt
    rotate(radians(90))
    stroke("lightgreen")
    //use for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //eyeBall function increases component size
        eyeBall(10, 10, 10, 10)
        rotate(radians(rot))
        //addes rotation value for the circular shape
        rot += 90
    }
    pop()

    //4th layer dark grey
    push()
    //use remapped value for tranlsation based on mouseX
    translate(tranX4, 150);
    //rotate 45 degrees for variation
    rotate(radians(45))
    stroke(30) //dark grey
    for (var spin = 0; spin <=12; spin += 1){
        //increase in size
        eyeBall(-10, -10, -10, -10)
        rotate(radians(rot))
        //adds 45 degrees for circular form
        rot += 45
    }
    pop()
   
    //eye lids
    stroke("orange");
    //draw two lines
    line(0, 150, 250, 400);
    line(150, 400, 400, 150);
    //calculate length of the line and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150-400)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = 400;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //draw two lines
    line(0, 150, 250, -100)
    line(150, -100, 400, 150)
    //calculate length of the lines and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (-100-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

//set function to draw the eyeball components
function eyeBall (a, b, c, d){
 
    //set two lines
    line(a-40, b-120, c-100, d+40)
    line(a+40, b-120, c-120, d-40)

    //find the length of the lines divided by the number of lines
    dx1 = (c-100-(a-40))/numLines;
    dy1 = (d+40-(b-120))/numLines;
    dx2 = (c-120-(a+40))/numLines;
    dy2 = (d-40-(b-120))/numLines;

    //set values for inital position
    var x1 = a-40;
    var y1 = b-120;
    var x2 = c+40;
    var y2 = d-120;
    //use for loops to continously draw the lines.
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}