Appunti di programmazione: Collisioni con spostamenti superiori a un pixel

Se però il rettangolo si sposta con una velocità maggiore di 1 pixel alla volta, può accadere che la collisione non venga individuata.

Con un rettangolino-spia della larghezza di un solo pixel, lo spostamento di due pixel alla volta può far "saltare" un ostacolo della larghezza di un solo pixel.
Così conviene fare un rettangolino-spia di due pixel di larghezza.
Faccio in modo che il rettangolo si muova di due pixel alla volta, per fare una prova:

<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=145;
var dx=2;

var y=50;
var w=100;
var h=10;
var sfondo="black";
var colore="green";
var osx=350;
var osy=50;
var osw=1;
var osh=100;
var oscolore="#FFFF00";
var immagine;

function init(){
 initContext("canvas");
 intervallo=setInterval(draw,10);
}

function draw(){
 rect(0,0,WIDTH,HEIGHT,sfondo);
 rect(x,y,w,h,colore);
 rect(osx,osy,osw,osh, oscolore);
 
 immagine=ctx.getImageData(x+w,y,1,h);
 
 $("testo").value="";
 for(var n=0;n<immagine.data.length;n+=4){
  $("testo").value+=immagine.data[n]+" "+immagine.data[n+1]+" "+immagine.data[n+2]+" "+immagine.data[n+3]+"\n";
  if(immagine.data[n]==255) {
   dx=-dx;
   
   break;
  }
  
  
 }
 x+=dx;
}
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>

Ecco, lo spostamento istantaneo del rettangolo è di 2 pixel, mentre il rettangolino-spia ha ancora una larghezza di un pixel.
Se la teoria è giusta, cambiando la posizione di partenza del rettangolo, si alternano posizioni in cui la collisione viene vista e posizioni in cui non viene vista, alternate.
E infatti così succede:
Con questa posizione (x = 145),...

var x=145;
var dx=2;

.....

 immagine=ctx.getImageData(x+w,y,1,h);

...la collisione non viene individuata e l'ostacolo viene attraversato tranquillamente dal rettangolo.

Aumentiamo di 1 la posizione del rettangolo:

var x=146;
var dx=2;

(il rettangolino-spia è sempre di 1)
... la collisione c'è, e il rettangolo torna indietro non appena "toccato" l'ostacolo.

Aumentiamo ancora di 1

var x=147;
var dx=2;

e la collisione adesso non c'è: l'ostacolo viene attraversato.

Ancora:

var x=148;
var dx=2;

...e la collisione c'è!
Questo conferma in pieno la mia teoria illustrata con l'immagine sopra!

Adesso proviamo ad aumentare di 1 la larghezza del rettangolino-spia:

var x=145;
var dx=2;

....

 immagine=ctx.getImageData(x+w,y,2,h);

...e stiamo a vedere, variando di nuovo la posizione del rettangolo...
E la collisione c'è!

Aumentiamo:

var x=146;
var dx=2;

...e la collisione c'è!

Ancora:

var x=147;
var dx=2;

e la collisione c'è ancora!

Ancora:

var x=148;
var dx=2;

E la collisione c'è ancora!

La teoria è esatta!

Appunti di programmazione

venerdì 9 gennaio 2015

Collisioni con spostamenti superiori a un pixel

Nessun commento:

Posta un commento