Press any key to see the snowman move, Click mouse to change snowman's clothes
xxxxxxxxxx
let snowflakes;
var valueR = 250;
var valueB = 249;
var valueG = 255;
var valueR2 = 250;
var valueB2 = 249;
var valueG2 = 255;
var valueR3 = 250;
var valueB3 = 249;
var valueG3 = 255;
var scarfR = 250;
var scarfB = 10;
var scarfG = 10;
var hatR = 59;
var hatB = 56;
var hatG = 56;
var bckgrndR = 176;
var bckgrndB = 202;
var bckgrndG = 255;
function preload(){
snowflakes = loadImage ('snowflakes.png');
}
function setup() {
createCanvas(400, 400);
}
function draw() {
//snowy background
background(bckgrndR, bckgrndB, bckgrndG);
noStroke();
//snowy ground
fill(250, 249, 240);
rect(0, 300, 400, 100);
fill(66, 69, 71);
ellipse(90, 355, 80, 15);
ellipse(-15, 355, 80, 15);
//sun
fill(237, 189, 78);
circle(60, 50, 55);
//sun rays
strokeWeight(5);
stroke(237, 189, 78);
line(60, 5, 60, 15); // top
line(100, 10, 85, 25); // top right
line(95, 50, 115, 50); // right
line(100, 90, 85, 75); //bottom right
line(60, 85, 60, 95); // bottom
line(20, 90, 35, 75); // bottom left
line(5, 50, 25, 50); // left
line(25, 10, 40, 25); // top left
//snowflakes image
imageMode(CENTER);
image(snowflakes, 57, 50);
//snow balls
strokeWeight(3);
stroke(225);
fill( valueR , valueB , valueG );
circle(200, 300, 120);
fill( valueR2 , valueB2 , valueG2 );
circle(200, 225, 95);
//scarf
fill(scarfR, scarfB, scarfG)
stroke(112, 6, 30);
rect(175, 180, 50, 20);
rect(200, 185, 20, 50);
//top head
strokeWeight(3);
stroke(225);
fill( valueR3 , valueB3 , valueG3 );
circle(200, 155, 80);
//face
fill(1);
noStroke();
ellipse(185, 150, 7, 10); // left eye
ellipse(215, 150, 7, 10); // right eye
//nose
fill(255, 112, 51);
triangle(195, 155, 200, 175, 205, 155);
//mouth
fill(1);
circle(177, 175, 5);
circle(185, 180, 5);
circle(195, 183, 5);
circle(205, 183, 5);
circle(213, 180, 5);
circle(220, 175, 5);
//arms
fill(89, 70, 60);
//base arms
strokeWeight(5);
stroke(89, 70, 60);
line(248, 220, 290, 195);
line(100, 195, 150, 220);
strokeWeight(3);
line(260, 200, 255, 215);
line(278, 185, 270, 205);
line(285, 215, 265, 210);
line(270, 225, 255, 215);
line(285, 199, 290, 185);
line(300, 200, 285, 200);
line(140, 190, 145, 215);
line(130, 225, 145, 215);
line(100, 215, 125, 210);
line(125, 180, 130, 210);
line(120, 185, 126, 192);
line(110, 185, 115, 200);
//hat
strokeWeight(3);
fill(hatR, hatB, hatG);
stroke(65);
ellipse(200, 125, 100, 14); //hat brim
rect(175, 60, 50, 64, 5, 5, 1, 1); //hat top
if (keyIsPressed === true){
//snowy background
background(bckgrndR, bckgrndB, bckgrndG);
noStroke()
//snowy ground
fill(250, 249, 240);
rect(0, 300, 400, 100);
//sun
fill(237, 189, 78);
circle(100, 50, 55);
fill(66, 69, 71);
ellipse(200, 355, 80, 15);
ellipse(90, 355, 80, 15);
ellipse(-15, 355, 80, 15);
//sun rays
strokeWeight(5);
stroke(237, 189, 78);
line(100, 5, 100, 15); // top
line(140, 10, 125, 25) // top right
line(135, 50, 155, 50); // right
line(140, 90, 125, 75); //bottom right
line(100, 85, 100, 95); // bottom
line(60, 90, 75, 75); // bottom left
line(45, 50, 65, 50); // left
line(65, 10, 80, 25); // top left
//snow balls
strokeWeight(3);
stroke(225);
fill( valueR , valueB , valueG );
circle(250, 300, 120);
fill( valueR2 , valueB2 , valueG2 );
circle(250, 225, 95);
//scarf
fill(scarfR, scarfB, scarfG);
stroke(112, 6, 30);
rect(225, 180, 50, 20);
rect(250, 185, 20, 50);
//top head
strokeWeight(3);
stroke(225);
fill( valueR3 , valueB3 , valueG3 );
circle(250, 155, 80);
//face
fill(1);
noStroke();
ellipse(235, 150, 7, 10); // left eye
ellipse(265, 150, 7, 10); // right eye
//nose
fill(255, 112, 51);
//middle x, middle y, bottom corner x, bottom corner y
triangle(245, 155, 250, 175, 255, 155);
//triangle(195, 155, 200, 175, 205, 155);
//mouth
fill(1);
circle(227, 175, 5);
circle(235, 180, 5);
circle(245, 183, 5);
circle(255, 183, 5);
circle(263, 180, 5);
circle(270, 175, 5);
//arms
fill(89, 70, 60);
//base arms
strokeWeight(5);
stroke(89, 70, 60);
line(298, 220, 340, 195);
line(150, 195, 200, 220);
strokeWeight(3);
line(310, 200, 305, 215);
line(328, 185, 320, 205);
line(335, 215, 315, 210);
line(320, 225, 305, 215);
line(335, 199, 340, 185);
line(350, 200, 335, 200);
line(190, 190, 195, 215);
line(180, 225, 195, 215);
line(150, 215, 175, 210);
line(175, 180, 180, 210);
line(170, 185, 176, 192);
line(160, 185, 165, 200);
//hat
strokeWeight(3);
fill(hatR, hatB, hatG);
stroke(65);
ellipse(250, 125, 100, 14); //hat brim
rect(225, 60, 50, 64, 5, 5, 1, 1); //hat top
//snowflakes image
imageMode(CENTER);
image(snowflakes, 70, 50);
}
}
function mouseClicked (){
if (valueR == 250){
valueR = random(255);
valueB = random (255);
valueG = random (100) }
else {
valueR = 250;
valueB = 249;
valueG = 255 }
if (valueR2 == 250){
valueR2 = random (100);
valueB2 = random (220);
valueG2 = random (90) }
else {
valueR2 = 250;
valueB2 = 249;
valueG2 = 255 }
if (scarfR == 250) {
scarfR = 115;
scarfB = 65;
scarfG = 181 }
else {
scarfR = 250;
scarfB = 10;
scarfG = 10 }
if (bckgrndR == 176){
bckgrndR = 111;
bckgrndB = 164;
bckgrndG = 242 }
else {
bckgrndR = 176;
bckgrndB = 202;
bckgrndG = 255 }
}