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.
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)
}