let customFont;

let decorations = [];

let enterButton;

​

function preload() {

  // Load the background image

  backgroundimg = loadImage("wall2-1.jpeg");

  customFont = loadFont("BebasNeue-Regular.ttf");

}

​

function setup() {

  createCanvas(650, 700);

  decorations.push(new DoricTemple());

  decorations.push(new Title());

  decorations.push(new Lantern());

  decorations.push(new Candle(118, 480));

  decorations.push(new Candle(522, 480));

  decorations.push(new EnterButton());

  enterButton = new EnterButton();

}

​

function draw() {

  // Display the background image

  image(backgroundimg, 30, 10, width, height);

​

  for (let decoration of decorations) {

    decoration.display();

  }

}

​

class DoricTemple {

  display() {

    // Color same as title

    fill(196, 164, 132);

​

    // Temple 1

    // Middle left 

    rect(85, 520, 70, 160);

    // Line 1

    rect(95, 520, 10, 160);

    // Line 2

    rect(135, 520, 10, 160);

    // Line 3

    rect(115, 520, 10, 160);

    // Lower left

    rect(55, 660, 130, 30);

    // Upper left

    rect(60, 500, 120, 20);

​

    // Temple 2

    // Middle right

    rect(488, 520, 70, 160);

​

    // Lines on the middle

    // Line 1

    rect(500, 520, 10, 160);

    // Line 2

    rect(540, 520, 10, 160);

    // Line 3

    rect(520, 520, 10, 160);

    // Lower right

    rect(455, 660, 130, 30);

    // Upper right

    rect(464, 500, 120, 20);

  }

}

​

class Title {

  display() {

    textFont(customFont); // Set the custom font

    textSize(36); // Set the text size

    fill(255); // Set the text color 

    stroke(111, 78, 55); // Set the outline color 

    strokeWeight(20); // Set the outline thickness

    textAlign(CENTER, TOP); // Center the text horizontally and vertically

    text("The Underground Archives of Wisdom", width / 1.9, height / 5);

  }

}

​

class Lantern {

  display() {

    // Lantern 1

    fill(193, 154, 107);

    strokeWeight(5);

    triangle(85, 450, 121, 420, 151, 450);

    triangle(485, 455, 525, 424, 560, 455);

    noFill();

    circle(121, 418, 15);

    circle(524, 422, 15);

    strokeWeight(9);

    rect(90, 453, 55, 43);

    rect(495, 455, 55, 43);

    //for the candles

    rect(115,485,5,10);

    rect(520,485,5,10);

​

    strokeWeight(4);

  }

}

class EnterButton {

  constructor() {

    this.xPos = 260;

    this.yPos = 300;

    this.width = 115;

    this.height = 45;

    this.locked = false;

    this.isHovered = false; // Flag to track hover state

  }

​

  display() {

    // Check if the mouse is hovering over the button

    if (

      mouseX >= this.xPos &&

      mouseX <= this.xPos + this.width &&

      mouseY >= this.yPos &&

      mouseY <= this.yPos + this.height

    ) {

      this.isHovered = true;

      if (!this.locked) {

        stroke(123, 63, 0);

        fill(255, 165, 0);

      }

    } else {

      stroke(111, 78, 55);

      fill(196, 164,132);

      this.isHovered = false;

    }

​

    // Draw the button based on hover state

    strokeWeight(6);

    rect(this.xPos, this.yPos, this.width, this.height);

​

    // Display text inside the rectangle

    textSize(30); // Set the text size

    fill(255); // Set the text color to white

    textAlign(CENTER, CENTER); // Center the text horizontally and vertically

    text("Enter", this.xPos + this.width / 2, this.yPos + this.height / 2); // Display "Enter" at the specified coordinates

    stroke(111, 78, 55);

  }

}

​

​

// mousePressed function 

//function mousePressed() {

 // if (enterButton.isHovered) {

    // Perform an act when the button is clicked

    // next scene or elements to present the next scene 

    //console.log("Button clicked!");

//  }

//

​

​

class Candle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.flameHeight = 0;

    this.flameWidth = 0;

    this.lightSize = 0;

  }

​

  display() {

    // Simulate flickering flame with noise

    let flicker = noise(frameCount * 0.05) * 10;

​

    // Adjust flame height and width based on flicker

    this.flameHeight = 10 + flicker;

    this.flameWidth = 5 + flicker * 0.2;

​

    // Draw the candle flame as an ellipse

    strokeWeight(2.4);

    fill(255, 165, 0); // Orange color for the flame

    ellipse(this.x, this.y - this.flameHeight / 2, this.flameWidth, this.flameHeight);

​

    // Size and position of the light ellipse based on flicker

    this.lightSize = 100 + flicker * 8; //  scaling factor as needed

    fill(255, 95, 0, 31); // Transparent orange color for the light

    noStroke();

    ellipse(this.x, this.y - this.flameHeight / 2, this.lightSize, this.lightSize);

    stroke(111, 78, 55);

    strokeWeight(3.3);

  }

}

​

​

​

​

​