//music from https://soundcloud.com/beepcode/free-downloadjingle-bells-full-royalty-free-music-background-music-christmas-music

​

let xmasTreePic;

let snowPic;

let snow = [];

let gravity;

let zOff = 0;

let glowPic;

// let wGlowPosX = [273, 288, 338, 335, 321, 222, 342, 202, 253, 385, 166, 312, 417, 281, 228, 357, 425]; //from top to bottom, left to right 

// let wGlowPosY = [108, 137, 156, 207, 237, 295, 302, 320, 373, 376, 412, 432, 420, 445, 462, 481, 471];

// let cGlowPosX = [310, 303, 258, 317, 268, 305, 245, 358, 269, 222, 368, 375, 276, 312, 377, 355, 276, 196, 212, 338, 408, 202, 260, 365, 426, 392, 400, 197, 268]; //from top to bottom, left to right 

// let cGlowPosY = [76, 103, 155, 168, 178, 189, 210, 213, 243, 260, 275, 274, 299, 318, 322, 335, 345, 355, 366, 385, 372, 425, 413, 426, 415, 432, 450, 472, 489];

let GlowPosX = [310, 273, 303, 288, 258, 338, 317, 268, 305, 245, 335, 358, 269, 321, 222, 368, 375, 222, 276, 342, 202, 312, 377, 355, 276, 196, 253, 212, 385, 338, 166, 408, 202, 312, 260, 417, 281, 365, 228, 426, 392, 400, 197, 268, 357, 425]; //from top to bottom, left to right 

let GlowPosY = [76, 108, 103, 137, 155, 156, 168, 178, 189, 210, 207, 213, 243, 237, 260, 275, 274, 295, 299, 302, 320, 318, 322, 335, 345, 355, 373, 366, 376, 385, 412, 372, 425, 432, 413, 420, 445, 426, 462, 415, 432, 450, 472, 489, 481, 471];

let bColors = ['#fd4a48', '#14f6a1', '#f7f033', '#50c9d2', '#F0200E'];

let tColors = ['#fd4a48', '#159338', '#E03A1B'];

let bIndex = 0;

let xmasMusic;

let bellFade = 100;

let bellLPic;

let bellRPic;

let bellMPic;

let bellRotateA = 0;

let snowflakePic;

let textPts;

let font;

let textIndex = 0;

let textBG;

let cardPic;

let cardOpenPic;

let cardRotateA;

let cardIcon;

let drawCard = false;

​

function preload() {

  xmasTreePic = loadImage('xmas tree no base.png');

  snowPic = loadImage('snow.png');

  glowPic = loadImage('glow.png');

  bellLPic = loadImage('bellL.png');

  bellRPic = loadImage('bellR.png');

  bellMPic = loadImage('bellM.png');

  snowflakePic = loadImage('snowflake.svg');

  cardPic = loadImage('card.svg');

  cardOpenPic = loadImage('cardOpen.svg');

  soundFormats('mp3');

  xmasMusic = loadSound('jingleBell.mp3');

  font = loadFont('DancingScript-Bold.ttf');

}

​

function setup() {

  createCanvas(600, 600);

  textBG = createGraphics(600, 600);

  textBG.background(0, 0, 0, 0);

  gravity = createVector(0, 0.03);

​

  for (let i = 0; i < 220; i++) {

    let x = random(width);

    let y = random(height);

    snow.push(new Snowflake(x, y));

  }

​

  textPts = font.textToPoints('Merry Christmas', 0, 0, 76, {

    sampleFactor: 0.6,

    simplifyThreshold: -5

  });

  // xmasMusic.play();

  cardIcon = cardPic;

}

​

function draw() {

  background(240);

  push();

  imageMode(CENTER);

  image(snowPic, 300, 520, 950.5, 160);

  image(xmasTreePic, 300, 315, 420, 620);

​

  zOff += 0.1;

​

  for (flake of snow) {

    let xOff = flake.pos.x / width;

    let yOff = flake.pos.y / height;

    let wAngle = noise(xOff, yOff, zOff) * TWO_PI;

    let wind = p5.Vector.fromAngle(wAngle);

    wind.mult(0.015);

​

    flake.applyForce(gravity);

    flake.applyForce(wind);

    flake.update();

    flake.render();

  }

​

  //add black fading

  // noStroke();

  // fill(0, fade); //130

  // rect(0, 0, 600, 600);

​

  //lights

  push();

  // color lights

  // for (let i = 0; i <= GlowPosX.length; i++) {

  //     let w = round(i + frameCount / 30);

  //    tint(bColors[w % bColors.length]);

  //   image(glowPic, GlowPosX[i], GlowPosY[i], 40, 40);

  // };

  for (let i = 0; i <= GlowPosX.length; i++) {

    let w = round(i + frameCount / 30);

    tint(bColors[w % bColors.length]);

  };

​

  if (frameCount % 8 == 0) bIndex++;

  if (bIndex >= GlowPosX.length) bIndex = 0;

  image(glowPic, GlowPosX[bIndex], GlowPosY[bIndex], 40, 40);

  //white lights

  // tint('#f7f0e6');

  // for (let a = 0; a <= wGlowPosX.length; a++) {

  //   image(glowPic, wGlowPosX[a], wGlowPosY[a], 55, 55);

  // }

  pop();

​

  //bell symbol

  push();

  translate(30, 30);

  rotate(PI * sin(bellRotateA) / 4);

  tint(255, bellFade);

  image(bellMPic, 0, 0, 30, 30);

  pop();

​

  fill('#573A31');

  noStroke();

  textFont(font, 20);

  //hover effect for the bell symbol

  if (mouseX >= 15 && mouseX <= 45 && mouseY >= 15 && mouseY <= 45) {

    bellRotateA += PI / 26;

    text('music', 52, 35);

  } else {

    bellRotateA = 0;

  }

​

  //card symbol

  push();

  translate(30, 70);

  rotate(PI * sin(cardRotateA) / 4);

  image(cardIcon, 0, 0, 26, 26);

  pop();

​

  //hover effect for the card symbol

  if (mouseX >= 17 && mouseX <= 43 && mouseY >= 57 && mouseY <= 83) {

    cardRotateA += PI / 26;

    text('card', 52, 75);

  } else {

    cardRotateA = 0;

  }

​

  pop();

​

  //draw card 

  if(drawCard){

  push();

  fill(255, 180);

  noStroke();

  rect(30, 220, 540, 280);

  textFont(font, 20);

  fill('#159338');

  text('Thanks for all the support and love over the year! I am grateful to \n have you in my life. May this Christmas bring you and your family \n much joy and happiness.', 50, 370);

  text('-Dan', 490, 450);

  textBG.noStroke();

  for (let o = 0; o < textIndex; o++) {

    let k = round(o + frameCount / 30);

    textBG.fill(tColors[k % tColors.length]);

  }

  textBG.circle(textPts[textIndex].x + 56, textPts[textIndex].y + 320, 2.5);

  textIndex++;

  if (textIndex >= textPts.length) textIndex = textPts.length - 1;

  image(textBG, 0, 0);

    cardIcon = cardOpenPic;

  pop();

  }else{

    cardIcon = cardPic;

  }

}

​

function mousePressed() {

  //play music button

  if (mouseX >= 15 && mouseX <= 45 && mouseY >= 15 && mouseY <= 45 && xmasMusic.isPlaying()) {

    xmasMusic.stop();

    bellFade = 100;

  } else if (mouseX >= 15 && mouseX <= 45 && mouseY >= 15 && mouseY <= 45) {

    xmasMusic.play();

    bellFade = 255;

  };

​

  //open card button

  if (mouseX >= 17 && mouseX <= 43 && mouseY >= 57 && mouseY <= 83) {

    drawCard = !drawCard;

  };

}