WIKI CoderDojo Firenze - Contributi utente [it]

Cells

2016-05-22T16:39:31Z

Mbert:

= <font face="Trebuchet MS, sans-serif">Cells</font> =

<font face="Trebuchet MS, sans-serif">Il file 'cells.html' (trovate tutto in [[Media:Cells.zip|Cells.zip]]) realizza un gioco ispirato a ciò che è stato detto all'ultima riunione su agar.io. Il concetto è cellula grande mangia cellula piccola. Il giocatore controlla il movimento della cellula blu, il computer (ovvero il caso) controlla le altre cellule, rosse o cambiando il commento di colore casuale.</font>

<font face="Trebuchet MS, sans-serif">La parte html ha un titolo, una riga per punteggio e record e l'elemento canvas che consente di disegnare il campo da gioco e le cellule in movimento.</font>

<font face="Trebuchet MS, sans-serif">Il codice inizia con la definizione delle variabili, una serie di funzioni, la gestione dei tasti freccia e la chiamata alla funzione 'init' che crea la cellula del giocatore, le altre cellule ed il loop del gioco.</font>

<font face="Trebuchet MS, sans-serif">La funzione 'scena' controlla lo svolgimento del gioco, muove la cellula del giocatore in base ai tasti premuti e le altre cellule casualmente. Controlla se qualche cellula mangia altre cellule o esce dallo schermo. Quando una cellula mangia cresce, quando viene mangiata o esce dallo schermo esce dal gioco. Il giocatore vince quando rimane l'unica cellula o cresce troppo. Perde quando viene mangiato o esce dallo schermo. Ad ogni ciclo del gioco e ogni volta che una cellula viene mangiata, può nascere una nuova cellula.</font>
[[Category:Javascript|C]]

Cells

2016-05-22T12:53:51Z

Mbert:

= <font face="Trebuchet MS, sans-serif">[[Category:Javascript|C]]Cells</font> =

<font face="Trebuchet MS, sans-serif">Il file 'cells.html' (trovate tutto in [[Cells.zip|Cells.zip]]) realizza un gioco ispirato a ciò che è stato detto all'ultima riunione su agar.io. Il concetto è cellula grande mangia cellula piccola. Il giocatore controlla il movimento della cellula blu, il computer (ovvero il caso) controlla le altre cellule, rosse o cambiando il commento di colore casuale.</font>

<font face="Trebuchet MS, sans-serif">La parte html ha un titolo, una riga per punteggio e record e l'elemento canvas che consente di disegnare il campo da gioco e le cellule in movimento.</font>

<font face="Trebuchet MS, sans-serif">Il codice inizia con la definizione delle variabili, una serie di funzioni, la gestione dei tasti freccia e la chiamata alla funzione 'init' che crea la cellula del giocatore, le altre cellule ed il loop del gioco.</font>

<font face="Trebuchet MS, sans-serif">La funzione 'scena' controlla lo svolgimento del gioco, muove la cellula del giocatore in base ai tasti premuti e le altre cellule casualmente. Controlla se qualche cellula mangia altre cellule o esce dallo schermo. Quando una cellula mangia cresce, quando viene mangiata o esce dallo schermo esce dal gioco. Il giocatore vince quando rimane l'unica cellula o cresce troppo. Perde quando viene mangiato o esce dallo schermo. Ad ogni ciclo del gioco e ogni volta che una cellula viene mangiata, può nascere una nuova cellula.</font>

File:Cells.zip

2016-05-22T12:51:42Z

Mbert: Gioco Cells

Gioco Cells

Cells

2016-05-22T12:50:43Z

Mbert: Javascript gioco Cells

= <font face="Trebuchet MS, sans-serif">Cells</font> =

<font face="Trebuchet MS, sans-serif">Il file 'cells.html' (trovate tutto in Cells.zip) realizza un gioco ispirato a ciò che è stato detto all'ultima riunione su agar.io. Il concetto è cellula grande mangia cellula piccola. Il giocatore controlla il movimento della cellula blu, il computer (ovvero il caso) controlla le altre cellule, rosse o cambiando il commento di colore casuale.</font>

<font face="Trebuchet MS, sans-serif">La parte html ha un titolo, una riga per punteggio e record e l'elemento canvas che consente di disegnare il campo da gioco e le cellule in movimento.</font>

<font face="Trebuchet MS, sans-serif">Il codice inizia con la definizione delle variabili, una serie di funzioni, la gestione dei tasti freccia e la chiamata alla funzione 'init' che crea la cellula del giocatore, le altre cellule ed il loop del gioco.</font>

<font face="Trebuchet MS, sans-serif">La funzione 'scena' controlla lo svolgimento del gioco, muove la cellula del giocatore in base ai tasti premuti e le altre cellule casualmente. Controlla se qualche cellula mangia altre cellule o esce dallo schermo. Quando una cellula mangia cresce, quando viene mangiata o esce dallo schermo esce dal gioco. Il giocatore vince quando rimane l'unica cellula o cresce troppo. Perde quando viene mangiato o esce dallo schermo. Ad ogni ciclo del gioco e ogni volta che una cellula viene mangiata, può nascere una nuova cellula.</font>

Snake

2016-01-24T16:37:57Z

Mbert:

= [[Category:Javascript|S]]'Snake' - il gioco del serpente =

Il file 'snake.html' (trovate tutto in [[Media:Snake.zip|Snake.zip]]) realizza il gioco del serpente, passatempo presente su molti telefonini di prima generazione.

Data la lunghezza del codice ho inserito nello zip anche 6 file intermedi da cui poter partire.

La parte html ha un titolo, due righe per punteggio e record e l'elemento canvas che consente di disegnare il campo da gioco, serpente e cibo.

Il codice inizia con la definizione delle variabili, una serie di funzioni, la gestione dei tasti freccia e la chiamata alla funzione 'init' che crea il serpente, il cibo ed il loop del gioco.

Il serpente è un array, ogni elemento rappresente una cella del serpente. Quando il serpente si muove una nuova testa viene aggiunta al serpente e la coda, l'ultimo elemento del serpente viene eliminata. In questo modo si ottiene il movimento del serpente guidato dai tasti. La funzione 'scena' decide la nuova posizione della testa e verifica le condizioni di gioco: il serpente esce dal campo, il serpente si mangia. Quando la nuova testa è sul cibo il punteggio viene incrementato e creato un nuovo cibo.

= Possibili varianti =

Inserire degli ostacoli.

Creare più cibo.

Creare dei tunnel o porte comunicanti (come suggerito da un ninja).

Snake

2016-01-24T16:37:32Z

Mbert: Creata pagina con "= 'Snake' - il gioco del serpente = Il file 'snake.html' (trovate tutto in Snake.zip) realizza il gioco del serpente, passatempo presente su molti telefon..."

= 'Snake' - il gioco del serpente =

Il file 'snake.html' (trovate tutto in [[Media:Snake.zip|Snake.zip]]) realizza il gioco del serpente, passatempo presente su molti telefonini di prima generazione.

Data la lunghezza del codice ho inserito nello zip anche 6 file intermedi da cui poter partire.

La parte html ha un titolo, due righe per punteggio e record e l'elemento canvas che consente di disegnare il campo da gioco, serpente e cibo.

Il codice inizia con la definizione delle variabili, una serie di funzioni, la gestione dei tasti freccia e la chiamata alla funzione 'init' che crea il serpente, il cibo ed il loop del gioco.

Il serpente è un array, ogni elemento rappresente una cella del serpente. Quando il serpente si muove una nuova testa viene aggiunta al serpente e la coda, l'ultimo elemento del serpente viene eliminata. In questo modo si ottiene il movimento del serpente guidato dai tasti. La funzione 'scena' decide la nuova posizione della testa e verifica le condizioni di gioco: il serpente esce dal campo, il serpente si mangia. Quando la nuova testa è sul cibo il punteggio viene incrementato e creato un nuovo cibo.

= Possibili varianti =

Inserire degli ostacoli.

Creare più cibo.

Creare dei tunnel o porte comunicanti (come suggerito da un ninja).

File:Snake.zip

2016-01-24T16:35:34Z

Mbert: Snake tutorial

Snake tutorial

Grafico

2016-01-24T14:12:01Z

Mbert:

= Disegnare un grafico in una pagina HTML =

Il file Grafico.html (trovate tutto in [[Media:Grafico.zip|Grafico.zip]]) contiene la parte html e javascript necessarie per visualizzare il grafico di una funzione matematica ''y = f(x)'', naturalmente questa funzione deve essere inserita come funzione javascript con un parametro, ovvero la variabile ''x'' ed un valore di ritorno che contiene il valore ''y di f(x)''. Ponete attenzione al valore di ritorno: deve essere un numero; a parte questo la funzione non ha altre restrizioni.

La parte html ha un titolo e l'elemento che consente di disegnare il grafico, un tag canvas con 'id' e dimensioni desiderate.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grafici</title>
<style>
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<center>
<h1>Grafico</h1>
<br/>
<canvas id="grafico" width="640" height="480"></canvas>
</center>
</div>
<script type="text/javascript">
...
</script>
</body>
</html>
</pre>
La parte javascript contiene 4 funzioni utilizzabili come esempi di ''y = f(x)''.
<pre>// Esempi di funzione
function fun1(x) {return Math.sin(x); }
function fun2(x) {return Math.cos(3*x);}
function fun3(x) {return fun1(x) * fun2(5*x);}
function fun4(x) {return fun1(x*x) * fun2(x);}

//Inizializzazione Canvas
var canvas = document.getElementById('grafico'),
ctx = canvas.getContext("2d"),
graph = {},
axes = {};
</pre>
<br/>Nella parte di definizione delle variabili il tag canvas viene inserito in una variabile e recuperato il suo contesto bidimensionale. In Html il canvas è un oggetto complesso, cioé contenente molti metodi per disegnare, sia in 2D che in 3D, questi metodi sono esposti nel contesto ottenuto con ''getContext''.

Seguono le due funzioni che disegnano gli assi ed il grafico vero e proprio.

La funzione 'funGraph' prende 3 parametri il primo è la funzione da disegnare, seguono il colore e lo spessore della linea utilizzata.

<pre>function funGraph (func,color,thick) {
var dx = graph.step || 4;
var iMax = Math.round((ctx.canvas.width - axes.x0)/dx);
var iMin = graph.drawNegative ? Math.round(-axes.x0/dx) : 0;

graph.scaleX = graph.scaleX || 40;
graph.scaleY = graph.scaleY || graph.scaleX || 40;
ctx.beginPath();
ctx.lineWidth = thick;
ctx.strokeStyle = color;

for (var i=iMin;i<=iMax;i++) {
var x = dx*i;
var y = graph.scaleY*func(x/graph.scaleX);
if (i==iMin)
ctx.moveTo(axes.x0 + x, axes.y0 - y);
else
ctx.lineTo(axes.x0 + x, axes.y0 - y);
}
ctx.stroke();
};

function showAxes() {
var xmin = graph.drawNegative ? 0 : axes.x0;

ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
// X axis
ctx.moveTo(xmin, axes.y0);
ctx.lineTo(ctx.canvas.width, axes.y0);
// Y axis
ctx.moveTo(axes.x0, 0);
ctx.lineTo(axes.x0, ctx.canvas.height);
ctx.stroke();
};
</pre>
La parte che segue disegna lo sfondo ed il contorno del grafico ed inizializza la posizione degli assi, la scala del grafico e la definizione cioè il numero di pixel usati ad ogni passo della variabile x.

Infine chiama le funzioni precedenti per disegnare gli assi e due delle funzioni di esempio.

<pre> // Preparo il grafico
graph.scaleX = 50; // 50 pixels from x=0 to x=1
graph.scaleY = 80; // 80 pixels from y=0 to y=1
graph.step = 2; // 2 pixels step
graph.drawNegative = true;

// Coloriamo lo sfondo
ctx.fillStyle = "lightgreen";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Disegniamo il bordo
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, canvas.width, canvas.height);

// Preparo gli assi
axes.x0 = (canvas.width + 1.) / 2;
axes.y0 = (canvas.height + 1.) / 2;

// visualizzo assi cartesiani
showAxes();
// disegno funzioni
funGraph(fun1,"rgb(11,153,11)",1);
funGraph(fun3,"rgb(66,44,255)",2);
</pre>

== Evoluzione ==

Il file grafico2.html contiene una evoluzione del precedente.

Contiene sostanzialmente lo stesso codice, ma inserito in un oggetto che espone 3 metodi. Riscritto in questo modo l'oggetto, inserito nella variabile 'grafico', rende possibile la creazione di più grafici nella stessa pagina.

Il metodo 'attach' da chiamare per primo, associa un tag canvas al grafico e opzionalmente mdifica le variabili di disegno.

Il metodo 'drawAxes' disegna gli assi.

E naturalmente il metodo 'drawGraph' disegna la funzione passata.
[[Category:Javascript|G]]

Grafico

2016-01-24T14:11:01Z

Mbert:

= [[Category:Javascript|G]]Disegnare un grafico in una pagina HTML =

Il file Grafico.html (trovate tutto in [[Media:Grafico.zip|Grafico.zip]]) contiene la parte html e javascript necessarie per visualizzare il grafico di una funzione matematica ''y = f(x)'', naturalmente questa funzione deve essere inserita come funzione javascript con un parametro, ovvero la variabile ''x'' ed un valore di ritorno che contiene il valore ''y di f(x)''. Ponete attenzione al valore di ritorno: deve essere un numero; a parte questo la funzione non ha altre restrizioni.

La parte html ha un titolo e l'elemento che consente di disegnare il grafico, un tag canvas con 'id' e dimensioni desiderate.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grafici</title>
<style>
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<center>
<h1>Grafico</h1>
<br/>
<canvas id="grafico" width="640" height="480"></canvas>
</center>
</div>
<script type="text/javascript">
...
</script>
</body>
</html>
</pre>
La parte javascript contiene 4 funzioni utilizzabili come esempi di ''y = f(x)''.
<pre>// Esempi di funzione
function fun1(x) {return Math.sin(x); }
function fun2(x) {return Math.cos(3*x);}
function fun3(x) {return fun1(x) * fun2(5*x);}
function fun4(x) {return fun1(x*x) * fun2(x);}

//Inizializzazione Canvas
var canvas = document.getElementById('grafico'),
ctx = canvas.getContext("2d"),
graph = {},
axes = {};
</pre>
<br/>Nella parte di definizione delle variabili il tag canvas viene inserito in una variabile e recuperato il suo contesto bidimensionale. In Html il canvas è un oggetto complesso, cioé contenente molti metodi per disegnare, sia in 2D che in 3D, questi metodi sono esposti nel contesto ottenuto con ''getContext''.

Seguono le due funzioni che disegnano gli assi ed il grafico vero e proprio.

La funzione 'funGraph' prende 3 parametri il primo è la funzione da disegnare, seguono il colore e lo spessore della linea utilizzata.

<pre>function funGraph (func,color,thick) {
var dx = graph.step || 4;
var iMax = Math.round((ctx.canvas.width - axes.x0)/dx);
var iMin = graph.drawNegative ? Math.round(-axes.x0/dx) : 0;

graph.scaleX = graph.scaleX || 40;
graph.scaleY = graph.scaleY || graph.scaleX || 40;
ctx.beginPath();
ctx.lineWidth = thick;
ctx.strokeStyle = color;

for (var i=iMin;i<=iMax;i++) {
var x = dx*i;
var y = graph.scaleY*func(x/graph.scaleX);
if (i==iMin)
ctx.moveTo(axes.x0 + x, axes.y0 - y);
else
ctx.lineTo(axes.x0 + x, axes.y0 - y);
}
ctx.stroke();
};

function showAxes() {
var xmin = graph.drawNegative ? 0 : axes.x0;

ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
// X axis
ctx.moveTo(xmin, axes.y0);
ctx.lineTo(ctx.canvas.width, axes.y0);
// Y axis
ctx.moveTo(axes.x0, 0);
ctx.lineTo(axes.x0, ctx.canvas.height);
ctx.stroke();
};
</pre>
La parte che segue disegna lo sfondo ed il contorno del grafico ed inizializza la posizione degli assi, la scala del grafico e la definizione cioè il numero di pixel usati ad ogni passo della variabile x.

Infine chiama le funzioni precedenti per disegnare gli assi e due delle funzioni di esempio.

<pre> // Preparo il grafico
graph.scaleX = 50; // 50 pixels from x=0 to x=1
graph.scaleY = 80; // 80 pixels from y=0 to y=1
graph.step = 2; // 2 pixels step
graph.drawNegative = true;

// Coloriamo lo sfondo
ctx.fillStyle = "lightgreen";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Disegniamo il bordo
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, canvas.width, canvas.height);

// Preparo gli assi
axes.x0 = (canvas.width + 1.) / 2;
axes.y0 = (canvas.height + 1.) / 2;

// visualizzo assi cartesiani
showAxes();
// disegno funzioni
funGraph(fun1,"rgb(11,153,11)",1);
funGraph(fun3,"rgb(66,44,255)",2);
</pre>
Evoluzione

Il file grafico2.html contiene una evoluzione del precedente.

Contiene sostanzialmente lo stesso codice, ma inserito in un oggetto che espone 3 metodi. Riscritto in questo modo l'oggetto, inserito nella variabile 'grafico', rende possibile la creazione di più grafici nella stessa pagina.

Il metodo 'attach' da chiamare per primo, associa un tag canvas al grafico e opzionalmente mdifica le variabili di disegno.

Il metodo 'drawAxes' disegna gli assi.

E naturalmente il metodo 'drawGraph' disegna la funzione passata.

Grafico

2016-01-24T14:09:49Z

Mbert: Creata pagina con "= Disegnare un grafico in una pagina HTML = Il file Grafico.html (trovate tutto in Grafico.zip) contiene la parte html e javascript necessarie per visua..."

= Disegnare un grafico in una pagina HTML =

Il file Grafico.html (trovate tutto in [[Media:Grafico.zip|Grafico.zip]]) contiene la parte html e javascript necessarie per visualizzare il grafico di una funzione matematica ''y = f(x)'', naturalmente questa funzione deve essere inserita come funzione javascript con un parametro, ovvero la variabile ''x'' ed un valore di ritorno che contiene il valore ''y di f(x)''. Ponete attenzione al valore di ritorno: deve essere un numero; a parte questo la funzione non ha altre restrizioni.

La parte html ha un titolo e l'elemento che consente di disegnare il grafico, un tag canvas con 'id' e dimensioni desiderate.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grafici</title>
<style>
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<center>
<h1>Grafico</h1>
<br/>
<canvas id="grafico" width="640" height="480"></canvas>
</center>
</div>
<script type="text/javascript">
...
</script>
</body>
</html>
</pre>
La parte javascript contiene 4 funzioni utilizzabili come esempi di ''y = f(x)''.
<pre>// Esempi di funzione
function fun1(x) {return Math.sin(x); }
function fun2(x) {return Math.cos(3*x);}
function fun3(x) {return fun1(x) * fun2(5*x);}
function fun4(x) {return fun1(x*x) * fun2(x);}

//Inizializzazione Canvas
var canvas = document.getElementById('grafico'),
ctx = canvas.getContext("2d"),
graph = {},
axes = {};
</pre>
<br/>Nella parte di definizione delle variabili il tag canvas viene inserito in una variabile e recuperato il suo contesto bidimensionale. In Html il canvas è un oggetto complesso, cioé contenente molti metodi per disegnare, sia in 2D che in 3D, questi metodi sono esposti nel contesto ottenuto con ''getContext''.

Seguono le due funzioni che disegnano gli assi ed il grafico vero e proprio.

La funzione 'funGraph' prende 3 parametri il primo è la funzione da disegnare, seguono il colore e lo spessore della linea utilizzata.

<pre>function funGraph (func,color,thick) {
var dx = graph.step || 4;
var iMax = Math.round((ctx.canvas.width - axes.x0)/dx);
var iMin = graph.drawNegative ? Math.round(-axes.x0/dx) : 0;

graph.scaleX = graph.scaleX || 40;
graph.scaleY = graph.scaleY || graph.scaleX || 40;
ctx.beginPath();
ctx.lineWidth = thick;
ctx.strokeStyle = color;

for (var i=iMin;i<=iMax;i++) {
var x = dx*i;
var y = graph.scaleY*func(x/graph.scaleX);
if (i==iMin)
ctx.moveTo(axes.x0 + x, axes.y0 - y);
else
ctx.lineTo(axes.x0 + x, axes.y0 - y);
}
ctx.stroke();
};

function showAxes() {
var xmin = graph.drawNegative ? 0 : axes.x0;

ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
// X axis
ctx.moveTo(xmin, axes.y0);
ctx.lineTo(ctx.canvas.width, axes.y0);
// Y axis
ctx.moveTo(axes.x0, 0);
ctx.lineTo(axes.x0, ctx.canvas.height);
ctx.stroke();
};
</pre>
La parte che segue disegna lo sfondo ed il contorno del grafico ed inizializza la posizione degli assi, la scala del grafico e la definizione cioè il numero di pixel usati ad ogni passo della variabile x.

Infine chiama le funzioni precedenti per disegnare gli assi e due delle funzioni di esempio.

<pre> // Preparo il grafico
graph.scaleX = 50; // 50 pixels from x=0 to x=1
graph.scaleY = 80; // 80 pixels from y=0 to y=1
graph.step = 2; // 2 pixels step
graph.drawNegative = true;

// Coloriamo lo sfondo
ctx.fillStyle = "lightgreen";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Disegniamo il bordo
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, canvas.width, canvas.height);

// Preparo gli assi
axes.x0 = (canvas.width + 1.) / 2;
axes.y0 = (canvas.height + 1.) / 2;

// visualizzo assi cartesiani
showAxes();
// disegno funzioni
funGraph(fun1,"rgb(11,153,11)",1);
funGraph(fun3,"rgb(66,44,255)",2);
</pre>
Evoluzione

Il file grafico2.html contiene una evoluzione del precedente.

Contiene sostanzialmente lo stesso codice, ma inserito in un oggetto che espone 3 metodi. Riscritto in questo modo l'oggetto, inserito nella variabile 'grafico', rende possibile la creazione di più grafici nella stessa pagina.

Il metodo 'attach' da chiamare per primo, associa un tag canvas al grafico e opzionalmente mdifica le variabili di disegno.

Il metodo 'drawAxes' disegna gli assi.

E naturalmente il metodo 'drawGraph' disegna la funzione passata.

File:Grafico.zip

2016-01-24T13:56:09Z

Mbert: Tutorial Grafico.html

Tutorial Grafico.html

Earth3D

2014-12-17T08:23:49Z

Mbert:

= '''La terra in 3D''' =

Come ho pensato lo sviluppo dell'esempio.

Occorre copiare lo zip [[Media:Earth3D.zip|Earth3D.zip]] e il file delle immagini aggiuntive [[Media:Earth3DImmaginiAdd.zip|Earth3DImmaginiAdd.zip]] sulla macchina del coderNinja.

Il file <tt>EarthFinale.html</tt> è il risultato alla fine del tutorial.

Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito faccio riferimento ad esso, in copia qui sotto.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Il Mondoooo</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/coderDojoLib.js"></script>
</head>
<body onload="start()">
<script>
var canvas3d, r = 16;
function start() {
canvas3d = new cdRender3d();

var geometry = new THREE.SphereGeometry(r, 32, 32);
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

canvas3d.addMesh(geometry, material);

canvas3d.runRender();
}

// 1 Step
// var material = new THREE.MeshPhongMaterial();
// canvas3d.addLight();
// canvas3d.addSpot(0xaf9f8f, 0.3);

// 2 Step
// material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());
// material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());
// material.bumpScale = 0.6;
// material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());
// material.specular = new THREE.Color('grey');
//

// Alternative
// riga 20 //canvas3d = new cdRender3d({ctrl: true});
// riga 22
//var geometry = new THREE.OctahedronGeometry(r, 0);
//var geometry = new THREE.DodecahedronGeometry(r, 0);
//var geometry = new THREE.BoxGeometry(r, r, r);
//var geometry = new THREE.TorusGeometry( r, 0.4 * r, 32, 64 );

// riga 25 //material.map = THREE.ImageUtils.loadTexture('img/BabyTux.png', undefined, canvas3d.getRender());

// posizioni GPS di Firenze, Parigi, Londra, New York, Sidney
//var parameters = [
// [ 43.771417, 11.253836, 1.4 ],
// [ 48.859405, 2.353880, 1.1 ],
// [ 51.518809, -0.127056, 1.3 ],
// [ 40.735661, -73.996460, 1.5 ],
// [ -33.849974, 151.208077, 1.2 ],
//];

// Riga 45 //canvas3d.addPositions(parameters);

</script>
</body>
</html>

</pre>
== Partenza ==

Il file base crea una palla o meglio un cerchio blu su sfondo nero.

Cambiando il valore di color alla riga 23 si cambia il colore della palla

== Passo 1) ==

Commento riga 23 e aggiungo la prima riga di step1

--> var material = new THREE.MeshPhongMaterial();

Tutto nero, manca una luce

Aggiungo a riga 28 una luce, la seconda riga di step1

--> canvas3d.addLight();

Ricompare un cerchio (bianco grigio), il colore si può cambiare passando il valore numerico in addLight es: 0xc2 è blu, 0xc20000 è rosso.

In partenza è stato usato un materiale base che ha un colore, adesso usiamo un materiale riflettente, quindi serve una luce per vederlo.

L'impressione è ancora piatta, aggiungiamo un faretto per creare l'effetto 3D con luci e ombre.

Aggiungo a riga 29 un faretto, la terza riga di step1

--> canvas3d.addSpot(0xaf9f8f, 0.3);

Il primo parametro è il colore, il secondo l'intensità.

Notate che il faretto sta ruotando intorno alla sfera.

== Passo 2) ==

Diamo l'aspetto della terra alla sfera.

Aggiungo a riga 25 la texture della terra, la prima riga di step2

--> material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());

Cambiando la riga 20 ovvero aggiungendo il parametro {ctrl: true}, passiamo dalla rotazione automatica a quella manuale.

Trascinando (btn sinistro) il mouse la terra ruota, con la rotella si fa lo zoom.

Aggiungo a riga 26 e 27 la rugosità, la seconda e terza riga di step2

--> material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());

--> material.bumpScale = 0.6;

Il parametro bumpScale dà la proporzione di 'rugosità' definita nella texture.

Aggiungo a riga 28 e 29 l'effetto specchio, la quarta e quinta riga di step2

--> material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());

--> material.specular = new THREE.Color('grey');

== Alternative ==

Nello step alternative ho messo alcune modifiche oltre al già citato controllo manuale, e ai giochi con i colori

Cambiando la gemetria, dalla sfera al toro ...

Cambiando le texture o cambiando pianeta (le mappe sono prese da [http://planetpixelemporium.com/earth.html http://planetpixelemporium.com/earth.html])

== Step aggiuntivo. ==

Date delle posizioni GPS il comando addPositions le mostra sulla sfera
[[Category:Javascript|T]]

Earth3D

2014-12-17T08:21:46Z

Mbert:

= '''La terra in 3D''' =

Come ho pensato lo sviluppo dell'esempio.

Occorre copiare lo zip [[Media:Earth3D.zip|Earth3D.zip]] e il file delle immagini aggiuntive [[Media:Earth3DImmaginiAdd.zip|Earth3DImmaginiAdd.zip]] sulla macchina del coderNinja.

Il file <tt>EarthFinale.html</tt> è il risultato alla fine del tutorial.

Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito faccio riferimento ad esso, in copia qui sotto.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Il Mondoooo</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/coderDojoLib.js"></script>
</head>
<body onload="start()">
<script>
var canvas3d, r = 16;
function start() {
canvas3d = new cdRender3d();

var geometry = new THREE.SphereGeometry(r, 32, 32);
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

canvas3d.addMesh(geometry, material);

canvas3d.runRender();
}

// 1 Step
// var material = new THREE.MeshPhongMaterial();
// canvas3d.addLight();
// canvas3d.addSpot(0xaf9f8f, 0.3);

// 2 Step
// material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());
// material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());
// material.bumpScale = 0.6;
// material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());
// material.specular = new THREE.Color('grey');
//

// Alternative
// riga 20 //canvas3d = new cdRender3d({ctrl: true});
// riga 22
//var geometry = new THREE.OctahedronGeometry(r, 0);
//var geometry = new THREE.DodecahedronGeometry(r, 0);
//var geometry = new THREE.BoxGeometry(r, r, r);
//var geometry = new THREE.TorusGeometry( r, 0.4 * r, 32, 64 );

// riga 25 //material.map = THREE.ImageUtils.loadTexture('img/BabyTux.png', undefined, canvas3d.getRender());

// posizioni GPS di Firenze, Parigi, Londra, New York, Sidney
//var parameters = [
// [ 43.771417, 11.253836, 1.4 ],
// [ 48.859405, 2.353880, 1.1 ],
// [ 51.518809, -0.127056, 1.3 ],
// [ 40.735661, -73.996460, 1.5 ],
// [ -33.849974, 151.208077, 1.2 ],
//];

// Riga 45 //canvas3d.addPositions(parameters);

</script>
</body>
</html>

</pre>
== Partenza ==

Il file base crea una palla o meglio un cerchio blu su sfondo nero.

Cambiando il valore di color alla riga 23 si cambia il colore della palla

== Passo 1) ==

Commento riga 23 e aggiungo la prima riga di step1

--> var material = new THREE.MeshPhongMaterial();

Tutto nero, manca una luce

Aggiungo a riga 28 una luce, la seconda riga di step1

--> canvas3d.addLight();

Ricompare un cerchio (bianco grigio), il colore si può cambiare passando il valore numerico in addLight es: 0xc2 è blu, 0xc20000 è rosso.

In partenza è stato usato un materiale base che ha un colore, adesso usiamo un materiale riflettente, quindi serve una luce per vederlo.

L'impressione è ancora piatta, aggiungiamo un faretto per creare l'effetto 3D con luci e ombre.

Aggiungo a riga 29 un faretto, la terza riga di step1

--> canvas3d.addSpot(0xaf9f8f, 0.3);

Il primo parametro è il colore, il secondo l'intensità.

Notate che il faretto sta ruotando intorno alla sfera.

== Passo 2) ==

Diamo l'aspetto della terra alla sfera.

Aggiungo a riga 25 la texture della terra, la prima riga di step2

--> material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());

Cambiando la riga 20 ovvero aggiungendo il parametro {ctrl: true}, passiamo dalla rotazione automatica a quella manuale.

Trascinando (btn sinistro) il mouse la terra ruota, con la rotella si fa lo zoom.

Aggiungo a riga 26 e 27 la rugosità, la seconda e terza riga di step2

--> material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());

--> material.bumpScale = 0.6;

Il parametro bumpScale dà la proporzione di rugosità definita nella texture.

Aggiungo a riga 28 e 29 l'effetto specchio, la quarta e quinta riga di step2

--> material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());

--> material.specular = new THREE.Color('grey');

== Alternative ==

Nello step alternative ho messo alcune modifiche oltre al già citato controllo manuale, e ai giochi con i colori

Cambiando la gemetria, dalla sfera al toro ...

Cambiando le texture o cambiando pianeta (le mappe sono prese da [http://planetpixelemporium.com/earth.html http://planetpixelemporium.com/earth.html])

== Step aggiuntivo. ==

Date delle posizioni GPS il comando addPositions le mostra sulla sfera
[[Category:Javascript|T]]

File:Earth3DImmaginiAdd.zip

2014-12-17T08:15:53Z

Mbert: Immagini addizionali per giocare sul texture della sfera

Immagini addizionali per giocare sul texture della sfera

File:Earth3D.zip

2014-12-17T08:14:14Z

Mbert:

Earth3D

2014-12-16T12:11:52Z

Mbert:

= '''[[Category:Javascript|T]]La terra in 3D''' =

Come ho pensato lo sviluppo dell'esempio.

Occorre copiare lo zip <>

Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito faccio riferimento ad esso.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Il Mondoooo</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/coderDojoLib.js"></script>
</head>
<body onload="start()">
<script>
var canvas3d, r = 16;
function start() {
canvas3d = new cdRender3d();

var geometry = new THREE.SphereGeometry(r, 32, 32);
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

canvas3d.addMesh(geometry, material);

canvas3d.runRender();
}

// 1 Step
// var material = new THREE.MeshPhongMaterial();
// canvas3d.addLight();
// canvas3d.addSpot(0xaf9f8f, 0.3);

// 2 Step
// material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());
// material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());
// material.bumpScale = 0.6;
// material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());
// material.specular = new THREE.Color('grey');
//

// Alternative
// riga 20 //canvas3d = new cdRender3d({ctrl: true});
// riga 22
//var geometry = new THREE.OctahedronGeometry(r, 0);
//var geometry = new THREE.DodecahedronGeometry(r, 0);
//var geometry = new THREE.BoxGeometry(r, r, r);
//var geometry = new THREE.TorusGeometry( r, 0.4 * r, 32, 64 );

// riga 25 //material.map = THREE.ImageUtils.loadTexture('img/BabyTux.png', undefined, canvas3d.getRender());

// posizioni GPS di Firenze, Parigi, Londra, New York, Sidney
//var parameters = [
// [ 43.771417, 11.253836, 1.4 ],
// [ 48.859405, 2.353880, 1.1 ],
// [ 51.518809, -0.127056, 1.3 ],
// [ 40.735661, -73.996460, 1.5 ],
// [ -33.849974, 151.208077, 1.2 ],
//];

// Riga 45 //canvas3d.addPositions(parameters);

</script>
</body>
</html>

</pre>
== Partenza ==

Il file base crea una palla o meglio un cerchio blu su sfondo nero.

Cambiando il valore di color alla riga 23 si cambia il colore della palla

== Passo 1) ==

Commento riga 23 e aggiungo la prima riga di step1

--> var material = new THREE.MeshPhongMaterial();

Tutto nero, manca una luce

Aggiungo a riga 28 una luce, la seconda riga di step1

--> canvas3d.addLight();

Ricompare un cerchio (bianco grigio), il colore si può cambiare passando il valore numerico in addLight es: 0xc2 è blu, 0xc20000 è rosso.

In partenza è stato usato un materiale base che ha un colore, adesso usiamo un materiale riflettente, quindi serve una luce per vederlo.

L'impressione è ancora piatta, aggiungiamo un faretto per creare l'effetto 3D con luci e ombre.

Aggiungo a riga 29 un faretto, la terza riga di step1

--> canvas3d.addSpot(0xaf9f8f, 0.3);

Il primo parametro è il colore, il secondo l'intensità.

Notate che il faretto sta ruotando intorno alla sfera.

== Passo 2) ==

Diamo l'aspetto della terra alla sfera.

Aggiungo a riga 25 la texture della terra, la prima riga di step2

--> material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());

Cambiando la riga 20 ovvero aggiungendo il parametro {ctrl: true}, passiamo dalla rotazione automatica a quella manuale.

Trascinando (btn sinistro) il mouse la terra ruota, con la rotella si fa lo zoom.

Aggiungo a riga 26 e 27 la rugosità, la seconda e terza riga di step2

--> material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());

--> material.bumpScale = 0.6;

Il parametro bumpScale dà la proporzione di rugosità definita nella texture.

Aggiungo a riga 28 e 29 l'effetto specchio, la quarta e quinta riga di step2

--> material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());

--> material.specular = new THREE.Color('grey');

== Alternative ==

Nello step alternative ho messo alcune modifiche oltre al già citato controllo manuale, e ai giochi con i colori

Cambiando la gemetria, dalla sfera al toro ...

Cambiando le texture o cambiando pianeta (le mappe sono prese da [http://planetpixelemporium.com/earth.html http://planetpixelemporium.com/earth.html])

== Step aggiuntivo. ==

Date delle posizioni GPS il comando addPositions le mostra sulla sfera

Earth3D

2014-12-16T11:01:17Z

Mbert:

= '''La terra in 3D''' =

Come ho pensato lo sviluppo dell'esempio.

Occorre copiare lo zip <>

Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito faccio riferimento ad esso.
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Il Mondoooo</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/coderDojoLib.js"></script>
</head>
<body onload="start()">
<script>
var canvas3d, r = 16;
function start() {
canvas3d = new cdRender3d();

var geometry = new THREE.SphereGeometry(r, 32, 32);
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

canvas3d.addMesh(geometry, material);

canvas3d.runRender();
}

// 1 Step
// var material = new THREE.MeshPhongMaterial();
// canvas3d.addLight();
// canvas3d.addSpot(0xaf9f8f, 0.3);

// 2 Step
// material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());
// material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());
// material.bumpScale = 0.6;
// material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());
// material.specular = new THREE.Color('grey');
//

// Alternative
// riga 20 //canvas3d = new cdRender3d({ctrl: true});
// riga 22
//var geometry = new THREE.OctahedronGeometry(r, 0);
//var geometry = new THREE.DodecahedronGeometry(r, 0);
//var geometry = new THREE.BoxGeometry(r, r, r);
//var geometry = new THREE.TorusGeometry( r, 0.4 * r, 32, 64 );

// riga 25 //material.map = THREE.ImageUtils.loadTexture('img/BabyTux.png', undefined, canvas3d.getRender());

// posizioni GPS di Firenze, Parigi, Londra, New York, Sidney
//var parameters = [
// [ 43.771417, 11.253836, 1.4 ],
// [ 48.859405, 2.353880, 1.1 ],
// [ 51.518809, -0.127056, 1.3 ],
// [ 40.735661, -73.996460, 1.5 ],
// [ -33.849974, 151.208077, 1.2 ],
//];

// Riga 45 //canvas3d.addPositions(parameters);

</script>
</body>
</html>

</pre>
== Partenza ==

Il file base crea una palla o meglio un cerchio blu su sfondo nero.

Cambiando il valore di color alla riga 23 si cambia il colore della palla

== Passo 1) ==

Commento riga 23 e aggiungo la prima riga di step1

--> var material = new THREE.MeshPhongMaterial();

Tutto nero, manca una luce

Aggiungo a riga 28 una luce, la seconda riga di step1

--> canvas3d.addLight();

Ricompare un cerchio (bianco grigio), il colore si può cambiare passando il valore numerico in addLight es: 0xc2 è blu, 0xc20000 è rosso.

In partenza è stato usato un materiale base che ha un colore, adesso usiamo un materiale riflettente, quindi serve una luce per vederlo.

L'impressione è ancora piatta, aggiungiamo un faretto per creare l'effetto 3D con luci e ombre.

Aggiungo a riga 29 un faretto, la terza riga di step1

--> canvas3d.addSpot(0xaf9f8f, 0.3);

Il primo parametro è il colore, il secondo l'intensità.

Notate che il faretto sta ruotando intorno alla sfera.

== Passo 2) ==

Diamo l'aspetto della terra alla sfera.

Aggiungo a riga 25 la texture della terra, la prima riga di step2

--> material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());

Cambiando la riga 20 ovvero aggiungendo il parametro {ctrl: true}, passiamo dalla rotazione automatica a quella manuale.

Trascinando (btn sinistro) il mouse la terra ruota, con la rotella si fa lo zoom.

Aggiungo a riga 26 e 27 la rugosità, la seconda e terza riga di step2

--> material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());

--> material.bumpScale = 0.6;

Il parametro bumpScale dà la proporzione di rugosità definita nella texture.

Aggiungo a riga 28 e 29 l'effetto specchio, la quarta e quinta riga di step2

--> material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());

--> material.specular = new THREE.Color('grey');

== Alternative ==

Nello step alternative ho messo alcune modifiche oltre al già citato controllo manuale, e ai giochi con i colori

Cambiando la gemetria, dalla sfera al toro ...

Cambiando le texture o cambiando pianeta (le mappe sono prese da [http://planetpixelemporium.com/earth.html http://planetpixelemporium.com/earth.html])

== Step aggiuntivo. ==

Date delle posizioni GPS il comando addPositions le mostra sulla sfera

Earth3D

2014-12-16T10:48:06Z

Mbert: Creata pagina con "= '''La terra in 3D''' = Come ho pensato lo sviluppo dell'esempio. Occorre copiare lo zip <> Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito facc..."