Moto balistico. Oggetti.


I metodi illustrati nel paragrafo precedente possono essere usati oltre che per vivacizzare la grafica delle pagine web anche per simulazione animate dell'evoluzione di sistemi di vario tipo. Ovviamente queste simulazioni, dato che Javascript è un linguaggio interpretato, non possono essere velocissime, ma possono comunque avere una certa efficacia, almeno in sede didattica.

Nella pagina riportata nel seguente frame si propone una semplice simulazione del moto balistico di un proiettile in assenza di attrito del mezzo. Questa simulazione, oltre a rappresentare graficamente il fenomeno, calcola la gittata, l'altezza massima e la durata della traiettoria parabolica.

Il codice HTML della pagina si può vedere cliccando sul seguente bottone

Nel codice Javascript usato dalla pagina, visibile cliccando sul bottone

si definisce l'oggetto Palla dotata delle proprietà che ne registrano le coordinate di posizione e di velocità istante per istante. È inoltre dotato di proprietà che rappresentano le coordinate grafiche della rappresentazione grafica dell'oggetto nell'elemento canvas. Queste coordinate devono essere numeri interi positivi con valori minori delle dimensioni di quelle di canvas. La rappresentazione grafica è data a sua volta da un oggetto Image.

L'oggetto Palla è inoltre corredato da metodi che hanno lo scopo di calcolarne in ogni istante posizione e velodità.

Come si può osservare, esaminando il codice Javascript, in questo linguaggio un oggetto è definita come una funzione (è preferibile in questo caso iniziare l'identificatore con una maiuscola), nei cui corpo sono definiti proprietà e metodi anteponendo ai loro identificatori il prefisso this. Per i metodi inoltre, l'identificatore è seguito da = function(...argomenti...) e quindi dalle parentesi graffa che contengono il corpo.

Esempio.

//=================================================================
// definizione dell'oggetto  Palla

function Palla()
{
//proprietà
  this.x = 0;
  this.y = 0;
  this.xg = -5;
  this.yg = 395; 
  this.vx = 0;
  this.vy = 0;
  this.gittata = 0;
  this.vertice = 0;
  this.durata = 0;

//-----------------------------------------------------------------
//metodi
  this.vxvy = function()
    {
      vel = parseFloat(velocita.value);
      if (isNaN(vel) || (vel<0))
        {
          fine("ERRORE");
          return false;
        }

      theta = parseFloat(alzo.value);
      if (isNaN(theta) || (theta<0) || (theta>90))
        {
          fine("ERRORE");
          return false;
        }

      dt = parseFloat(intervallo.value);
      if (isNaN(dt) || (dt<=0))
        {
          fine("ERRORE");
          return false;
        }

      theta = theta*Math.PI/180;
      this.vx = vel*Math.cos(theta);
      this.vy = vel*Math.sin(theta);
      this.gittata = vel*vel*Math.sin(theta*2)/g;
      this.vertice = 0.5*this.vy*this.vy/g;
      this.durata = this.gittata/this.vx;

      var scalax = 600/this.gittata;
      var scalay = 400/this.vertice;

      scala = Math.min(scalax,scalay);

      return true;
    }

//-----------------------------------------------------------------
  this.origine = function()
    {
      this.x = 0;
      this.y = 0;
      messaggio.innerHTML = "";
      cancellaCanvas();
      ctx.drawImage(img_palla,-5,395);
    }

//-----------------------------------------------------------------  
// metodo muove
// aggiorna le coordinate di posizione e velocità
// arrotonda all'intero le coordinate di posizione (per averle in pixel)
// aggiorna la posizione dell'immagine

  this.muove = function()
    {
      if (this.y<0) fine("FINE");
      t += dt;
      this.x = this.vx*t;
      this.y = (this.vy-0.5*g*t)*t;

      this.xg = Math.round(this.x*scala);
      this.yg = 400-Math.round(this.y*scala);

      cancellaCanvas();
      ctx.drawImage(img_palla,this.xg-5,this.yg-5);
    }
//-----------------------------------------------------------------
}

Dopo che si è definita la funzione NomeOggetto, si possono creare oggetti dello stesso tipo e rappresentarli con una variabile con istruzioni come questa var nuovo_oggetto = new NomeOggetto(argomenti...).

Esempio.

  palla = new Palla()

 

L'oggetto così definito eredita tutti i metodi e le proprietà definite nella funzione NomeOggetto e quindi si potranno usare istruzioni come le seguenti.

  gittata.value = palla.gittata;
  vertice.value = palla.vertice;
  palla.muove();