p5.js Web Editor | CityStyleScapes

xxxxxxxxxx
let bgImg1;
let bgImg2;
let desk1Img;
let desk2Img;
let bed1Img;
let bed2Img;
let animal1Img;
let animal2Img;
let art1Img;
let art2Img;
let rug1Img;
let rug2Img;
​
let fridge1Img;
let fridge2Img;
let stove1Img;
let stove2Img;
let table1Img;
let table2Img;
let chair1Img;
let chair2Img;
let plant1Img;
let plant2Img;
​
let sink1Img;
let sink2Img;
let toilet1Img;
let toilet2Img;
let shower1Img;
let shower2Img;
let decor1Img;
let decor2Img;
let mirror1Img;
let mirror2Img;
​
let door1Img;
let door2Img;
let window1Img;
let window2Img;
​
let whichButton;
let arrowImg;
let currentState;
const BEDROOM = 0;
const KITCHEN = 1;
const BATHROOM = 2;
​
function preload() {
  bgImg1 = loadImage("bg1.png");
  bgImg2 = loadImage("bg2.png");
  bgImg3 = loadImage("bg3.png");
​
  desk1Img = loadImage("desk1.png");
  desk2Img = loadImage("desk2.png");
  bed1Img = loadImage("bed1.png");
  bed2Img = loadImage("bed2.png");
  animal1Img = loadImage("animal1.png");
  animal2Img = loadImage("animal2.png");
  art1Img = loadImage("art1.png");
  art2Img = loadImage("art2.png");
  rug1Img = loadImage("rug1.png");
  rug2Img = loadImage("rug2.png");
​
  fridge1Img = loadImage("fridge1.png");
  fridge2Img = loadImage("fridge2.png");
  stove1Img = loadImage("stove1.png");
  stove2Img = loadImage("stove2.png");
  table1Img = loadImage("table1.png");
  table2Img = loadImage("table2.png");
  chair1Img = loadImage("chair1.png");
  chair2Img = loadImage("chair2.png");
  plant1Img = loadImage("plant1.png");
  plant2Img = loadImage("plant2.png");
​
  sink1Img = loadImage("sink1.png");
  sink2Img = loadImage("sink2.png");
  toilet1Img = loadImage("toilet1.png");
  toilet2Img = loadImage("toilet2.png");
  shower1Img = loadImage("shower1.png");
  shower2Img = loadImage("shower2.png");
  decor1Img = loadImage("decor1.png");
  decor2Img = loadImage("decor2.png");
  mirror1Img = loadImage("mirror1.png");
  mirror2Img = loadImage("mirror2.png");
​
  door1Img = loadImage("door1.png");
  door2Img = loadImage("door2.png");
  window1Img = loadImage("window1.png");
  window2Img = loadImage("window2.png");
  arrowImg = loadImage("arrow.png");
}
​
function setup() {
  createCanvas(600, 400);
  background(bgImg1);
  imageMode(CENTER);
  currentState = BEDROOM;
}
function draw() {
  //doors + windows
  if (mouseX > 50 && mouseX < 550 && mouseY > 0 && mouseY < 350) {
    if (whichButton === "door1") {
      if (mouseIsPressed === true) {
        image(door1Img, mouseX, mouseY, 100, 210);
      }
    }
    if (whichButton === "door2") {
      if (mouseIsPressed === true) {
        image(door2Img, mouseX, mouseY, 120, 240);
      }
    }
    if (whichButton === "window1") {
      if (mouseIsPressed === true) {
        image(window1Img, mouseX, mouseY, 220, 170);
      }
    }
    if (whichButton === "window2") {
      if (mouseIsPressed === true) {
        image(window2Img, mouseX, mouseY, 145, 170);
      }
    }
​
    //bedroom
    if (currentState === BEDROOM) {
      if (whichButton === "desk1") {
        if (mouseIsPressed === true) {
          image(desk1Img, mouseX, mouseY, 230, 180);
        }
      }
      if (whichButton === "desk2") {
        if (mouseIsPressed === true) {
          image(desk2Img, mouseX, mouseY, 200, 150);
        }
      }
      if (whichButton === "bed1") {
        if (mouseIsPressed === true) {
          image(bed1Img, mouseX, mouseY, 310, 225);
        }
      }
      if (whichButton === "bed2") {
        if (mouseIsPressed === true) {
          image(bed2Img, mouseX, mouseY, 300, 225);
        }
      }
      if (whichButton === "art1") {
        if (mouseIsPressed === true) {
          image(art1Img, mouseX, mouseY, 120, 100);
        }
      }
      if (whichButton === "art2") {
        if (mouseIsPressed === true) {
          image(art2Img, mouseX, mouseY, 100, 120);
        }
      }
      if (whichButton === "animal1") {
        if (mouseIsPressed === true) {
          image(animal1Img, mouseX, mouseY, 65, 65);
        }
      }
      if (whichButton === "animal2") {
        if (mouseIsPressed === true) {
          image(animal2Img, mouseX, mouseY, 75, 75);
        }
      }
      if (whichButton === "rug1") {
        if (mouseIsPressed === true) {
          image(rug1Img, mouseX, mouseY, 375, 120);
        }
      }
      if (whichButton === "rug2") {
        if (mouseIsPressed === true) {
          image(rug2Img, mouseX, mouseY, 350, 250);
        }
      }
    }
    //kitchen
    else if (currentState === KITCHEN) {
      if (whichButton === "fridge1") {
        if (mouseIsPressed === true) {
          image(fridge1Img, mouseX, mouseY, 295, 260);
        }
      }
      if (whichButton === "fridge2") {
        if (mouseIsPressed === true) {
          image(fridge2Img, mouseX, mouseY, 160, 295);
        }
      }
      if (whichButton === "stove1") {
        if (mouseIsPressed === true) {
          image(stove1Img, mouseX, mouseY, 130, 160);
        }
      }
      if (whichButton === "stove2") {
        if (mouseIsPressed === true) {
          image(stove2Img, mouseX, mouseY, 190, 185);
        }
      }
      if (whichButton === "table1") {
        if (mouseIsPressed === true) {
          image(table1Img, mouseX, mouseY, 200, 100);
        }
      }
      if (whichButton === "table2") {
        if (mouseIsPressed === true) {
          image(table2Img, mouseX, mouseY, 170, 175);
        }
      }
      if (whichButton === "chair1") {
        if (mouseIsPressed === true) {
          image(chair1Img, mouseX, mouseY, 120, 120);
        }
      }
      if (whichButton === "chair2") {
        if (mouseIsPressed === true) {
          image(chair2Img, mouseX, mouseY, 75, 125);
        }
      }
      if (whichButton === "plant1") {
        if (mouseIsPressed === true) {
          image(plant1Img, mouseX, mouseY, 155, 180);
        }
      }
      if (whichButton === "plant2") {
        if (mouseIsPressed === true) {
          image(plant2Img, mouseX, mouseY, 150, 160);
        }
      }
    }
    //bathroom
    if (currentState === BATHROOM) {
      if (whichButton === "sink1") {
        if (mouseIsPressed === true) {
          image(sink1Img, mouseX, mouseY, 210, 150);
        }
      }
      if (whichButton === "sink2") {
        if (mouseIsPressed === true) {
          image(sink2Img, mouseX, mouseY, 230, 200);
        }
      }
      if (whichButton === "toilet1") {
        if (mouseIsPressed === true) {
          image(toilet1Img, mouseX, mouseY, 160, 130);
        }
      }
      if (whichButton === "toilet2") {
        if (mouseIsPressed === true) {
          image(toilet2Img, mouseX, mouseY, 140, 150);
        }
      }
      if (whichButton === "shower1") {
        if (mouseIsPressed === true) {
          image(shower1Img, mouseX, mouseY, 220, 290);
        }
      }
      if (whichButton === "shower2") {
        if (mouseIsPressed === true) {
          image(shower2Img, mouseX, mouseY, 300, 270);
        }
      }
      if (whichButton === "decor1") {
        if (mouseIsPressed === true) {
          image(decor1Img, mouseX, mouseY, 83, 83);
        }
      }
      if (whichButton === "decor2") {
        if (mouseIsPressed === true) {
          image(decor2Img, mouseX, mouseY, 70, 70);
        }
      }
      if (whichButton === "mirror1") {
        if (mouseIsPressed === true) {
          image(mirror1Img, mouseX, mouseY, 110, 120);
        }
      }
      if (whichButton === "mirror2") {
        if (mouseIsPressed === true) {
          image(mirror2Img, mouseX, mouseY, 90, 130);
        }
      }
    }
  }
  drawButtons();
  fill(186, 65, 114);
  text("save", 562, 28);
  text("clear", 562, 78);
  text("next room", 535, 235);
}
​
function mousePressed() {
  //arrow
  if (mouseX > 525 && mouseX < 600 && mouseY > 160 && mouseY < 280) {
    if (currentState === BEDROOM) {
      image(bgImg2, 300, 200, 600, 400);
      currentState = KITCHEN;
    } else if (currentState === KITCHEN) {
      currentState = BATHROOM;
      image(bgImg3, 300, 200, 600, 400);
    } else if (currentState === BATHROOM) {
      currentState = BEDROOM;
      image(bgImg1, 300, 200, 600, 400);
    }
  }
​
  //doors & windows
  if (mouseX > 200 && mouseX < 250 && mouseY > 350 && mouseY < 400) {
    whichButton = "door1";
  }
  if (mouseX > 250 && mouseX < 300 && mouseY > 350 && mouseY < 400) {
    whichButton = "door2";
  }
  if (mouseX > 300 && mouseX < 350 && mouseY > 350 && mouseY < 400) {
    whichButton = "window1";
  }
  if (mouseX > 350 && mouseX < 400 && mouseY > 350 && mouseY < 400) {
    whichButton = "window2";
  }
​
  //bedroom
  if (currentState === BEDROOM) {
    if (mouseX > 0 && mouseX < 50 && mouseY > 0 && mouseY < 50) {
      whichButton = "desk1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 50 && mouseY < 100) {
      whichButton = "desk2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 100 && mouseY < 150) {
      whichButton = "bed1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 150 && mouseY < 200) {
      whichButton = "bed2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 200 && mouseY < 250) {
      whichButton = "art1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 250 && mouseY < 300) {
      whichButton = "art2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 300 && mouseY < 350) {
      whichButton = "animal1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 350 && mouseY < 400) {
      whichButton = "animal2";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 300 && mouseY < 350) {
      whichButton = "rug1";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 350 && mouseY < 400) {
      whichButton = "rug2";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 0 && mouseY < 50) {
      whichButton = "save";
      save("mybedroom.png");
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 50 && mouseY < 100) {
      whichButton = "clear";
      image(bgImg1, 300, 200, 600, 400);
    }
  }
​
  //kitchen
  if (currentState === KITCHEN) {
    if (mouseX > 0 && mouseX < 50 && mouseY > 0 && mouseY < 50) {
      whichButton = "fridge1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 50 && mouseY < 100) {
      whichButton = "fridge2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 100 && mouseY < 150) {
      whichButton = "stove1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 150 && mouseY < 200) {
      //clicked on stove2
      whichButton = "stove2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 200 && mouseY < 250) {
      whichButton = "table1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 250 && mouseY < 300) {
      whichButton = "table2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 300 && mouseY < 350) {
      whichButton = "chair1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 350 && mouseY < 400) {
      whichButton = "chair2";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 300 && mouseY < 350) {
      whichButton = "plant1";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 350 && mouseY < 400) {
      whichButton = "plant2";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 0 && mouseY < 50) {
      whichButton = "save";
      save("mykitchen.png");
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 50 && mouseY < 100) {
      whichButton = "clear";
      image(bgImg2, 300, 200, 600, 400);
    }
  }
  //bathroom
  if (currentState === BATHROOM) {
    if (mouseX > 0 && mouseX < 50 && mouseY > 0 && mouseY < 50) {
      whichButton = "sink1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 50 && mouseY < 100) {
      whichButton = "sink2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 100 && mouseY < 150) {
      whichButton = "toilet1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 150 && mouseY < 200) {
      whichButton = "toilet2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 200 && mouseY < 250) {
      whichButton = "shower1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 250 && mouseY < 300) {
      whichButton = "shower2";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 300 && mouseY < 350) {
      whichButton = "decor1";
    }
    if (mouseX > 0 && mouseX < 50 && mouseY > 350 && mouseY < 400) {
      whichButton = "decor2";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 300 && mouseY < 350) {
      whichButton = "mirror1";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 350 && mouseY < 400) {
      whichButton = "mirror2";
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 0 && mouseY < 50) {
      whichButton = "save";
      save("mybathroom.png");
    }
    if (mouseX > 550 && mouseX < 600 && mouseY > 50 && mouseY < 100) {
      whichButton = "clear";
      image(bgImg3, 300, 200, 600, 400);
    }
  }
}
​
function drawButtons() {
  //door1
  fill(247, 218, 230);
  rect(200, 350, 50, 50);
  image(door1Img, 225, 375, 26, 45);
  //door2
  rect(250, 350, 50, 50);
  image(door2Img, 275, 375, 30, 50);
  //window1
  rect(300, 350, 50, 50);
  image(window1Img, 325, 375, 45, 36);
  //window2
  rect(350, 350, 50, 50);
  image(window2Img, 375, 375, 43, 40);
  //save button
  rect(550, 0, 50, 50);
  //clear
  rect(550, 50, 50, 50);
  //next
  rect(525, 160, 75, 80);
  image(arrowImg, 565, 195, 50, 65);
​
  if (currentState === BEDROOM) {
    //bedroom
    //desk1
    rect(0, 0, 50, 50);
    image(desk1Img, 25, 25, 50, 50);
    //desk2
    rect(0, 50, 50, 50);
    image(desk2Img, 25, 75, 50, 50);
    //bed1
    rect(0, 100, 50, 50);
    image(bed1Img, 25, 125, 50, 50);
    //bed2
    rect(0, 150, 50, 50);
    image(bed2Img, 25, 175, 50, 50);
    //art1
    rect(0, 200, 50, 50);
    image(art1Img, 25, 225, 50, 50);
    //art2
    rect(0, 250, 50, 50);
    image(art2Img, 25, 275, 50, 50);
    //animal1
    rect(0, 300, 50, 50);
    image(animal1Img, 25, 325, 50, 50);
    //animal2
    rect(0, 350, 50, 50);
    image(animal2Img, 25, 375, 50, 50);
    //rug1
    rect(550, 300, 50, 50);
    image(rug1Img, 575, 325, 50, 50);
    //rug2
    rect(550, 350, 50, 50);
    image(rug2Img, 575, 375, 50, 50);
  } else if (currentState === KITCHEN) {
    //kitchen
    //fridge1
    rect(0, 0, 50, 50);
    image(fridge1Img, 25, 25, 50, 50);
    //fridge2
    rect(0, 50, 50, 50);
    image(fridge2Img, 25, 75, 33, 45);
    //stove1
    rect(0, 100, 50, 50);
    image(stove1Img, 25, 125, 36, 38);
    //stove2
    rect(0, 150, 50, 50);
    image(stove2Img, 25, 175, 50, 47);
    //table1
    rect(0, 200, 50, 50);
    image(table1Img, 25, 225, 40, 25);
    //table2
    rect(0, 250, 50, 50);
    image(table2Img, 25, 275, 50, 44);
    //chair1
    rect(0, 300, 50, 50);
    image(chair1Img, 25, 325, 50, 45);
    //chair2
    rect(0, 350, 50, 50);
    image(chair2Img, 25, 375, 30, 42);
    //plant1
    rect(550, 300, 50, 50);
    image(plant1Img, 575, 325, 50, 50);
    //plant2
    rect(550, 350, 50, 50);
    image(plant2Img, 575, 375, 50, 50);
  } else if (currentState === BATHROOM) {
    //bathroom
    //sink1
    rect(0, 0, 50, 50);
    image(sink1Img, 25, 25, 53, 51);
    //sink2
    rect(0, 50, 50, 50);
    image(sink2Img, 25, 75, 43, 50);
    //toilet1
    rect(0, 100, 50, 50);
    image(toilet1Img, 25, 125, 52, 45);
    //toilet2
    rect(0, 150, 50, 50);
    image(toilet2Img, 25, 175, 53, 53);
    //shower1
    rect(0, 200, 50, 50);
    image(shower1Img, 25, 225, 40, 40);
    //shower2
    rect(0, 250, 50, 50);
    image(shower2Img, 25, 275, 46, 43);
    //decor1
    rect(0, 300, 50, 50);
    image(decor1Img, 25, 325, 54, 60);
    //decor2
    rect(0, 350, 50, 50);
    image(decor2Img, 25, 375, 47, 47);
    //mirror1
    rect(550, 300, 50, 50);
    image(mirror1Img, 575, 325, 46, 43);
    //mirror2
    rect(550, 350, 50, 50);
    image(mirror2Img, 575, 375, 42, 43);
  }
}
​
Cookies

Sketch Files

Console

Preview
