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
codice:
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.