Изменить изображение при использовании мыши-кузнеца

Question

Im кодирование в P5. У меня два изображения на моей странице. Im пытается закодировать его к влиянию, которое, когда мышь находится слева от изображения, изменяется на другое изображение. Это конкретное: далее мы создадим зависание над эффектом, в котором изображения меняются, когда мышь проходит над ним.

Мы будем использовать 2 изображения, img1 и img2 и переключаться между ними, когда мышь проходит над ними. Мы будем использовать переменные imageX и imageY для позиций x и y в левом верхнем углу изображения.

Нам нужно, если заявление, которое выглядит как-нибудь так:

if(XXX){ 
    image(img2, imageX, imageY); 
} else { 
    image(img1, imageX, imageY); 
} 

где XXX является условием, что нам нужно проверить. Нам нужно получить условие, соответствующее мыши, проходящей по изображению.

Это немного напоминает столкновение шара с боковыми сторонами экрана. Нам нужно проверить каждую сторону по очереди. Начнем с левой стороны. Это минимальное значение x изображения, которое соответствует нашей переменной imageX. Чтобы быть на нашем изображении, mouseX должен быть больше, чем imageX.

Если вы сделаете это правильно, изображение изменится всякий раз, когда мышь находится справа от левой стороны изображения.

Я был в состоянии сделать это, написав функцию, но я не могу выполнить задачу с помощью утверждений, которые они хотят в книге.

Это код у меня есть:

var img1; 
var img2; 

function setup() { 
    createCanvas(600, 600); 
    img1 = loadImage("assets/Slammer.jpg"); 
    img2 = loadImage("assets/rollercoaster.jpg") 

} 

function draw() { 
    image(img1, 100, 100); 
    image(img2, 300, 300); 
} 

    if mouseX > img2{ 
    image(img2, imageX, imageY); 
    } else { 
    image(img1, imageY, imageY); 
    } 

Может кто-нибудь увидеть, что Im делая неправильно здесь и помочь мне?

Спасибо.

Answer 1

Этот раздел кода не делает тонну смысла:

function draw() { 
    image(img1, 100, 100); 
    image(img2, 300, 300); 
} 

    if mouseX > img2{ 
    image(img2, imageX, imageY); 
    } else { 
    image(img1, imageY, imageY); 
    } 

В вашей draw() функции, вы отображающее оба изображения. Но оператор if находится в вне функции draw(), поэтому это происходит только один раз, когда ваш код загружается первым (что я бы поставил на ошибку, потому что вы не можете вызвать функцию image() до тех пор, пока не вызывается setup()).

В любом случае, даже если вы переместили этот код внутри функции draw(), вы сравниваете mouseX (номер) с номером img2 (это изображение). Что вы ожидаете от этого сравнения? Как число может быть больше изображения?

Похоже, вы хотите сравнить положение изображения с положением мыши. Вот пример, который рисует черным, если мышь находится на левой стороне и белый, если мышь находится справа:

function draw(){ 
    if(mouseX < width/2){ 
     background(0); 
    } 
    else{ 
     background(255); 
    } 
}