index.html

<!DOCTYPE html>
<!-- This is based on DillingerLee's great template here:
https://github.com/Team-Code/KA_Offline -->
<html> 
 <head>
    <title>Processing.JS inside Webpages: Template</title> 
</head>
 <body>
    <p align="center"> 
	<!--This draws the Canvas on the webpage -->
      <canvas id="mycanvas"></canvas> 
    </p>
 </body>
 
 <!-- Run all the JavaScript stuff -->
 <!-- Include the processing.js library -->
 <!-- See https://khanacademy.zendesk.com/hc/en-us/articles/202260404-What-parts-of-ProcessingJS-does-Khan-Academy-support- for differences -->
 <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> 
 
 <script>
    var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(400, 400); 
        frameRate(30);
        
        // ProgramCodeGoesHere
	     
	     
	     
// scalar variables
var yVelMin = 1;
var yVelMax = 3;
var sizeMin = 20;
var sizeMax = 25;
var nFlakes = 200;
var nLights = 10;

// array of objects; initialize empty
var bubbles = [];

// create Bubble object class
var Bubble = function() {
    this.xPos = round(random(0,width));
    this.yPos = -1*round(random(0,200));
    this.yVel = random(yVelMin,yVelMax);
    this.size = round(random(sizeMin,sizeMax));
    this.rgb = [1,1,1];
};

// function for drawing Bubbles
Bubble.prototype.display=function(){
    var bubbleColor=20;
    
    while (bubbleColor<256) {
        fill(bubbleColor*4+this.rgb[0]*200,bubbleColor*4+this.rgb[1]*200,bubbleColor*4+this.rgb[2]*200);
        ellipse(this.xPos,this.yPos,this.size-bubbleColor,this.size-bubbleColor);
        bubbleColor+=round(this.size/10); // sets gradient
    }
};

// initialize array for snowflakes
for (var i=0; i<nFlakes; i++) {
    bubbles.push({});
    bubbles[i] = new Bubble();
    bubbles[i].xPos = round(random(0,width));
    bubbles[i].yPos = -1*round(random(0,200));
    bubbles[i].yVel = random(yVelMin,yVelMax);
    bubbles[i].size = round(random(sizeMin,sizeMax));
}

// array for lights
var treelights=[]; var i=0;

var xPosArray=[200, 222, 180, 217, 247, 184, 253, 155, 220, 178, 155, 225, 200, 170, 250, 147];
var yPosArray=[320, 180, 200, 207, 193, 170, 265, 270, 290, 240, 200, 235, 270, 310, 315, 320];

for (var i = 0; i < xPosArray.length; i++) {
    // add object to lights array
    treelights.push({});
    treelights[i] = new Bubble();
    
    // fix velociy and size
    treelights[i].yVel=0;
    treelights[i].size=40;
    
    // set x/y positions to array values
    treelights[i].xPos = xPosArray[i];
    treelights[i].yPos = yPosArray[i];
    
    // generate random number to randomly set light color
    var randNum = floor(random(0,3));
    
    // set light color through object property
    treelights[i].rgb = [0,0,0];
    treelights[i].rgb[randNum] = 1;
}

// draw the image on loop
var t=0; // time variable
draw = function() {
    // draw sky
    background(0, 21, 84);
    
    // draw the ground
    fill(255,255,255);
    rect(0,height*3/4,width,height/4);
    
        // draw trunk / roots
    fill(82, 59, 6);
    triangle(width/2+80,height*8/8,width/2-80,height*8/8,width/2,height*6.2/8);
    fill(255,255,255);
    triangle(width/2,height*7/8,width/2+120,height,width/2-120,height);
    
    // draw limbs
    fill(21, 117, 5);
    for (var i = 0; i < 4; i++) {
        var limbSpacing = 0.12;
        var sizeChange = 0.10;
        var w=90;
        triangle(width/2,height*5.5/8*(0.9-i*limbSpacing),width/2,height*7.4/8*(0.9-i*limbSpacing),width/2-w*(1-i*sizeChange),height*7.7/8*(0.9-i*limbSpacing));
        triangle(width/2,height*5.5/8*(0.9-i*limbSpacing),width/2,height*7.4/8*(0.9-i*limbSpacing),width/2+w*(1-i*sizeChange),height*7.7/8*(0.9-i*limbSpacing));
    }
    
    t=t+0.01;
    if (t>0.5) {
        for (var i = 0; i < treelights.length; i++) {
            // generate random number to randomly set light color
            var randNum = floor(random(0,3));
            
            // set light color through object property
            treelights[i].rgb = [0,0,0];
            treelights[i].rgb[randNum] = 1;
            
            // reset t
            t=0;
        }
    }
    
    for (var i = 0; i < treelights.length; i++) {
            treelights[i].display();
    }
    
    // draw the snow on loop
    noStroke();
    fill(0, 200, 255);
    for (var i = 0; i < bubbles.length; i++) {
        bubbles[i].display();
        bubbles[i].yPos += bubbles[i].yVel;
        if (bubbles[i].yPos > height+20){
            bubbles[i].xPos=round(random(0,width));
            bubbles[i].yPos=round(random(-200,0));
            bubbles[i].yVel=random(yVelMin,yVelMax);
            bubbles[i].size=round(random(sizeMin,sizeMax));
        }
    }
    
    fill(255,255,255);
    textSize(30);
    textFont("Georgia");
    text("Yuletide",30,30);
    text("Greetings",60,60);
};
	     
	     
	     
    }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("mycanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc); 
 </script>

</html>