Invitation Card - OpenProcessing

mySketch
xxxxxxxxxx
 
let nameInput, surnameInput, submitButton;
let showCard = false;
let userName = "";
let welcomeBg, invitationBg, decoration1, decoration2, reindeerImg;
let fairyLights = [];
let snowflakes = [];
let lightsBlinking = true;
let christmasTune;
​
function preload() {
  // Load festive images 
  welcomeBg = loadImage('bg.jpg');
  invitationBg = loadImage('bg2.jpg');
  decoration1 = loadImage('festive1.jpg');
  decoration2 = loadImage('festive2.jpg');
  reindeerImg = loadImage('reindeer.jpg');
​
  // Load sound
  christmasTune = loadSound('christmas-holidays-270797.mp3');
}
​
​
function setup() {
  createCanvas(800, 600);
​
  // Create input fields and button
  nameInput = createInput();
  nameInput.position(750, 60);
  nameInput.attribute('placeholder', 'Enter your Name');
​
  surnameInput = createInput();
  surnameInput.position(750, 90);
  surnameInput.attribute('placeholder', 'Enter your Surname');
​
  submitButton = createButton('Open Invitation');
  submitButton.position(780, 120);
  submitButton.mousePressed(openInvitation);
​
  // Create initial snowflakes
  for (let i = 0; i < 100; i++) {
    snowflakes.push(new Snowflake());
  }
​
  // Create fairy lights
  for (let i = 50; i <= width - 50; i += 100) {
    fairyLights.push(new FairyLight(i, 50));
  }
}
​
function draw() {
  if (showCard) {
    drawInvitationCard();
  } else {
    drawGreeting();
  }
}
​
function drawGreeting() {
  background(welcomeBg); // Festive welcome background
  fill('#800000');
  textSize(32);
  textAlign(CENTER);
  text("Welcome because YOU are SpEciAl ;p", width / 2, 200);
}
​
function openInvitation() {
  userName = nameInput.value() + " " + surnameInput.value();
  if (userName.trim() !== "") {
    showCard = true;
    nameInput.hide();
    surnameInput.hide();
    submitButton.hide();
  }
}
​
function drawInvitationCard() {
  background(invitationBg); // Invitation background
​
  // Decorations
  image(decoration1, 50, 100, 150, 150);
  image(decoration2, width - 200, 100, 150, 150);
​
​
  // "Merry Christmas!" text centered between decorations
  fill(0);
  textSize(48);
  textAlign(CENTER);
  text("Merry Christmas!", width / 2, 275);
​
  fill('#800000')
  textSize(32);
  text(`Dear ${userName},`, width / 2, 310);
  text("You are warmly invited to celebrate with me BESTIE;)", width / 2, 340);
​
  // Draw snowflakes
  for (let flake of snowflakes) {
    flake.update();
    flake.display();
  }
​
  // Draw fairy lights
  for (let light of fairyLights) { //press keyboard to make lights blink
    light.display();
  }
​
  // Draw reindeer image
  image(reindeerImg, width / 2 - 75, 450, 150, 150);
}
​
function keyPressed() {
  lightsBlinking = !lightsBlinking; // Toggle lights blinking
}
​
function mousePressed() {
  // Play Christmas tune if reindeer clicked
  if (mouseX >= width / 2 - 75 && mouseX <= width / 2 + 75 &&
    mouseY >= 450 && mouseY <= 600) {
    if (!christmasTune.isPlaying()) {
      christmasTune.play();
    }
  }
}
​
// Snowflake class
class Snowflake {
  constructor() {
    this.x = random(width);
    this.y = random(-height, 0);
    this.size = random(3, 7);
    this.speed = random(0.5, 1.5);
  }
​
  update() {
    this.y += this.speed;
    if (this.y > height) {
      this.y = random(-height, 0);
      this.x = random(width);
    }
  }
​
  display() {
    noStroke();
    fill(255, 255, 255, 200);
    ellipse(this.x, this.y, this.size, this.size);
  }
}
​
// Fairy Light class
class FairyLight {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.on = true;
  }
​
  display() {
    if (lightsBlinking) {
      this.on = frameCount % 60 < 30;
    }
​
    fill(this.on ? color(255, 223, 0) : color(100, 100, 100));
    noStroke();
    ellipse(this.x, this.y, 20, 20);
  }
}