Appunti di programmazione

mercoledì 31 dicembre 2014

ImageData con il canvas

Ho un canvas che misura 600 x 600 pixel.
Ora creo un imageData.

<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var ctx;
var x;
var y;
var alfa;
var sfondo = new Image();

function inizia(){
 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="#FFFFCC";
 ctx.rect(0,0,600,600);
 ctx.fill();
 elabora();
}
function elabora(){
 
 var imgData = ctx.createImageData(100, 1);

 for (var i = 0; i < 100; i+=4) {
     imgData.data[i]=255;
     imgData.data[i+1]=0;
     imgData.data[i+2]=0;
     imgData.data[i+3]=255;
 }

 ctx.putImageData(imgData, 10, 10);
}

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

 <canvas id="myCanvas" width="600" height="600">
 </canvas>
</body>
</html>

Ho creato un'immagine di dimensioni 100 x 1;
Definisco i valori dei pixel ogni 4: rosso, verde, blu, trasparenza;
Metto l'immagine creata alle coordinate 10,10.

Ed ecco che viene fuori una striscia rossa orizzontale.

Come primo passo andiamo bene.

lunedì 29 dicembre 2014

Scrivere un file XML con il C#

Ho trovato il modo di scrivere un file XML direttamente da un programma fatto con iln C#.

private void button1_Click(object sender, EventArgs e)
        {
            XmlTextWriter writer = new XmlTextWriter("C:/Users/Antonello/product.xml", System.Text.Encoding.UTF8);
            writer.WriteStartDocument(true);
            writer.Formatting = Formatting.Indented;
            writer.Indentation = 2;
            writer.WriteStartElement("Table");
            createNode("1", "Product 1", "1000", writer);
            createNode("2", "Product 2", "2000", writer);
            createNode("3", "Product 3", "3000", writer);
            createNode("4", "Product 4", "4000", writer);
            writer.WriteEndElement();
            writer.WriteEndDocument();
            writer.Close();
            MessageBox.Show("XML File created ! ");
        }

        private void createNode(string pID, string pName, string pPrice, XmlTextWriter writer)
        {
            writer.WriteStartElement("Product");
            writer.WriteStartElement("Product_id");
            writer.WriteString(pID);
            writer.WriteEndElement();
            writer.WriteStartElement("Product_name");
            writer.WriteString(pName);
            writer.WriteEndElement();
            writer.WriteStartElement("Product_price");
            writer.WriteString(pPrice);
            writer.WriteEndElement();
            writer.WriteEndElement();
        }

Il file può essere creato dovunque.
Resta da studiare la cosa e da elaborare anche un programma per la lettura.

domenica 28 dicembre 2014

Una linea in movimento mediante il canvas

Ecco, ho cominciato a penetrare i segreti dell'animazione mediante il canvas.
Il meccanismo è banale.
Quel tutorial che avevo trovato è un tantinello cervellotico, ma mi è servito a capire il meccanismo, che poi ho verificato su un tutorial più facile da capire.
Ecco il codice:

<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var ctx;
var x;
var y;
var sfondo = new Image();

function inizia(){
 canvas=document.getElementById("myCanvas");
 ctx=canvas.getContext("2d");
 ctx.fillStyle="#000080";
 ctx.beginPath();
 ctx.rect(0,0,600,600);
 ctx.closePath();
 ctx.fill();
 sfondo=ctx.getImageData(0,0,600,600);
 x=0;
 y=600;

 z=setInterval(disegna,100);
}

function disegna(){
 ctx.putImageData(sfondo,0,0);
 ctx.strokeStyle="white";
 ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(x,y);
 ctx.closePath();
 ctx.stroke();
 x=x+10;
}

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

 <canvas id="myCanvas" width="600" height="600">
 </canvas>
</body>
</html>

che traccia una linea che si muove.

Game su canvas...

Ora il tutorial fa delle aggiunte.
Provo a marcarle in rosso...

<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var ctx;

//memorizziamo le immagini
var back = new Image();
var oldBack=new Image();
var ship=new Image();

//memorizziamo le coordinate
var shipX=0;
var shipY=0;
var oldShipX=0;
var oldShipY=0;

function canvasSpaceGame(){
 canvas=document.getElementById("myCanvas");
 
 ctx=canvas.getContext("2d");
 
 
 ctx.fillStyle="black";
 ctx.rect(0,0,300,300);
 ctx.fill();
 
 back=ctx.getImageData(0,0,30,30);
 
 stars();  
 
 makeShip();   
 
 
        gameLoop = setInterval(doGameLoop, 16);

        
        window.addEventListener('keydown', whatKey, true);
 
}

function stars(){
 for(var i=0;i<50;i++){
  x=Math.floor(Math.random()*299);
  y=Math.floor(Math.random()*299);
  
  ctx.fillStyle="yellow"
  if (x<30 || y<30) ctx.fillStyle="black";
  ctx.beginPath();
  ctx.arc(x,y,3,Math.PI*2,false);
  ctx.closePath();
  ctx.fill(); 
  
  oldBack=ctx.getImageData(0,0,30,30); 
 }
}
function makeShip() {

       
        ctx.beginPath();
        ctx.moveTo(28.4, 16.9);
        ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
        ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
        ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
        ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
        ctx.closePath();
        ctx.fillStyle = "rgb(222, 103, 0)";
        ctx.fill();

        
        ctx.beginPath();
        ctx.moveTo(22.3, 12.0);
        ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
        ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
        ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
        ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
        ctx.closePath();
        ctx.fillStyle = "rgb(51, 190, 0)";
        ctx.fill();
        
        ship=ctx.getImageData(0,0,30,30);
        ctx.putImageData(oldBack, 0, 0);
}
  

window.addEventListener("load",function(){canvasSpaceGame()});
</script>
</head>
<body>
 <canvas id="myCanvas" width="300" height="300">
 </canvas>
</body>
</html>

Ho marcato in verde le variabili globali, in rosso le istruzioni che memorizzano in una variabile delle immagini o le rimettono sul canvas (a quanto ho capito adesso) e in blu due righe che poco ancora capisco, di cui una aggiunge un evento da tastiera.

Ho notato che putImageData, da quanto riesco a capire, rimette sullo schermo il contenuto di immagine immagazzinato in una variabile precedentemente, e infatti rimettendo alle coordinate 0 e 0 oldBack nasconde l'astronave...

Cielo stellato e variazioni.

Seguiamo pedissequamente...

C'era il fatto di disegnare 50 stelle casuali.
Bene, adesso ho fatto un po' di variazioni e ho disegnato un cielo stellato più ampio, con stelle gialle.

<!DOCTYPE html>
<html>
<head>
<script>
function canvasSpaceGame(){
	canvas=document.getElementById("myCanvas");
	
	ctx=canvas.getContext("2d");
	
	
	ctx.fillStyle="black";
	ctx.rect(0,0,1000,600);
	ctx.fill();
	
	stars();     
}

function stars(){
	for(var i=0;i<6000;i++){
		x=Math.floor(Math.random()*999);
		y=Math.floor(Math.random()*999);
		
		ctx.fillStyle="yellow"
		
		ctx.beginPath();
		ctx.arc(x,y,1,Math.PI*2,false);
		ctx.closePath();
		ctx.fill();
	}
}
		

window.addEventListener("load",function(){canvasSpaceGame()});
</script>
</head>
<body>
	<canvas id="myCanvas" width="1000" height="600">
	</canvas>
</body>
</html>

Come posso fare per fare alcune stelle gialle e altre bianche?

<!DOCTYPE html>
<html>
<head>
<script>
function canvasSpaceGame(){
	canvas=document.getElementById("myCanvas");
	
	ctx=canvas.getContext("2d");
	
	
	ctx.fillStyle="black";
	ctx.rect(0,0,1000,600);
	ctx.fill();
	
	stars();     
}

function stars(){
	for(var i=0;i<3000;i++){
		x=Math.floor(Math.random()*999);
		y=Math.floor(Math.random()*999);
		
		ctx.fillStyle="yellow"
		
		ctx.beginPath();
		ctx.arc(x,y,1,Math.PI*2,false);
		ctx.closePath();
		ctx.fill();
		
		x=Math.floor(Math.random()*999);
		y=Math.floor(Math.random()*999);
		
		ctx.fillStyle="white"
		
		ctx.beginPath();
		ctx.arc(x,y,1,Math.PI*2,false);
		ctx.closePath();
		ctx.fill();
	}
	
}
		

window.addEventListener("load",function(){canvasSpaceGame()});
</script>
</head>
<body>
	<canvas id="myCanvas" width="1000" height="600">
	</canvas>
</body>
</html>

fillStyle, rect e fill nel canvas

Preso possesso del canvas, adesso vediamo che ci posso fare...

<!DOCTYPE html>
<html>
<head>
<script>
function canvasSpaceGame(){
	canvas=document.getElementById("myCanvas");
	
	ctx=canvas.getContext("2d");
	
	
	ctx.fillStyle="#AAFFBB";
	ctx.rect(0,0,300,300);
	ctx.fill();
}


window.addEventListener("load",function(){canvasSpaceGame()});
</script>
</head>
<body>
	<canvas id="myCanvas" width="300" height="300">
	</canvas>
</body>
</html>

Ecco, ho definito il colore di riempimento, delineato un rettangolo e dato il comando fill che riempie il rettangolo in questione...

Iniziamo col canvas: prendiamone possesso dal Javascript...

Scriviamo Tutorial di riferimento il codice di un canvas, con tutti gli elementi del Path per tracciare "roba" su di esso...

<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
 <canvas id="myCanvas" width="300" height="300">
 </canvas>
</body>
</html>

Ora con il Javascript "prendiamo possesso" del canvas...

Inizio con la prima funzione Javascript "associata" all'evento load della finestra.

<!DOCTYPE html>
<html>
<head>
<script>
function inizia(){
 
}


window.addEventListener("load",function(){inizia()});
</script>
</head>
<body>
 <canvas id="myCanvas" width="300" height="300">
 </canvas>
</body>
</html>

E ora "prendiamo possesso" del canvas.

<!DOCTYPE html>
<html>
<head>
<script>
function canvasSpaceGame(){
 canvas=document.getElementById("myCanvas");
 
 ctx=canvas.getContext("2d");
 
}


window.addEventListener("load",function(){canvasSpaceGame()});
</script>
</head>
<body>
 <canvas id="myCanvas" width="300" height="300">
 </canvas>
</body>
</html>