Ho preferito creare due rettangolini-spia, l'uno sul lato destro e l'altro sul lato sinistro, in quanto la creazione di un rettangolo-spia delle dimensioni del rettangolo più qualche pixel accessorio che costituisse la zona-spia si è rivelata molto più lenta, verosimilmente perché deve trascrivere nella variabile immagine tutti i dati dei pixel del rettangolo, molti di più rispetto a quelli dei rettangolini.
La funzione di "detezione" (esisterà questa parola in italiano?) l'ho isolata in una funzione a parte:
function XDetect(img,colByte, colore){
for(var n=0;n&>lt;img.data.length;n+=4){
if(img.data[n+colByte]==colore) {
dx=-dx;
break;
}
}
}
...che accetta come parametri il rettangolino (img), il numero di byte del quale si vuole eseguire la detezione dopo quello iniziale del colore rosso (se è 0 si farà la detezione dal byte del rosso, se 1 da quello del verde, se 2 da quello del blu e se 3 da quello della trasparenza), e come terzo parametro il colore da "detectare".
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=200;
var dx=1;
var y=21;
var dy=.1;
var w=80;
var h=10;
var sfondo="black";
var colore="green";
var osx=100;
var osy=10;
var osw=1;
var osh=200;
var oscolore="#FFFF00";
var immagine;
function init(){
initContext("canvas");
intervallo=setInterval(draw,1);
}
function draw(){
rect(0,0,WIDTH,HEIGHT,sfondo);
rect(x,y,w,h,colore);
rect(osx,osy,osw,osh, oscolore);
rect(300,0,1,50,"#FF0000");
immagine=ctx.getImageData(x+w,y,1,h);
immagine2=ctx.getImageData(x-1,y,1,h);
XDetect(immagine,0,255);
XDetect(immagine2,0,255);
if(x+w>WIDTH || x<0) dx=-dx;
x+=dx;
y+=dy;
}
function XDetect(img,colByte, colore){
for(var n=0;n<img.data.length;n+=4){
if(img.data[n+colByte]==colore) {
dx=-dx;
break;
}
}
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
<textarea id="testo" style="float:right;height:500px""></textarea>
<div id="delta"></div>
</body>
</html>
Ed ecco il risultato:
Nessun commento:
Posta un commento