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;
let colorPicker;
let reindeerButton, lightsButton;
​
function preload() {
  // Load festive images 
  welcomeBg = loadImage('bg.jpg'); // Welcome screen background
  invitationBg = loadImage('bg2.jpg'); // Invitation screen background
  decoration1 = loadImage('festive1.jpg'); // Decoration image 1
  decoration2 = loadImage('festive2.jpg'); // Decoration image 2
  reindeerImg = loadImage('reindeer.jpg'); // Reindeer image
​
  // Load sound
  christmasTune = loadSound('christmas-holidays-270797.mp3'); // Background music
}
​
function setup() {
  createCanvas(800, 600); // Fixed canvas size
​
  // Create input fields and button
  nameInput = createInput();
  nameInput.position(width - 250, 90);
  nameInput.attribute('placeholder', 'Enter your Name'); // Placeholder text for name
​
  surnameInput = createInput();
  surnameInput.position(width - 250, 120);
  surnameInput.attribute('placeholder', 'Enter your Surname'); // Placeholder text for surname
​
  submitButton = createButton('Open Invitation');
  submitButton.position(width - 220, 150);
  submitButton.mousePressed(openInvitation); // Button to open the invitation
​
  // Create initial snowflakes
  for (let i = 0; i < 100; i++) {
    snowflakes.push(new Snowflake()); // Adding snowflakes to the array
  }
​
  // Create fairy lights
  for (let i = 50; i <= width - 50; i += 100) {
    fairyLights.push(new FairyLight(i, 50)); // Distributing lights evenly across the top
  }
​
  // Create a color picker for the lights
  colorPicker = createColorPicker('#ffdf00'); // Default color for lights
  colorPicker.position(width - 200, 190); // Positioning color picker
}
​
function draw() {
  if (showCard) {
    drawInvitationCard(); // Show invitation card
  } else {
    drawGreeting(); // Show welcome screen
  }
}
​
function drawGreeting() {
  background(welcomeBg); // Festive welcome background
  fill('#800000'); // Text color
  textSize(32);
  textAlign(CENTER);
  text("just because YOU are SpEciAl ;p", width / 2, 200); // Welcome message
}
​
function openInvitation() {
  // Combine name and surname into a single string
  userName = nameInput.value() + " " + surnameInput.value();
  if (userName.trim() !== "") {
    showCard = true; // Display invitation card
    nameInput.hide();
    surnameInput.hide();
    submitButton.hide();
    colorPicker.hide(); // Hide UI elements
  }
}
​
function drawInvitationCard() {
  background(invitationBg); // Invitation background
​
  // Decorations
  image(decoration1, 50, 100, 150, 150); // Left decoration
  image(decoration2, width - 200, 100, 150, 150); // Right decoration
​
  // "Merry Christmas!" text centered between decorations
  fill(0); // Black text
  textSize(48);
  textAlign(CENTER);
  text("Merry Christmas!", width / 2, 275);
​
  fill('#800000'); // Burgundy text color
  textSize(32);
  text(`Dear ${userName},`, width / 2, 310); // Personalized greeting
  text("You are warmly invited to celebrate with me BESTIE;)", width / 2, 340);
​
  // Draw snowflakes
  for (let flake of snowflakes) {
    flake.update(); // Update position
    flake.display(); // Render snowflake
  }
​
  // Draw fairy lights
  for (let light of fairyLights) {
    light.setColor(colorPicker.color()); // Set light color based on user selection
    light.display(); // Render light
  }
​
  // Draw reindeer image
  image(reindeerImg, width / 2 - 75, height - 200, 150, 150); // Positioned at bottom center
​
  // Add reindeer interaction button
  if (!reindeerButton) {
    reindeerButton = createButton('Click the Reindeer to Play/Stop Music');
    reindeerButton.position(width / 2 + 45, height - 100);
    reindeerButton.mousePressed(() => {
      if (christmasTune.isPlaying()) {
        christmasTune.stop(); // Stop music
      } else {
        christmasTune.play(); // Play music
      }
    });
  }
​
  // Add lights toggle button
  if (!lightsButton) {
    lightsButton = createButton('Press Any Key to Toggle Lights On/Off');
    lightsButton.position(width / 2 + 45, height - 50);
    lightsButton.mousePressed(() => {
      lightsBlinking = !lightsBlinking; // Toggle lights blinking
    });
  }
}
​
function keyPressed() {
  lightsBlinking = !lightsBlinking; // Toggle lights blinking on key press
}
​
function mousePressed() {
  // Play or stop Christmas tune if reindeer clicked
  if (
    mouseX >= width / 2 - 75 &&
    mouseX <= width / 2 + 75 &&
    mouseY >= height - 200 &&
    mouseY <= height - 50
  ) {
    if (christmasTune.isPlaying()) {
      christmasTune.stop(); // Stop music
    } else {
      christmasTune.play(); // Play music
    }
  }
}
​
function windowResized() {
  resizeCanvas(800, 600); // Keep the canvas size fixed
  colorPicker.position(width - 220, 160); // Adjust color picker position
  nameInput.position(width - 250, 60); // Adjust name input position
  surnameInput.position(width - 250, 90); // Adjust surname input position
  submitButton.position(width - 220, 120); // Adjust button position
  if (reindeerButton) reindeerButton.position(width / 2 - 100, height - 50); // Adjust reindeer button position
  if (lightsButton) lightsButton.position(width / 2 + 50, height - 50); // Adjust lights button position
}
​
// Snowflake class
class Snowflake {
  constructor() {
    this.x = random(width); // Random initial x position
    this.y = random(-height, 0); // Random initial y position above the screen
    this.size = random(3, 7); // Random size for the snowflake
    this.speed = random(0.5, 1.5); // Random falling speed
  }
​
  update() {
    this.y += this.speed; // Move snowflake down
    if (this.y > height) {
      //  snowflake position when it goes off-screen
      this.y = random(-height, 0);
      this.x = random(width);
    }
  }
​
  display() {
    noStroke();
    fill(255, 255, 255, 200); // Semi-transparent white
    ellipse(this.x, this.y, this.size, this.size); // Draw snowflake
  }
}
​
// Fairy Light class
class FairyLight {
  constructor(x, y) {
    this.x = x; // Horizontal position
    this.y = y; // Vertical position
    this.on = true; // Initial state is "on"
    this.color = color(255, 223, 0); // Default color
  }
​
  setColor(newColor) {
    this.color = newColor; //  light color
  }
​
  display() {
    if (lightsBlinking) {
      this.on = frameCount % 60 < 30; // Toggle light state every 30 frames
    }
​
    fill(this.on ? this.color : color(100, 100, 100)); // Dim light if "off"
    noStroke();
    ellipse(this.x, this.y, 20, 20); // Draw light
  }
}