lmattson-project-03

//Luke Mattson
//section A


function setup() {
    createCanvas(600, 450);
    background(120)
}

function draw() {
// draw a face in the background
    background(173,216,230)
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);
    stroke(0);                  
    fill(223,180,130);      
    ellipse(300,250,230,320);
    fill(250,231,218);          
    ellipse(412,276,30,60);
    ellipse(188,276,30,60);
    fill(250,231,218);          
    ellipse(300,300,230,320);
    fill(245,245,245);         
    stroke(0);
    strokeWeight(2);
    circle(265,245,40,40);
    circle(335,245,40,40);
    fill(0,0,200,30);
    circle(270,250,18,18);
    circle(330,250,18,18);
    line(300,260,310,300);      
    line(310, 300,290, 295);
    fill(255,160,160);          
    ellipse(300,350,25,35);
    line(310,230,350,215);      
    line(290,230,250,215);
    stroke(255,160,160,40);      
    fill(255,160,160,40);
    ellipse(240,325,30,50);
    ellipse(360,325,30,50);
    noFill();                    
    strokeWeight(2);
    stroke(0);
    arc(300,425,70,40, 2*PI+1/8*PI, PI-1/8*PI);
    stroke(255,255,255);        
    line(300,500, 300, 460);
    line(300,500, 310, 510);
    line(300,500,290,510);
    line(300,480,310,470);
    line(300,480,290,470);

// the text "Hi" comes onto the canvas when the mouse is on the right side
     text("Hi", 1175 - mouseX, mouseY)

//use for loops to draw the hexagons
    var hexX = 20
    var hexY = 30
    for (let hexX = 0; hexX <= 600; hexX += 20){									
        for(let hexY = -10; hexY <= 500; hexY+= 20){

            // variables to determine each hexagon's color
            var hexR = (dist(hexX, hexY, mouseX, mouseY)/150)*100
            var hexG = (dist(hexX, hexY, mouseX, mouseY)/150)*20
            var hexB = (dist(hexX, hexY, mouseX, mouseY)/150)*120

            // variable to determine each hexagon's size
            var size = constrain((dist(hexX, hexY, mouseX, mouseY)/150),.3,1.5)

            // drawing a hexagon
            fill(hexR,hexG,hexB)
            beginShape()
            vertex(hexX,hexY)
            vertex(hexX-size*10,hexY-size*5)
            vertex(hexX-size*10,hexY-size*15)
            vertex(hexX,hexY-size*20)
            vertex(hexX+size*10,hexY-size*15)
            vertex(hexX+size*10,hexY-size*5)
            endShape(CLOSE)
        }
    }

// angular movement of the circles
    push()
    translate(300,225);

    // positioning and opacity variables
    var circleX = 100;
    var circleY = 100;
    var circleOpacity = mouseX/2

    fill(0,0,0,circleOpacity)

    // rotating the origin based on mouseX positioning
    var rotationrr = radians(mouseX);
    rotate(rotationrr);

    //drawing each circle
    ellipse(circleX,circleY,20);
    ellipse(circleX+50,circleY+50,20)
    ellipse(circleX+100,circleY+100,20)
    ellipse(circleX+150,circleY+150,20)
    ellipse(circleX-50,circleY-50,20)
    ellipse(circleX-100,circleY-100,20)
    ellipse(circleX-150,circleY-150,20)
    ellipse(circleX-200,circleY-200,20)
    ellipse(circleX-250,circleY-250,20)
    ellipse(circleX-300,circleY-300,20)
    ellipse(circleX-350,circleY-350,20)
    
    // returning the origin to the default
    pop()

    
   
}