Appunti di programmazione

giovedì 8 gennaio 2015

Collisioni con il canvas, prove con il colore.

Ecco il codice di un rettangolo rosso che viene respinto da due triangoli aventi in comune il byte del colore verde di valore 0xFF (255):

<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>

var x=150;
var y=30;
var dx=0;
var delta=5
var differenza=delta;
var dy=0;
var w=50;
var h=30;
var COLORE="#FF0000"
var immagine;
var scarto=5;
function init(){
 //chiamata obbligatoria.
 initContext("canvas");
  
 intervallo=setInterval(draw,10); 
}

function draw(){
 rect(0,0,WIDTH,HEIGHT,"black");
 rect(x,y,w,h,COLORE);
 rect(10,20,10,30,"#00FF00");
 rect(250,20,10,30,"#00FFAA");
 var areaWidth=w+scarto*2;
 
 immagine=ctx.getImageData(x-scarto,y,areaWidth,h);
 
 for(var n=0;n<immagine.data.length;n+=4){
  if(immagine.data[n+1]==255){
  
  
   if(n % areaWidth<20){
    differenza=delta;
      }
   else if (n % areaWidth >(areaWidth-scarto)){
    differenza=-delta;
   }
  }
 }
 x+=differenza;
}

window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Non ho la screencam e non lo posso documentare...

lunedì 5 gennaio 2015

Codice per il disegno dei mattoni nel giochino del Breakout, con codice per eliminare i mattoni colpiti.

Abbiamo detto che per disegnare i mattoncini si può scrivere un codice di questo genere:

 for(var i=0;i<NCOLS;i++){
  for(var j=0;j<NROWS;j++){
   rect((i*(BRICKWIDTH+PADDING))+PADDING,
   (j*(BRICKHEIGHT+PADDING))+PADDING,
   BRICKWIDTH,BRICKHEIGHT,"maroon");
  }
 }

Per ogni riga, da 0 fino a numero di colonne meno 1, la coordinata sinistra del mattone è pari al numero per la larghezza del mattone stesso (calcolando anche il padding, ossia le distanze fra mattoni).
La coordinata alto, invece, si calcola per ogni numero di coordinata sinistra incrementando un altro numero da zero fino al numero di righe meno 1.
Uffa, non mi sono spiegato chiaramente ma il concetto comunque è questo, mi è sufficientemente chiaro.

Però nel programma del tutorial c'è anche il codice per stabilire se un determinato mattone di coordinate i e j va disegnato o no.
Per questo si istituisce un array di dimensioni i e j, in cui ogni mattone è identificato da due numeri.

 for(i=0;i<NROWS;i++){
  bricks[i]=new Array(NCOLS);
  for(j=0;j<NCOLS;j++){
   bricks[i][j]=1;
  }
 }

Inizialmente tutti gli elementi dell'array hanno valore 1.
Se poi il mattone sarà colpito, gli verrà dato valore zero e non sarà ridisegnato al successivo ridisegno del canvas.
Ed il codice che stabilisce quale mattone è stato colpito è questo:

  rowheight = BRICKHEIGHT + PADDING;
  colwidth = BRICKWIDTH + PADDING;
  row = Math.floor(y/rowheight);
  col = Math.floor(x/colwidth);

  if (y < NROWS * rowheight  && bricks[row][col] == 1) {
    dy = -dy;
    bricks[row][col] = 0;
  }

Conoscendo y, ossia la coordinata y della palla, si divide y per l'altezza di ogni singolo mattone per trovare il numero di righe al quale ci si trova (approssimando tutto con il Math.floor, ossia togliendo i decimali).
Stessa cosa conoscendo x, dividendolo per la larghezza di ogni singolo mattone, in modo da conoscere il numero di colonne, per poi approssimare avendo il numero esatto.
Ovviamente questo deve valere se la palla si trova fra i mattoni. Se non specifichiamo questo, un valore di y troppo grande fa sì che si possano ottenere numeri di riga oltre quelli presenti nella matrice di mattoni. Infatti ho provato e mi dà errore.

Se quindi il mattone al cui livello si trova la palla è stato tracciato, ossia è pari a 1, lo si imposta pari a 0 e si rimanda indietro la palla.
Essendo pari a 0, al successivo ridisegno del canvas non sarà disegnato perché...

for (i=0; i < NROWS; i++) {
     for (j=0; j < NCOLS; j++) {
        if (bricks[i][j] == 1) {
          rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
              (i * (BRICKHEIGHT + PADDING)) + PADDING,
              BRICKWIDTH, BRICKHEIGHT,"saddlebrown");
        }
     }

...perché i mattoni sono ridisegnati solo se valgono 1.

Una griglia di caselle anche in C#

E facciamo la stessa cosa in C#: una griglia di caselle.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication14
{
    public partial class Form1 : Form
    {
        int NROWS = 5;
        int NCOLS = 3;

        public Form1()
        {
            InitializeComponent();
            for (int i = 0; i < NCOLS; i++)
            {
                for (int j = 0; j < NROWS; j++)
                {
                    Label miaLabel = new Label();
                    miaLabel.Text = "Ciccia";
                    miaLabel.BorderStyle = BorderStyle.FixedSingle;
                    miaLabel.Left = i * miaLabel.Width;
                    miaLabel.Top = j * miaLabel.Height;
                    Controls.Add(miaLabel);
                }
            }

        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

Ed ecco l'output, esattamente uguale a quello realizzato in VB.

domenica 4 gennaio 2015

Griglia di caselle in VB

E rifacciamo un codice come quello fatto con il Javascript per il canvas usando il VB.NET, per il quale avevo seguito una tecnica diversa...

Public Class Form1
    Dim NROWS As Integer = 5
    Dim NCOLS As Integer = 3

    Sub New()
        ' Chiamata richiesta dalla finestra di progettazione.
        InitializeComponent()
        For n = 0 To NCOLS - 1
            For m = 0 To NROWS - 1
                Dim casella As Label
                casella = New Label
                casella.Text = "ciccia"
                Me.Controls.Add(casella)
                casella.Left = n * casella.Width
                casella.Top = m * casella.Height
                casella.BorderStyle = BorderStyle.FixedSingle
                casella.Visible = True
            Next
        Next
    End Sub
    Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load

    End Sub
End Class

Output:

Ma c'era un altro metodo che avevo usato in precedenza, che sistemava una griglia di caselle dato il numero delle caselle e il numero di caselle per riga.

Public Class Form1
    Dim NLABELS As Integer = 15
    Dim NCOLS As Integer = 3

    Sub New()
        ' Chiamata richiesta dalla finestra di progettazione.
        InitializeComponent()
        For n = 0 To NLABELS - 1
            Dim casella As Label
            casella = New Label
            casella.Text = "ciccia"
            casella.Left = (n Mod NCOLS) * casella.Width
            casella.Top = (n \ NCOLS) * casella.Height

            Me.Controls.Add(casella)
            casella.BorderStyle = BorderStyle.FixedSingle
            casella.Visible = True
        Next

    End Sub
    Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load

    End Sub
End Class

...che dà un output simile, dato che il numero di caselle è divisibile per il numero di colonne...

Disegno di "mattoni" di un muro (una griglia di rettangoli) sul canvas

Per cominciare, creiamo un array di rettangoli da mettere in colonna o in riga...

Ecco la formuletta:

<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>

<script>
var bricks;
var NCOLS=10;
var NROWS=5;
var BRICKWIDTH=45;
var BRICKHEIGHT=10;
var PADDING=1;
function init(){
 //questa deve esserci sempre all'inizio: inizializza la variabile ctx, contesto del canvas.
 initContext("canvas");
 
 
 //seguono tutte le altre funzioni.
 
 for(var i=0;i<NCOLS;i++){
  for(var j=0;j<NROWS;j++){
   rect((i*(BRICKWIDTH+PADDING))+PADDING,
   (j*(BRICKHEIGHT+PADDING))+PADDING,
   BRICKWIDTH,BRICKHEIGHT,"maroon");
  }
 }
 
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
</body>
</html>

Il codice Javascript inizia con l'aggiunta dell'EventListener per l'evento load all'oggetto window.
L'evento load viene associato a una funzione iniziale dal nome qualunque (in questo caso l'ho chiamata Init ma avrei potuto pure chiamarla Pasquale...), e deve però obbligatoriamente chiamare la funzione initContext che è contenuta nella libreria funzioniCanvas.js e che inizializza il context attribuendovi la variabile ctx.
Quindi c'è il codice per disegnare i "mattoni" del muro.
Per ogni colonna, per ogni riga, disegna il mattone con le coordinate ottenute moltiplicando il numero rispettivamente di colonna e di riga per la coordinata x e la coordinata y.
Ecco il risultato:

Costruzione del Breakout con il canvas.

Ecco, seguendo un tutorial ho realizzato l'abbozzo del videogiochino della pallina che deve rompere i mattoncini.
Per il momento ho realizzato solo la pallina e la racchetta.
Ora mi analizzo la struttura del giochino... Abbiamo alcune funzioni semplici che potrebbero essere anche messe su un file a parte.
Ho già linkato un file di codice Javascript per la sola funzione $ che evita di dover scrivere document.getElementById, e potrei linkare anche un altro file con queste funzioni.
Ma vediamo se sono "isolabili"...

Il codice intero è questo:

<!DOCTYPE html>
<html>
<head>
<script src="funzioni2.js"></script>

<script>
var canvas;
var ctx;
x=150;
y=150;
var dx=2;
var dy=4;
var WIDTH;
var HEIGHT;

var paddlex;
var paddlew;
var paddleh;


var rightDown=false;
var leftDown=false;

var intervallo;
function inizia(){
	
	//creiamo la base del contesto.
	canvas=$("canvas");
	ctx=canvas.getContext("2d");
	WIDTH=canvas.width;
	HEIGHT=canvas.height;
	
	
	paddlex=WIDTH/2-100;
	paddleh=10;
	paddlew=75;
	
	//funzione setInterval
	intervallo=setInterval(draw,15);
		
}

document.onkeydown=OnKeyDown;
document.onkeyup=OnKeyUp;

function OnKeyDown(evt){

	if (evt.keyCode==39) rightDown=true;
	else if(evt.keyCode==37) leftDown=true;	
}

function OnKeyUp(evt){
	if (evt.keyCode==39) rightDown=false;
	else if (evt.keyCode==37) leftDown=false;
}

function circle(x,y,r){
	ctx.fillStyle="red";
	ctx.beginPath();
	ctx.arc(x,y,r,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
}

function rect(x,y,w,h){
	ctx.beginPath();
	ctx.rect(x,y,w,h);
	ctx.closePath();
}

function clear(){
	ctx.clearRect(0,0,WIDTH,HEIGHT);
}

function draw() {
  	clear();
  	circle(x,y,10);
  	if(rightDown) paddlex+=5;
  	if(leftDown) paddlex-=5;
  	
  	ctx.fillStyle="blue";
  	rect(paddlex,HEIGHT-paddleh,paddlew,paddleh);
  	if(x+dx<0 || x+dx>WIDTH) 
  		dx=-dx;
  	if(y+dy<0)
  		dy=-dy;
  	else if(y+dy>HEIGHT){
	  	if(x>paddlex && x<(paddlex+paddlew))
	  		dy=-dy;
	  	else{
	  		clearInterval(intervallo);
	  		alert("Game over!");
	  		window.location.reload();
  		}
   }
	  	
  	
  		
  	ctx.fill();
  	x+=dx;
  	y+=dy;
}
	




window.addEventListener("load",inizia);
</script>
</head>
<body>

<canvas id="canvas" width="800" height="500" style="border:3px solid maroon"></canvas>

</body>
</html>

Abbiamo:
Funzione circle che traccia un cerchio:

function circle(x,y,r){
	ctx.fillStyle="red";
	ctx.beginPath();
	ctx.arc(x,y,r,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
}

Ecco, qui c'è un elemento che imposta il fillStyle e che va eliminato dalla funzione, oppure va compreso mettendo il colore come parametro.
Scegliamo la seconda e riscriviamo:

function circle(x,y,r,colore){
	ctx.fillStyle=colore;
	ctx.beginPath();
	ctx.arc(x,y,r,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
}

Provandola, con l'accortezza di aggiungere il colore fra i parametri quando si chiama la funzione,

function draw() {
  	clear();
  	circle(x,y,10,"green");
  	if(rightDown) paddlex+=5;
  	if(leftDown) paddlex-=5;
....
....

(ho cambiato colore per verificare bene il funzionamento) funziona!

La possiamo togliere dal codice e immettere in un file a parte, che va linkato al codice della pagina.
Lo chiamo "funzioniCanvas.js" e lo linko:

<!DOCTYPE html>
<html>
<head>
<script src="funzioni2.js"></script>
<script src="funzioniCanvas.js"></script>

Stessa cosa posso fare con la funzione rect che traccia un rettangolo:


function rect(x,y,w,h){
	ctx.beginPath();
	ctx.rect(x,y,w,h);
	ctx.closePath();
}

In questo caso il codice per il colore non è incluso nella funzione, ma è scritto a parte prima di chiamare la funzione.
Potrei fare la stessa scelta che per la funzione che traccia un cerchio, e includere il colore come parametro...

function rect(x,y,w,h,colore){
	ctx.fillStyle=colore;
	ctx.beginPath();
	ctx.rect(x,y,w,h);
	ctx.closePath();
	ctx.fill();
}

e funziona.
Tolgo questa funzione e la metto nel file di codice a parte.
E funziona!

La funzione clear che ripulisce il canvas consentendo l'effetto di animazione, posso portarla nel file di codice.
Questa però usa due variabili, che porto anch'esse nel file a parte:

function clear(){
	ctx.clearRect(0,0,WIDTH,HEIGHT);
}

E funziona ancora tutto.

Ora ci sono le funzioni che stabiliscono se sia stato premuto il tasto destra o sinistra. Queste mi sembrano sufficientemente generalizzabili da poterle portare nel file a parte: settano delle variabili booleane a seconda che sia stato premuto il tasto freccia destra o freccia sinistra, e affidano queste funzioni agli eventi onkeydown del documento HTML.
Fanno uso di due variabili booleane, che porto anch'esse sul file di codice.

var rightDown=false;
var leftDown=false;

document.onkeydown=OnKeyDown;
document.onkeyup=OnKeyUp;

function OnKeyDown(evt){

	if (evt.keyCode==39) rightDown=true;
	else if(evt.keyCode==37) leftDown=true;	
}

function OnKeyUp(evt){
	if (evt.keyCode==39) rightDown=false;
	else if (evt.keyCode==37) leftDown=false;
}

Ho ridotto quasi all'osso la cosa.
Ma potrei anche portare nel codice le procedure che "prendono possesso" del canvas e del contesto, tanto più che anch'esse usano variabili che vi ho già portato:

function inizia(){
	
	//creiamo la base del contesto.
	canvas=$("canvas");
	ctx=canvas.getContext("2d");
	WIDTH=canvas.width;
	HEIGHT=canvas.height;
....

La riscrivo come InitContext...

function initContext(nome){
	canvas=$(nome);
	ctx=canvas.getContext("2d");
	WIDTH=canvas.width;
	HEIGHT=canvas.height;
}

richiamandola dalla funzione iniziale:

function inizia(){
	
	initContext("canvas");
	
	
	paddlex=WIDTH/2-100;
	paddleh=10;
	paddlew=75;
	
	//funzione setInterval
	intervallo=setInterval(draw,15);
		
}

E quindi la porto sul file di codice insieme alle variabili che usa:

var canvas;
var ctx;

function initContext(nome){
	canvas=$(nome);
	ctx=canvas.getContext("2d");
	WIDTH=canvas.width;
	HEIGHT=canvas.height;
}

e funziona!

Io metterei anche una routine che inizializza tutte le variabili.
Prima dichiaro tutte le variabili, quindi le inizializzo in una funzione apposita:

//coordinate della palla
var x;
var y;
var dx;
var dy;

//coordinate della racchetta
var paddlex;
var paddlew;
var paddleh;

var intervallo;

function initVariables(){
	x=100;
	y=100;
	dx=2;
	dy=4;
	
	paddlew=75;
	paddleh=10;
	paddlex=WIDTH/2-120;
}

sabato 3 gennaio 2015

I codici di colore con lo stroke non combinano...

Prendiamo un ImageData di dimensioni 5 x 5.
Come facciamo?

function inizia(){
 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="white";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
}

Ecco.
Ora stampiamo 20 valori, corrispondenti ai valori dei primi 5 pixel:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="white";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

Ecco i primi 5 pixel (4 valori per pixel) con un rettangolo delle stesse dimensioni del canvas con uno sfondo bianco:

255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255

Ora cambiamo colore al rettangolo: rosso:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="red";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

255 0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 255 0 0 255

Verde:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="green";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 128 0 255 0 128 0 255 0 128 0 255 0 128 0 255 0 128 0 255

Blu:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="blue";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 255 0 0 255 255

Nero:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="black";
 ctx.rect(0,0,10,10);
 ctx.fill();

 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255 0 0 0 255

Sì, tutto corrisponde.

Ora proviamo con lo stroke piuttosto che col fill.

Sfondo bianco, stroke nero:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="white";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

64 64 64 255 64 64 64 255 64 64 64 255 64 64 64 255 128 128 128 255

Ora da sfondo bianco stroke nero cambiamo lo sfondo in rosso:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="red";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

64 0 0 255 64 0 0 255 64 0 0 255 64 0 0 255 128 0 0 255

Nero su verde:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="green";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 32 0 255 0 32 0 255 0 32 0 255 0 32 0 255 0 64 0 255

Nero su blu:

function inizia(){

 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="blue";
 ctx.rect(0,0,10,10);
 ctx.fill();
 
 ctx.strokeStyle="black";
 ctx.beginPath();
 ctx.moveTo(0,0)
 ctx.lineTo(5,0)
 ctx.closePath();
 ctx.stroke();
 sfondo=ctx.getImageData(0,0,5,5);
 for(var i=0;i<20;i++){
  document.write(sfondo.data[i]+" ");
 }
}

0 0 64 255 0 0 64 255 0 0 64 255 0 0 64 255 0 0 128 255

Cerchiamo di trarre delle conclusioni...

Nero su bianco: 64 64 64 255
Nero su rosso: 64 0 0 255
Nero su verde: 0 32 0 255
Nero su blu: 0 0 64 255

Buio pesto...