Final Project - OpenProcessing

mySketch
xxxxxxxxxx
 
let passportImage;
let londonImage, istanbulImage, tokyoImage, parisImage, madridImage;
let shapes = []; // Array to store dynamic shapes
let ticketW = 150, ticketH = 100; // Increased ticket size
let tickets = []; // Array to store ticket positions
​
let currentPage = "main"; // Tracks current page
let activeCity = ""; // Tracks the selected city
let loraFont;
​
let bgMusic; // Background music
​
function preload() {
  passportImage = loadImage('passport.png');
  londonImage = loadImage('london.png');
  istanbulImage = loadImage('istanbul.png');
  tokyoImage = loadImage('tokyo.png');
  parisImage = loadImage('paris.png'); // Load Paris ticket
  madridImage = loadImage('madrid.png'); // Load Madrid ticket
​
  loraFont = loadFont('Lora-Regular.ttf'); // Load Lora font
  bgMusic = loadSound('621091__yellowtree__90s-smooth-funk.wav'); // Load background music
}
​
function setup() {
  createCanvas(800, 600);
​
  // Play the background music in a loop
  bgMusic.loop();
  bgMusic.setVolume(0.5); // Adjust the volume if needed
​
  // Generate colorful shapes for the background
  for (let i = 0; i < 50; i++) {
    shapes.push({
      x: random(width),
      y: random(height),
      size: random(20, 100),
      type: random(["circle", "rect", "triangle"]),
      color: color(random(150, 255), random(100, 255), random(100, 255), 180), // Vibrant colors
      speedX: random(-0.5, 0.5), // Slower movement
      speedY: random(-0.5, 0.5), // Slower movement
    });
  }
​
  // Define positions for tickets as "stamps" within the passport image
  tickets.push({ x: 510, y: 300, city: "London", img: londonImage });
  tickets.push({ x: 150, y: 300, city: "Istanbul", img: istanbulImage });
  tickets.push({ x: 330, y: 350, city: "Tokyo", img: tokyoImage });
  tickets.push({ x: 180, y: 150, city: "Paris", img: parisImage }); // Add Paris ticket
  tickets.push({ x: 400, y: 180, city: "Madrid", img: madridImage }); // Add Madrid ticket
}
​
function draw() {
  if (currentPage === "main") {
    drawDynamicBackground();
    drawMainPage();
  } else if (currentPage === "cityPage") {
    drawDynamicBackground();
    drawCityPage(activeCity);
  }
}
​
function drawDynamicBackground() {
  background(50, 50, 120); // Darker background
​
  // Draw dynamic shapes
  for (let s of shapes) {
    fill(s.color);
    noStroke();
​
    if (s.type === "circle") {
      ellipse(s.x, s.y, s.size);
    } else if (s.type === "rect") {
      rect(s.x, s.y, s.size, s.size, 10); // Rounded rectangles
    } else if (s.type === "triangle") {
      triangle(
        s.x, s.y - s.size / 2,
        s.x - s.size / 2, s.y + s.size / 2,
        s.x + s.size / 2, s.y + s.size / 2
      );
    }
​
    // Move shapes
    s.x += s.speedX;
    s.y += s.speedY;
​
    // Wrap around edges
    if (s.x < 0) s.x = width;
    if (s.x > width) s.x = 0;
    if (s.y < 0) s.y = height;
    if (s.y > height) s.y = 0;
  }
}
​
function drawMainPage() {
  // Title at the top
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(40);
  textFont(loraFont);
  text("Explore the World !", width / 2, 60); // Title above the passport
​
  // Passport Image
  let imgWidth = passportImage.width * 1.5;
  let imgHeight = passportImage.height * 1.5;
  let imgX = (width - imgWidth) / 2;
  let imgY = (height - imgHeight) / 2;
  image(passportImage, imgX, imgY, imgWidth, imgHeight);
​
  // Display tickets (stamps)
  for (let t of tickets) {
    image(t.img, t.x, t.y, ticketW, ticketH);
    if (mouseOverStamp(t.x, t.y)) cursor(HAND);
  }
}
​
function drawCityPage(city) {
  // Muted, calming center rectangle for text
  drawingContext.shadowOffsetX = 5;
  drawingContext.shadowOffsetY = 5;
  drawingContext.shadowBlur = 10;
  drawingContext.shadowColor = 'rgba(0, 0, 0, 0.5)';
  
  fill(255, 255, 255, 220); // Muted white with transparency
  rectMode(CENTER);
  rect(width / 2, height / 2, 700, 450, 15); // Adjusted size and rounded corners
​
  // Reset shadow after the rectangle is drawn
  drawingContext.shadowOffsetX = 0;
  drawingContext.shadowOffsetY = 0;
  drawingContext.shadowBlur = 0;
​
  // City Title
  fill(70);
  textAlign(CENTER, CENTER);
  textSize(45);
  textFont(loraFont);
  text(city, width / 2, height / 2 - 180); // Title positioned at the top of the box
​
  // City Information
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(16);
  textFont(loraFont);
  let cityInfo = "";
​
  if (city === "London") {
    cityInfo =
      "London is a global city blending history and modernity.\n\n" +
      "- Visit the iconic Tower of London, a UNESCO World Heritage Site.\n" +
      "- Stroll through Hyde Park, one of the city's eight royal parks.\n" +
      "- Explore Camden Market for unique finds.\n" +
      "- Discover the British Museum, housing treasures like the Rosetta Stone.\n\n" +
      "Did you know? London has over 170 museums, making it a paradise for history buffs!";
  } else if (city === "Istanbul") {
    cityInfo =
      "Istanbul, where East meets West, is rich in history and culture.\n\n" +
      "- Explore Hagia Sophia, a marvel of Byzantine architecture.\n" +
      "- Stroll through the vibrant streets of Istiklal Avenue.\n" +
      "- Savor Turkish cuisine at local eateries.\n" +
      "- Take a ferry ride on the Bosphorus to enjoy stunning views of two continents.\n\n" +
      "Fun fact: Istanbul spans two continents, Europe and Asia!";
  } else if (city === "Tokyo") {
    cityInfo =
      "Tokyo, Japan's capital, is a blend of tradition and innovation.\n\n" +
      "- Witness the bustling energy at Shibuya Crossing.\n" +
      "- Indulge in fresh sushi at Tsukiji Market, the world's largest seafood market.\n" +
      "- Visit the serene Meiji Shrine nestled in a lush forest.\n" +
      "- Experience Akihabara, the hub of otaku culture and electronics.\n\n" +
      "Interesting fact: Tokyo is home to more Michelin-starred restaurants than any other city.";
  } else if (city === "Paris") {
    cityInfo =
      "Paris, the city of love and lights, is a cultural treasure.\n\n" +
      "- Admire the Gothic beauty of Notre-Dame Cathedral.\n" +
      "- Walk along the Champs-Élysées, one of the world's most famous avenues.\n" +
      "- Discover the treasures of the Louvre Museum, including the Mona Lisa.\n" +
      "- Savor croissants and coffee at charming Parisian cafes.\n\n" +
      "Did you know? Paris has over 1,500 bakeries making world-class pastries!";
  } else if (city === "Madrid") {
    cityInfo =
      "Madrid, Spain's vibrant capital, is full of energy and history.\n\n" +
      "- Visit the Royal Palace, the largest in Europe by floor area.\n" +
      "- Explore the art collections of the Prado Museum.\n" +
      "- Enjoy traditional tapas in bustling local markets.\n" +
      "- Experience the lively atmosphere of Plaza Mayor.\n\n" +
      "Fun fact: Madrid has the oldest restaurant in the world, Sobrino de Botín, which opened in 1725!";
  }
​
  // Display city info centered in the rectangle
  text(cityInfo, width / 2, height / 2, 600, 300); // Centered paragraph text
​
  // Back Button (Aesthetic change)
  fill(100, 150, 200); // Soothing blue shade
  rectMode(CORNER);
  rect(20, 20, 80, 30, 5);
  fill(255);
  textSize(16);
  textAlign(CENTER, CENTER);
  text("Back", 20 + 40, 20 + 15);
}
​
function mousePressed() {
  if (currentPage === "main") {
    for (let t of tickets) {
      if (mouseOverStamp(t.x, t.y)) {
        activeCity = t.city;
        currentPage = "cityPage";
      }
    }
  } else if (currentPage === "cityPage" && mouseOverBackButton()) {
    currentPage = "main";
  }
}
​
function mouseOverStamp(x, y) {
  return mouseX > x && mouseX < x + ticketW && mouseY > y && mouseY < y + ticketH;
}
​
function mouseOverBackButton() {
  return mouseX > 20 && mouseX < 100 && mouseY > 20 && mouseY < 50;
}
​
​