Project-03: Dynamic Drawing

My project was pretty much inspired by this giant cat I saw outside of my window one night running around in the grass, and so I cut my old project for this one. It started with getting the cat drawn, which was the hardest part by far to keep it symmetrical and looking friendly. After the cat, I wrote the “time” variable which keeps the movement of the sun synced with the color of the background, which lightens as the sun rises. The cat’s eyes follow your mouse as it moves around as well, and as the sun comes up the grass shrinks to show the whole cat.

catto

function setup() {
    createCanvas(600, 450);
    
    

}

function draw() {
	var time = min(mouseY, 255) ////controls mouse and background
	var eyemoveX1 = constrain(mouseX, 228, 236)
    var eyemoveX2 = constrain(mouseX, 364, 372)
    var eyemoveY = constrain(mouseY, 170, 182) ////eyes follow mouse
    var grassHeight = constrain(time, 0, 255) + 120 ////grows grass
    var sunHeight = 480 - min(mouseY, 480)    ////moves sun
    



	background(time / 4, time / 2, time);
    fill(100, 100, 100)
    circle(width / 2, height / 2, 300)
    ////ears
    triangle(188, 120, 240, 84, 136, 24)
    triangle(408, 120, 356, 84, 456, 24)
    ////eyes
    fill(236)
    circle(232, 176, 40)
    circle(368, 176, 40)
    fill(50, 0, 200)
    circle(232, 176, 24)
    circle(368, 176, 24)
    fill(0)
    ellipse(eyemoveX1, eyemoveY, 12)
    ellipse(eyemoveX2, eyemoveY, 12)
    ////nose
    fill(255,182,193)
    triangle(276, 248, 324, 248, width / 2, 272)
    line(width / 2, 272, width / 2, 304)
    ////whiskers
    line(288, 280, 200, 240)
    line(288, 282, 200, 288)
    line(288, 284, 200, 336)
    line(312, 280, 400, 240)
    line(312, 282, 400, 288)
    line(312, 284, 400, 336)
    ////mouth
    line(width / 2, 304, 276, 332)
    line(width / 2, 304, 324, 332)
    ////sun
    fill(255, 247, 16)
    circle(80, sunHeight, 100)
    ////grass
    fill(11, 156, 21)
    triangle(0, 450, 50, 450, 25, grassHeight)
    triangle(50, 450, 100, 450, 75, grassHeight)
    triangle(100, 450, 150, 450, 125, grassHeight)
    triangle(150, 450, 200, 450, 175, grassHeight)
    triangle(200, 450, 250, 450, 225, grassHeight)
    triangle(250, 450, 300, 450, 275, grassHeight)
    triangle(300, 450, 350, 450, 325, grassHeight)
    triangle(350, 450, 400, 450, 375, grassHeight)
    triangle(400, 450, 450, 450, 425, grassHeight)
    triangle(450, 450, 500, 450, 475, grassHeight)
    triangle(500, 450, 550, 450, 525, grassHeight)
    triangle(550, 450, 600, 450, 575, grassHeight)



}