xxxxxxxxxx
205
// let backgroundImage;
// let sofa_0;
// let overSofa = false;
// let copy_sofa;
// let sofas = []
// let currentSofa = 0;
// function preload() {
// backgroundImage = loadImage("images/room.png");
// sofa_0 = loadImage("images/sofa_0.png");
// sofas[0] = loadImage("images/sofa_0.png");
// sofas[1] = loadImage("images/sofa_1.png");
// }
// function setup() {
// createCanvas(1000, 400);
// background(220);
// image(backgroundImage, 0, 0);
// image(sofa_0, 0, 0);
// // Create a copy of the sofa_0 image for the hover effect
// copy_sofa = createImage(sofa_0.width, sofa_0.height);
// copy_sofa.copy(sofa_0, 0, 0, sofa_0.width, sofa_0.height, 0, 0, sofa_0.width, sofa_0.height);
// }
// function draw() {
// // Display the background image
// image(backgroundImage, 0, 0);
// image(sofas[currentSofa], 0, 0);
// if (overSofa) {
// // Apply the hover effect by filling the copy of the image with white
// copy_sofa.loadPixels();
// for (let i = 0; i < copy_sofa.pixels.length; i += 4) {
// copy_sofa.pixels[i] = 255; // Red
// copy_sofa.pixels[i + 1] = 255; // Green
// copy_sofa.pixels[i + 2] = 255; // Blue
// }
// copy_sofa.updatePixels();
// // Display the modified image
// image(copy_sofa, 0, 0);
// } else {
// // Display the original image
// image(sofa_0, 0, 0);
// }
// }
// function mouseMoved() {
// if (mouseX >= 0 && mouseX <= 200 && mouseY >= 0 && mouseY <= 100) {
// overSofa = true;
// } else {
// overSofa = false;
// }
// }
// function mouseClicked() {
// // Check if the mouse is within the image area
// if (mouseX >= 0 && mouseX <= 200 && mouseY >= 0 && mouseY <= 100) {
// // Increment the index to display the next image
// currentSofa++;
// if (currentSofa >= sofas.length) {
// currentSofa = 0; // Loop back to the first image
// }
// }
// }
let backgroundImage;
let sofas = [];
let currentSofa = 0;
let leftDecors = [];
let currentLeftDecor = 0;
let rightDecors = [];
let currentRightDecor = 0;
let lamps = [];
let currentLamp = 0;
function preload() {
backgroundImage = loadImage("images/room.png");
//loading images of sofa to array of sofas
sofas[0] = loadImage("images/sofa_0.png");
sofas[1] = loadImage("images/sofa_1.png");
sofas[2] = loadImage("images/sofa_2.png");
sofas[3] = loadImage("images/sofa_3.png");
sofas[4] = loadImage("images/sofa_4.png");
sofas[5] = loadImage("images/sofa_5.png");
leftDecors[0] = loadImage("images/leftDecor_0.png");
leftDecors[1] = loadImage("images/leftDecor_1.png");
leftDecors[2] = loadImage("images/leftDecor_2.png");
leftDecors[3] = loadImage("images/leftDecor_3.png");
leftDecors[4] = loadImage("images/leftDecor_4.png");
leftDecors[5] = loadImage("images/leftDecor_5.png");
rightDecors[0] = loadImage("images/rightDecor_0.png");
rightDecors[1] = loadImage("images/rightDecor_1.png");
rightDecors[2] = loadImage("images/rightDecor_2.png");
rightDecors[3] = loadImage("images/rightDecor_3.png");
rightDecors[4] = loadImage("images/rightDecor_4.png");
rightDecors[5] = loadImage("images/rightDecor_5.png");
lamps[0] = loadImage("images/lamp_0.png");
lamps[1] = loadImage("images/lamp_1.png");
lamps[2] = loadImage("images/lamp_2.png");
lamps[3] = loadImage("images/lamp_3.png");
lamps[4] = loadImage("images/lamp_4.png");
lamps[5] = loadImage("images/lamp_5.png");
}
function setup() {
createCanvas(1000, 400);
// image(sofas[currentSofa], 0, 0);
image(backgroundImage, 0, 0);
image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.5);
image(leftDecors[currentLeftDecor], width*0.2, height*0.4);
image(rightDecors[currentRightDecor], width*0.65, height*0.4);
image(lamps[currentLamp], width/2-lamps[0].width/2, 0);
}
function draw() {
// image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.6);
}
function mouseClicked() {
// checking whether the mouse is within the sofa size
if (mouseX >= width/2-sofas[0].width/2 &&
mouseX <= width/2-sofas[0].width/2+ sofas[0].width &&
mouseY >= height*0.5 &&
mouseY <= height*0.5+ sofas[0].height) {
// displaying the next image of sofa in array
currentSofa++;
//looping back to the first image in the array after displaying the last image
if (currentSofa >= sofas.length) {
currentSofa = 0;
}
// displaying a background and new image of sofa, so the previous images of sofa wouldn't be displayed
// image(backgroundImage, 0, 0);
// image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.6);
// image(leftDecors[currentLeftDecor], width*0.2, height*0.4);
}
if (mouseX >= width*0.2 &&
mouseX <= width*0.2+ leftDecors[0].width &&
mouseY >= height*0.4 &&
mouseY <= height*0.4+ leftDecors[0].height) {
// displaying the next image of sofa in array
currentLeftDecor++;
//looping back to the first image in the array after displaying the last image
if (currentLeftDecor >= leftDecors.length) {
currentLeftDecor = 0;
}
// displaying a background and new image of sofa, so the previous images of sofa wouldn't be displayed
// image(backgroundImage, 0, 0);
// image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.6);
// image(leftDecors[currentLeftDecor], width*0.2, height*0.4);
}
if (mouseX >= width*0.65 &&
mouseX <= width*0.65+ rightDecors[0].width &&
mouseY >= height*0.4 &&
mouseY <= height*0.4+ rightDecors[0].height) {
// displaying the next image of sofa in array
currentRightDecor++;
//looping back to the first image in the array after displaying the last image
if (currentRightDecor >= rightDecors.length) {
currentRightDecor = 0;
}
}
if (mouseX >= width/2-lamps[0].width/2 &&
mouseX <= width/2-lamps[0].width/2+ lamps[0].width &&
mouseY >= 0 &&
mouseY <= height*0.5+ lamps[0].height) {
// displaying the next image of sofa in array
currentLamp++;
//looping back to the first image in the array after displaying the last image
if (currentLamp >= lamps.length) {
currentLamp = 0;
}
}
image(backgroundImage, 0, 0);
image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.5);
image(leftDecors[currentLeftDecor], width*0.2, height*0.4);
image(rightDecors[currentRightDecor], width*0.65, height*0.4);
image(lamps[currentLamp], width/2-lamps[0].width/2, 0);
}