Как изменить цвет фона на mouseMoved?

Question

Я работаю над небольшим заданием, которое требует от меня возможности изменять цвет фона при движении мыши (изучение Javascript / p5).

С моим подходом я столкнулся со следующей проблемой: мне удалось заставить работать форму смены цвета при небольшом перемещении мыши, однако она мгновенно изменит страницу на белую, не сбрасывается в 0 и не будет добавляйте цвет постепенно, как я и предполагал (achterKleur + = 1)

var achterKleur;

//Canvas
function setup() {
    createCanvas(displayWidth, displayHeight);
    achterKleur = color(100);

}

//rode vierkant

function draw() {

    background(achterKleur);

    //gebouw
    fill(255, 0, 0);
    rect(200, 100, 300, 600);

    //grond 
    fill(222, 188, 147);
    rect(0, 700, 1600, 100);

    // ramen
    fill(255, 255, 255);
    rect(250, 150, 50, 50);
    rect(400, 150, 50, 50);

    rect(250, 300, 50, 50);
    rect(400, 300, 50, 50);

    rect(250, 450, 50, 50);
    rect(400, 450, 50, 50);
}

function mouseMoved () {
    achterKleur += 1;
   if (achterKleur > 255) {
       achterKleur = 0;
   }
}

Мое намерение в конечном итоге будет заключаться в том, чтобы я интегрировал RGB вместо градаций серого. Что может вызвать мою проблему, и как я могу вызвать RGB в операторе «если»?

Answer 1

Довольно глупо, я не подумал о следующем:

Использование функции mouseMoved было ненужным, и нужно было просто добавить переменную mouseX / mouseY в спектр RGB:

//Canvas
function setup() {
    createCanvas(displayWidth, displayHeight);
}



function draw() {
    //achtegrond met mouse X
    background(mouseX / 5, mouseY / 2, 0);

    //gebouw
    fill(255, 0, 0);
    rect(200, 100, 300, 600);

    //grond 
    fill(222, 188, 147);
    rect(0, 700, 1600, 100);

    // ramen
    fill(255, 255, 255);
    rect(250, 150, 50, 50);
    rect(400, 150, 50, 50);

    rect(250, 300, 50, 50);
    rect(400, 300, 50, 50);

    rect(250, 450, 50, 50);
    rect(400, 450, 50, 50);
}