let exteriorImg;

let interiorImg;

​

​

// coordinates of the art gallery's door

const DOOR_COORDS = { left: 345, right: 445, top: 345, bottom: 480 };

​

// coordinates of the paintings

const PAINTINGS  = [

  {

    left: 90,

    right: 225,

    top: 60,

    bottom: 245,

  },

  {

    left: 310,

    right: 455,

    top: 60,

    bottom: 245,

  },

  {

    left: 516,

    right: 765,

    top: 60,

    bottom: 245,

  },

];

​

// each scene consists of clickables on which the user can click,

// and a draw function which is called when the scene is active

const scenes = {

  exterior: {

    clickables: [{name: "Door", coords: DOOR_COORDS, onClick: () => {

      activeScene = scenes.interior;

    }}],

    draw: () => {

      image(exteriorImg, 0, 0, width, height);

    }

  },

  interior: {

    clickables: [

      {name: "Painting 1", coords: PAINTINGS[0], onClick: () => {

        activeScene = scenes.painting1;

      }},

      {name: "Painting 2", coords: PAINTINGS[1], onClick: () => {

        activeScene = scenes.painting2;

      }},

      {name: "Painting 3", coords: PAINTINGS[2], onClick: () => {

        activeScene = scenes.painting3;

      }},

    ],

    draw: () => {

      image(interiorImg, 0, 0, width, height);

    }

  },

  painting1: {

    clickables: [],

    draw: () => {

      // draw hundred circles of random radii at random coordinates

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

        // random coordinates

        let x = random(width);

        let y = random(height);

        // random radius

        let r = random(10, 50);

        // random color with some translucency

        let fillColor = color(random(255), random(255), random(255), 100);

​

        // draw the painted circle

        fill(fillColor);

        noStroke();

        ellipse(x, y, r * 2, r * 2);

      }

    }

  },

  painting2: {

    clickables: [],

    draw: () => {

      background(0);

      fill(255);

      textSize(32);

      textAlign(CENTER, CENTER);

      text("Not Implemented Yet", width / 2, height / 2);

    }

  },

  painting3: {

    clickables: [],

    draw: () => {

      background(0);

      fill(255);

      textSize(32);

      textAlign(CENTER, CENTER);

      text("Not Implemented Yet", width / 2, height / 2);

    }

  },

}

​

// the scene which is currently active

let activeScene = scenes.exterior;

​

function preload() {

  exteriorImg = loadImage('assets/gallery/exterior.jpeg');

  interiorImg = loadImage('assets/gallery/interior.jpeg');

}

​

function setup() {

  createCanvas(800, 600);

  noStroke();

}

​

function draw() {

  activeScene.draw();

}

​

function isClicked(clickable) {

  const {left, right, top, bottom} = clickable.coords;

  return mouseX >= left && mouseX <= right && mouseY >= top && mouseY <= bottom;

}

​

function mouseClicked() {

  for(let clickable of activeScene.clickables) {

    if(isClicked(clickable)) {

      clickable.onClick();

      break;

    }

  }

}