This was a fun holiday twist. Christmas is my favorite holiday and I thought the snow globe allowed me to show many aspects of what I had learned. This was by far the most detailed, but I am very happy with the results! The twinkling lights and the falling snow shows a different aspect of motion and random generation than the previous ones.
/* Luna Jerjees
The spirit of Christmas
*/
let snowflakes = []; //array of objects
/*
*initialize canvas
* initialize the given array with Snow class objects
*/
function setup() {
createCanvas(600, 600);
for (let i = 0; i < 80; i++) {
snowflakes[i] = new Snow(random(150,450),random(80,300), random(1,6)); //using randomized values for the x,y position and flakesize
}
}
/*
*
*/
function draw() {
background('white');//background color
stripes(); //function call for background
horizStripes(); //function call for background
properties('#8fd1f4', '#6ec4f1', 10);
//color of the globe
circle(300,235,405); //globe
createBase(); //function call to create base
//create trees at given positions and sizes
tree(160, 295, 80, 195, 20, 70);
tree(270, 295, 80, 100, 20, 70);
tree(360, 295, 90, 150, 20, 70);
//create snowmen with given positions and variable sizes
snowMan(270,258,[40,50,60]);
snowMan(375,248,[40,60,80]);
frameRate(10);//reduce framerate for slower movement
//instantiate string light objects
stringLights(120,160,490,160);
stringLights(130,130,470,130);
stringLights(150,100,440,100);
//call for snow object functions to create snowflakes,
//begin the movement, and restart movement
for (let i = 0; i< snowflakes.length;i++){
snowflakes[i].snowflake();
snowflakes[i].movement();
snowflakes[i].stop();
}
//pile of snow on the ground
noStroke();
fill('white');
arc(300,351,335,100,radians(0),radians(180));
}
/*
* Snow object class
*/
class Snow {
// initialize coordinates and size
constructor(x,y,flakeSize){
this.x = x;
this.y = y;
this.flakeSize = flakeSize;
}
/*
* initialize individual snowflakes with white color
* and the shape as an ellipse at the specified position
*/
snowflake(){
properties('white', 'white', 4);
ellipseMode(CENTER);
ellipse(this.x,this.y,this.flakeSize);
}
/*
* Function which controls the downward movement of each snowflake
*/
movement(){
//when the snowflake has not reached the snowpile/ground, increase //the y position to move down
if (this.y < 351){
this.y+= 7;
}
}
stop() {
if (this.y > 351){
//when the snowflake has reached the snowpile/ground,
//return to the top of the globe
this.x = random(150,450);
this.y= random(80,250);
}
}
}
/*
* Creates the string lights in the snowglobe
*param x1: the x coordinate of the beginning of each string of lights
*param y1: the y coordinate of the beginning of each string of lights
*param x2: the x coordinate of the end of each string of lights
*param y2: the y coordinate of the end of each string of lights
*/
function stringLights(x1,y1,x2,y2){
let lightColors = ['yellow', 'white', 'blue', 'red','green', 'pink','orange']; //array of colors
line(x1,y1,x2,y2);//create the string for the lights
let spacing = 20; //spacing between each light
let tempX = x1;
for (let i = 0; i <= (x2-x1)/spacing;i++) {
//call to the helper function which creates each light
stringLightObject(tempX,y1,random(lightColors), 10,15);
tempX += spacing;
}
}
/*
* helper function for the string lights
*creates each light
*param x: x position of the light
*param y: y position of the light
*param color: the color of the light
*param ellipseW: the width of the light
*param ellipseH: the height of the light
*/
function stringLightObject(x,y,color, ellipseW,ellipseH){
properties(color,color,4);
ellipse(x,y+(ellipseH/2),ellipseW, ellipseH);
//creates each light, moves it down so that the light hangs off the string
}
/*
*creates the snowman
param: x: the x coord of the center
param: y: the y coord of the center
param: circleDiameters: array of diameters for the body of the snowman
*/
function snowMan(x,y,circleDiameters){
let xTemp = x;
let yTemp = y;
properties('white','white',2);
//create each snowman with three circles for the body
for (let i = 0; i < circleDiameters.length; i++) {
circle(xTemp,yTemp,circleDiameters[i]);
yTemp += 40;
}
properties('black', 'black', 3);
circle(x-7,y-5,3); //creates the left eye
circle(x+7,y-5,3); //creates the right eye
/// creates the smile of the snowman
let start = x-10;
let firstVal = y+7;
let incr = 0;
for(let i = 0; i < 5; i++){
if (i < 3){
//going from the left to the middle
point(start, firstVal+=incr);
incr=2;
start+=5;
}
else {
//from the right side going to the middle
incr= 2;
point(start, firstVal -= incr);
start+=5;
}
}
///
circle(x,y+35,7); //creates the buttons
circle(x,y+55,7);
circle(x,y+75,7);
}
/*
* Creates a tree when called given the positions and height and width
*
param: x: the x coord of the left corner vertex
param: y: the y coord of the left corner vertex
param: w: the width of the tree
param: h: the height of the tree
param: bw: the width of the trunk
param: bh: the height of the trunk
*/
function tree(x,y, w, h, bw, bh){
properties('brown','brown',9);
rect(((x+(x+w))/2)-10, y, bw, bh);
properties('green','green',9);
triangle(x, y, x+w, y, (x+w)-(w/2), y-h);
}
/*creates the vertical stripes in the background
*/
function stripes(){
properties('red','red',12);
let newInc1= 50;
let coord1 = 0;
let coord2 = 0;
line(coord1, 0, coord2, 600);//initial line
for (let i = 0; i < 25; i++){
line(coord1 += newInc1,0,coord2 += newInc1,600);
//each incremented line on the vertical axis
}
}
/*creates the horizontal stripes in the background
*/
function horizStripes(){
properties('red','red',12);
let newInc1= 50;
let coord1 = 0;
let coord2 = 0;
line(0, coord1, 600, coord2);
//initial line
for (let i = 0; i < 25; i++){
line(0, coord1 += newInc1,600, coord2 += newInc1);
//each incremented line on the horizontal axis
}
}
/*
* function to create base of the snowglobe
*/
function createBase(){
//creates the black base by using a custom shape at specified vertices
properties('black', 'black', 2);
beginShape();
vertex(100,600);
vertex(150,370);
vertex(450,370);
vertex(500,600);
vertex(100,600);
endShape();
//creates the grey front base by using a custom shape at specified vertices
fill('grey');
beginShape();
vertex(140,560);
vertex(190,420);
vertex(410,420);
vertex(450,560);
vertex(140,560);
endShape();
//addition of text in the center of the base
textAlign(CENTER);
properties('red','black',3);
textSize(45);
text('Christmas',300,490);
text('2021', 300, 530);
}
/* Sets properties in color and stroke size when called
*
* param fillCol: the color of the fill of the shape
* param strokeCol: the color of the stroke
* param strokeWgt: the size of the individual stroke
*/
function properties(fillCol, strokeCol, strokeWgt){
// if no fill required, leave empty
if (fillCol === ''){
noFill();
}
if (fillCol) { //otherwise, set the specified color
fill(fillCol);
}
if (strokeCol === ''){ //if the stroke color is left empty, set to white
stroke(255);
}
if (strokeCol) { //otherwise, set given color
stroke(strokeCol);
}
strokeWeight(strokeWgt);
}
