p5 js: trasparenza in rgba non viene applicata

[Floky]

Ciao a tutti.

Stavo provando la libreria p5 js per la creazione di un canvas.

Ho creato una serie di blocchi dove quando il mouse passa sopra ogni blocco assume un colore diverso e quando il mouse esce dalle coordinate di ogni blocco lo sfondo torna di colore default.

Esempio

var color1 = 'rgb(34, 34, 34)'; // colore inziale

function draw() {
    fill(color1);
    rect(...)
}

function mouseMoved() {
    
    if((mouseX > 9 && mouseX < 111) && (mouseY > 9 && mouseY < 111)) {

        color1 = squareArray[0].color;

    } else {
    
        color1 = "rgb(34, 34, 34)";
}

Il codice sopra funziona ma se volessi sostituire il colore con rgba(34,34,34, 0) per farlo trasparente non funziona o meglio:

1) All'inizio viene rispettato, il blocco non si vede
2) Quando passo sopra il mouse si colora
3) Quando esco fuori dal blocco non torna ad essere trasparente (ultimo else statement).

Qui trovate l'esempio https://codepen.io/anon/pen/xpapdy?editors=1010

Vedete come al primo blocco ho messo rgba (e non funziona quando tolgo il mouse) mentre gli altri con valore rgb funzionano.

[ciro78]

ad occhio , visto che il codice non è completo, direi che non ridisegni il canvas col nuovo colore quando il mouse esce fuori.....

[Floky]

Ciao Ciro78.

Il codice completo l'ho linkato al codepen. Il canvas è ridisegnato in automatico dalla funzione draw (funzione di p5 js). Tra l'altro con i colori specificati in modo rgb funziona tutto mentre se li cambio in rgba non funziona.