Hack your Mind http://www.hackyourmind.org/blog Mon, 07 May 2012 01:02:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Javascript: a flexible module pattern http://www.hackyourmind.org/blog/javascript-a-flexible-module-pattern/ http://www.hackyourmind.org/blog/javascript-a-flexible-module-pattern/#comments Fri, 04 May 2012 16:43:55 +0000 admin http://www.hackyourmind.org/blog/?p=4620 La programmazione modulare è un paradigma di programmazione che permette di definire un programma come l’insieme di più unità indipendenti tra di loro, chiamate appunto “moduli“.
In questo contesto è possibile sviluppare un software lavorando singolarmente sulle sue componenti, isolando funzioni e strutture tra loro affini e favorendo la riusabilità del codice stesso.
Inoltre diventa estremamente semplice estendere le funzionalità del programma con la creazione di nuovi moduli o la modifica di quelli già esistenti.

Javascript non ha un supporto nativo alla programmazione modulare, ma grazie alla sua estrema flessibilità è possibile attuare questo paradigma seguendo il cosidetto “module pattern“. Quest’ultimo prevede la creazione di una classe singleton, con una propria visibilità (o scope) che garantisce il principio dell’information hiding.

Il seguente codice è una mia personale implementazione del module pattern.

/** Modulo per la gestione di un veicolo **/
( function ( BASE, NAME ) {

BASE[ NAME ] = ( function () {

   /** PRIVATO **/
   var fuel = 0;

   /** PUBBLICO **/
   var setFuel = function ( value ) { fuel = value; };
   var getFuel = function () { return fuel; };
   var move = function () { fuel -= 1; };

   // Restituisco i membri e i metodi pubblici
   return {

      setFuel: setFuel,
      getFuel: getFuel,
      move: move
   };

}() );

}( window, 'Vehicle' ) );

Si tratta di un modulo per la gestione di un veicolo, con tre metodi pubblici ed un membro privato (fuel).

Analizzando il sorgente possiamo distinguere due funzioni anonime autoeseguite (anonymous self-executing function). La funzione esterna richiede due argomenti: la BASE, ossia il modulo genitore a cui sarà agganciato il nuovo modulo, e il NAME, l’identificativo di quest’ultimo.

Nell’esempio, la BASE è l’istanza window e il NAME è la stringa “Vehicle”. Questo significa che sarà creato un sottomodulo dell’istanza window con il nome “Vehicle”. In realtà, quando si crea un nuovo membro dell’istanza window, si ha una struttura con visibilità globale, per cui il modulo resterà indipendente.

La funzione interna, invece, è quella che restituisce l’istanza singleton del modulo. Da notare, infatti, che l’istanza assegnata al BASE[NAME] non è la funzione anonima, bensì l’oggetto che viene restituito da quest’ultima. Questo espediente è fondamentale perché permette di isolare i membri e i metodi privati della classe, in modo che non siano accessibili all’esterno del modulo. Per cui solo le strutture presenti nel dizionario saranno considerate pubbliche.

Questo è un esempio di utilizzo del modulo appena creato:

Vehicle.setFuel( 100 );

document.write( 'Vehicle - carburante iniziale: ' + Vehicle.getFuel() + '<br>' );

Vehicle.move();
Vehicle.move();
Vehicle.move();

document.write( 'Vehicle - carburante dopo 3 movimenti: ' + Vehicle.getFuel() + '<br>' );

document.write( Vehicle.fuel ); // Non è definito!

A questo punto estendere il modulo precedente diventa semplicissimo. E’ sufficiente introdurre un terzo argomento PARENT nella funzione esterna, che riferirà al modulo genitore.

/** Modulo per la gestione di un robot (estende il modulo precedente) **/
( function ( BASE, NAME, PARENT ) {

BASE[ NAME ] = ( function () {

   /** PUBBLICO **/
   var fly = function () {

      PARENT.setFuel( PARENT.getFuel() - 2 );
   };

   // Restituisco i membri e i metodi pubblici
   return {

      setFuel: PARENT.setFuel,
      getFuel: PARENT.getFuel,
      move: PARENT.move,
      fly: fly
   };

}() );

}( window, 'Robot', Vehicle ) );

In questo modo il nuovo modulo avrà accesso ai membri pubblici del genitore e potrà, se necessario, esportarli nella sua istanza singleton.

Nell’esempio precedente viene creato un modulo per la gestione di un robot, che eredita i metodi pubblici del modulo Vehicle e, inoltre, introduce il nuovo metodo fly.

Robot.setFuel( 100 );

document.write( 'Robot - carburante iniziale: ' + Robot.getFuel() + '<br>' );

Robot.move();
Robot.move();
Robot.move();

document.write( 'Robot - carburante dopo 3 movimenti: ' + Robot.getFuel() + '<br>' );

Robot.fly()
Robot.fly()
Robot.fly()

document.write( 'Robot - carburante dopo 3 voli: ' + Robot.getFuel() + '<br>' );

Ecco un altro esempio che mostra la creazione di un sottomodulo per la gestione di un cannone, che viene agganciato al modulo Robot.

/** Modulo per la gestione di un cannone **/
( function ( BASE, NAME ) {

BASE[ NAME ] = ( function () {

   /** PRIVATO **/
   var bullets = 0;

   /** PUBBLICO **/
   var setBullets = function ( value ) { bullets = value; };
   var getBullets = function () { return bullets; };
   var shoot = function () { bullets -= 1; };

   // Restituisco i membri e i metodi pubblici
   return {

      setBullets: setBullets,
      getBullets: getBullets,
      shoot: shoot
   };

}() );

}( Robot, 'Gun' ) );

E questo è il suo utilizzo:

Robot.Gun.setBullets( 10 );

document.write( 'Robot.Gun - proiettili iniziali: ' + Robot.Gun.getBullets() + '<br>' );

Robot.Gun.shoot();
Robot.Gun.shoot();
Robot.Gun.shoot();

document.write( 'Robot.Gun - proiettili rimasti: ' + Robot.Gun.getBullets() + '<br>' );

E’ anche possibile creare degli alias interni al modulo che si riferiscono a delle librerie esterne (ad esempio jQuery), al fine di evitare conflitti con i nomi.

/** Modulo che usa la libreria jQuery **/
( function ( $, BASE, NAME ) {

BASE[ NAME ] = ( function () {

   /** PUBBLICO **/
   var fun = function () { 

      alert( 'Titolo della pagina: ' + $('head title').text() );
   };

   // Restituisco i membri e i metodi pubblici
   return { fun : fun };

}() );

}( jQuery, window, 'Modulo' ) );

Infine, questo paradigma di programmazione si rivela molto pratico quando si ha la necessità di passare il metodo di un modulo ad una funzione, ad esempio alle funzioni setTimeout() e setInterval().

/** Modulo che usa la libreria jQuery **/
( function ( BASE, NAME ) {

BASE[ NAME ] = ( function () {

   /** PRIVATO **/
   var helloNum = function () { alert( 'Hello world ' + getNum() + '!' ); };

   /** PUBBLICO **/
   var getNum = function () { return 21; };

   var fun = function () { 

      setTimeout( helloNum, 3000 );
   };

   // Restituisco i membri e i metodi pubblici
   return { fun : fun };

}() );

}( window, 'Modulo' ) );

Come si può notare, infatti, non è stato necessario inserire la parola chiave “this” prima del metodo e, anche quando si richiama un secondo metodo dentro al primo, non si va incontro a problemi di scope che solitamente affliggono Javascript. Provare per credere…

/** Istanza di prova **/
var obj = new function () {

   /** PRIVATO **/
   var helloNum = function () { alert( 'Hello world ' + this.getNum() + '!' ); };

   /** PUBBLICO **/
   this.getNum = function () { return 21; };

   this.fun = function () { 

      setTimeout( function ( obj ) { obj.getNum() }, 3000, this );
      setTimeout( helloNum, 3000 ); // ERRORE!!!
      // La funzione `helloNum` cerca di richiamare il metodo `this.getNum` dell'istanza
      // ma il `this` al suo interno ora si riferisce a tutt'altro contesto!!!
   }
};

obj.fun();

Questo è tutto. Alla prossima! ;)

]]> http://www.hackyourmind.org/blog/javascript-a-flexible-module-pattern/feed/ 0 Javascript: formatting date like PHP http://www.hackyourmind.org/blog/javascript-formatting-date-like-php/ http://www.hackyourmind.org/blog/javascript-formatting-date-like-php/#comments Thu, 19 Apr 2012 17:49:56 +0000 admin http://www.hackyourmind.org/blog/?p=4581 Un’implementazione Javascript della funzione date di PHP.

/*
    Title --- formatdate.js

    Copyright (C) 2012 Giacomo Trudu - wicker25[at]gmail[dot]com

    This script is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation version 3 of the License.

    This script is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with this script. If not, see <http://www.gnu.org/licenses/>.

	= Version 1.1 =
	 + improved performance
*/

/** Formatta un timestamp o un'oggetto Date  **/
var formatDate = function ( format, time, r ) {

   // Preparo i parametri
   r = ( typeof( r ) != 'undefined' && r );
   var date = ( typeof( time ) != 'undefined' ) ? ( time instanceof Date ? time : new Date( time * 1000 ) ) : new Date;

   // Calcolo il numero dei secondi dall'inizio dell'anno
   var yearSecs = ( date - new Date( date.getFullYear(), 0, 1 ) ) / 1000;

   // Estraggo alcune informazioni dalla formattazione standard
   var meta = String( date ).match( /^.*?([A-Z]{1,4})([\-+]\d{4}) \(([A-Z]+)\).*$/ );

   // Estraggo le informazioni
   date = {

      d : date.getDate(),
      D : date.getDay(),
      m : date.getMonth(),
      y : date.getFullYear(),
      l : ( new Date( date.getFullYear(), 1, 29 ).getMonth() === 1 | 0 ),
      h : date.getHours(),
      M : date.getMinutes(),
      s : date.getSeconds(),
      u : date.getMilliseconds(),
      t : date.getTime(),
      z : date.getTimezoneOffset()
   };

   // Stringa della data formattata
   var str = '';

   // Riempie di zeri le cifre alla sinistra di un numero
   var pad = function ( value, len ) {

      return ( '000000000' + String( value ) ).slice( -len );
   };

   // Parametri della formattazione
   var fmt_values = {

      d : function () { return pad( date.d, 2 ); },
      D : function () { return [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ][ date.D ]; },
      j : function () { return date.d; },
      l : function () { return [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ][ date.D ]; },
      N : function () { return date.D + 1; },
      S : function () { return [ 'th', 'st', 'nd', 'rd' ][ date.d % 10 > 3 ? 0 : ( date.d < 10 || date.d > 20 ) * date.d % 10 ]; },
      w : function () { return date.D; },
      z : function () { return Math.ceil( yearSecs / 86400 ); },
      W : function () { return Math.ceil( yearSecs / 604800 ); },
      F : function () { return [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ][ date.m ]; },
      m : function () { return pad( date.m + 1, 2 ); },
      M : function () { return [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ][ date.m ]; },
      n : function () { return date.m + 1; },
      t : function () { return [31, (date.l ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][ date.m ]; },
      L : function () { return date.l; },
      Y : function () { return date.y; },
      y : function () { return String( date.y ).slice( -2 ); },
      a : function () { return ( date.h < 12 ? 'am' : 'pm' ); },
      A : function () { return ( date.h < 12 ? 'AM' : 'PM' ); },
      g : function () { return date.h % 12 || 12; },
      G : function () { return date.h; },
      h : function () { return pad( date.h % 12 || 12, 2 ); },
      H : function () { return pad( date.h, 2 ); },
      i : function () { return pad( date.M, 2 ); },
      s : function () { return pad( date.s, 2 ); },
      u : function () { return date.u * 1000; },
      I : function () { return ( date.m > 2 && date.m < 10 || ( date.m == 2 && date.D - date.d >= 8 - 1 ) ); },
      O : function () { return meta[2]; },
      P : function () { return meta[2].slice( 0, -2 ) + ':' + meta[2].slice( -2 ); },
      T : function () { return meta[3]; },
      Z : function () { return -date.z * 60; },
      c : function () { return ( !r ? formatDate( 'Y-m-d\\TH:i:sP', time, true ) : null ); },
      r : function () { return ( !r ? formatDate( 'D, d M Y H:i:s O', time, true ) : null ); },
      U : function () { return Math.floor( date.t / 1000 ); }
   };

   // Divido la stringa di formattazione in token tenendo conto dei caratteri di escape
   var tokens = format.match( /(\\.|.)/gi );

   // Costruisco la stringa del tempo
   for ( var i = 0; i < tokens.length; i++ )
      str += ( tokens[i] in fmt_values ? fmt_values[ tokens[i] ]() : ( tokens[i].length == 1 ? tokens[i] : tokens[i][1] ) );

   return str;
};

Esempio di utilizzo:

formatDate( 'j, n, Y' ); // => '10, 3, 2001'
formatDate( 'F j, Y, g:i a' ); // => 'March 10, 2001, 5:16 pm'
formatDate( 'd/m/Y', 1230000000 ); // => '23/12/2008'
formatDate( 'H:i', new Date() ); // => '19:52'
formatDate( 'c' ); // => '2012-04-20T19:12:35+02:00'
formatDate( '\\i\\t \\i\\s \\t\\h\\e jS \\d\\a\\y.' ); // => 'it is the 20th day.'

Oppure si può integrare direttamente al tipo Date:

Date.prototype.format = function ( format ) { return formatDate( format, this ); };

// Esempio:
var timestr = new Date().format( 'd/m/Y' );
]]> http://www.hackyourmind.org/blog/javascript-formatting-date-like-php/feed/ 0 Load dynamically MathJax with JQuery.getScript() http://www.hackyourmind.org/blog/load-dynamically-mathjax-with-jquery-getscript/ http://www.hackyourmind.org/blog/load-dynamically-mathjax-with-jquery-getscript/#comments Sat, 10 Mar 2012 15:31:56 +0000 admin http://www.hackyourmind.org/blog/?p=4525 Un problema che mi ha dato del filo da torcere… Maledetti percorsi assoluti.

<html>
<head>
    <script type="text/javascript" src="lib/jquery.js"></script>
    <title>Titolo della pagina</title>
</head>
<body>

<div>\[ \left [ - \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi
= i \hbar \frac{\partial}{\partial t} \Psi \]</div>

<a id="loadMathJax" href="#">Carica MathJax</a>

<script type="text/javascript">
<!--

    // Percorso alla libreria
    var MathJax_path = 'lib/mathjax/';

    // Carico MathJax alla pressione del link
    $('#loadMathJax').click( function () {

        // Creo la configurazione di MathJax
        var config =

            "MathJax.Ajax.config.root = '" + MathJax_path + "';" + // <- Importante
            "MathJax.Hub.Config( { " +
            "    extensions: [ 'tex2jax.js' ], " +
            "    jax: [ 'input/TeX', 'output/HTML-CSS' ], " +
            "    tex2jax: { " +
            "      inlineMath: [ ['\[', '\]'] ], " +
            "      processEscapes: true " +
            "    }, " +
            "});";

        $('head').append( $('<script></script>').attr( 'type', 'text/x-mathjax-config' ).text( config ) );

        // Carico la libreria
        $.getScript( MathJax_path + 'MathJax.js?config=TeX-AMS-MML_HTMLorMML', function () {

            // Modifico il pulsante
            $('#loadMathJax').unbind( 'click' ).css( 'text-decoration', 'line-through' );
        } );
    } );

-->
</script>

</body>
</html>
]]> http://www.hackyourmind.org/blog/load-dynamically-mathjax-with-jquery-getscript/feed/ 0 Debian + Awesome WM + Conky http://www.hackyourmind.org/blog/debian-awesome-wm-conky/ http://www.hackyourmind.org/blog/debian-awesome-wm-conky/#comments Sun, 27 Nov 2011 17:02:58 +0000 admin http://www.hackyourmind.org/blog/?p=4511 awesome is a highly configurable, next generation framework window manager for X. It is very fast, extensible and licensed under the GNU GPLv2 license. [...]

Desktop vuoto

Firefox, Thunar e VLC in una vista a piastrelle

GEdit, Thunar e Eterm in una vista a piastrelle

]]> http://www.hackyourmind.org/blog/debian-awesome-wm-conky/feed/ 2 C++, Trigonometria: Ruotare un punto attorno ad un vertice http://www.hackyourmind.org/blog/cpp-trigonometria-ruotare-un-punto-attorno-ad-un-vertice/ http://www.hackyourmind.org/blog/cpp-trigonometria-ruotare-un-punto-attorno-ad-un-vertice/#comments Tue, 20 Sep 2011 10:39:58 +0000 admin http://www.hackyourmind.org/blog/?p=4282 Ipotizziamo di voler ruotare un generico punto A(x,y) del piano cartesiano attorno ad un vertice O. Chiamiamo β il suo angolo di rotazione e B(x’,y’) la posizione del punto A al termine della rotazione.

Rotazione del punto A attorno al vertice O

La prima cosa da fare è traslare i punti A e O in modo tale da far coincidere il vertice di rotazione O con l’origine del sistema cartesiano.

Traslazione iniziale dei punti

x = x + x_O
y = y + y_O

In questa nuova configurazione possiamo distinguere l’angolo α, posto tra il punto A e l’asse delle ascisse.

Angoli α e β

Individuiamo le coordinate dei punti A e B utilizzando le funzioni trigonometriche.

Relazioni trigonometriche

Le coordinate del punto A sono date dalle seguenti relazioni:

x = R \cdot cos(\alpha)
y = R \cdot sen(\alpha)

Mentre le coordinate del punto B dipendono anche dall’angolo α:

x
y

Applicando a quest’ultime la formula di addizione e sostituendovi le prime due relazioni, otteniamo che:

x
y

Per concludere trasliamo nuovamente il sistema, sottraendo le coordinate iniziali del punto O per tornare alla posizione reale dei punti.

Traslazione finale dei punti

x = x - x_O
y = y - y_O

Questo procedimento è utilizzato in molti campi della fisica ed è fondamentale nella computer grafica, in particolar modo nella manipolazione delle immagini raster.

Ingrandimento di un’immagine raster

Il seguente programma, ad esempio, è in grado di ruotare arbitrariamente un’immagine contenuta in un vettore bidimensionale di caratteri.

/*
    Title: Rotazione di un immagine - ruota_immagine.cpp
    Author: "Giacomo Trudu" aka "Wicker25" - wicker25[at]gmail[dot]com
    Site: http://www.hackyourmind.org/
    License: GNU General Public License (GPL)
    Description: Ruota una matrice usando la trigonometria
*/

#include <iostream>
#include <cstring>
#include <cmath>

// Dimensioni dell'immagine
const int IMAGE_W = 15;
const int IMAGE_H = 15;

// Coordinate del vertice di rotazione
const int CENTER_X = 7;
const int CENTER_Y = 7;

template < typename T >
inline T rad( const T &x ) {

    // Ritorna i radianti di un angolo espresso in gradi sessagesimali
    return ( x * M_PI / 180.0 );
}

template < typename T >
inline T round( const T &x ) {

    // Ritorna il numero arrotondato
    return std::floor( x + 0.5 );
}

void
rotate_image( char rotated_image[IMAGE_W][IMAGE_H], char image[IMAGE_W][IMAGE_H], float rotation ) {

    // Posizione dell'elemento traslata
    int tx, ty;

    // Nuova posizione dell'elemento
    int rx, ry;

    // Iteratori
    int x, y;

    // Costruisco l'immagine ruotata
    for ( y = 0; y < IMAGE_H; y++ ) {
        for ( x = 0; x < IMAGE_W; x++ ) {

            // Calcolo la posizione dell'elemento traslato
            tx = x - CENTER_X;
            ty = y - CENTER_Y;

            rx = round( tx * std::cos( rotation ) - ty * std::sin( rotation ) );
            ry = round( tx * std::sin( rotation ) + ty * std::cos( rotation ) );

            rx += CENTER_X;
            ry += CENTER_Y;

            // Controllo che il nuovo pixel sia entro i limiti dell'immagine
            if ( rx > 0 && rx < IMAGE_W )
            if ( ry > 0 && ry < IMAGE_H )
                rotated_image[ry][rx] = image[y][x];
        }
    }
}

void
draw_image( char image[IMAGE_W][IMAGE_H] ) {

    // Iteratori
    int x, y;

    // Disegno l'immagine originale
    for ( y = 0; y < IMAGE_H; y++ ) {

        for ( x = 0; x < IMAGE_W; x++ ) {

            std::cout << image[y][x];
        }

        std::cout << std::endl;
    }
}

int main() {

    // Vettore dell'immagine 15x15
    char image[15][15] =    {
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', 'O', 'O', 'O', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', 'O', 'O', 'O', 'O', 'O', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '  },
                                { ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '  }
                            };

    // Vettore dell'immagine ruotata
    char rotated_image[IMAGE_W ][IMAGE_H];
    std::memset( rotated_image, ' ', sizeof( rotated_image ) );

    // Messaggio per l'utente
    std::cout << "Immagine originale\n";

    // Disegno l'immagine originale
    draw_image( image );

    // Angolo di rotazione
    float rotation = 45.0;

    // Disegno diverse angolazioni dell'immagine
    for ( ; rotation < 360.0; rotation += 45.0 ) {

        // Attendo la pressione di un tasto
        std::cout << "[Premere un tasto per continuare...]\n";
        std::cin.get();

        // Messaggio per l'utente
        std::cout << "\nImmagine ruotata di " << rotation << " gradi:\n";

        // Angolo di rotazione
        rotate_image( rotated_image, image, rad( rotation ) );

        // Disegno l'immagine ruotata
        draw_image( rotated_image );
    }

    return 0;
}
Scarica il sorgente

Il programma applica su ogni elemento del vettore la formula che abbiamo appena visto, spostandolo nella sua nuova posizione “ruotata”. Ecco un’immagine:

Rotazione di un vettore bidimensionale

Ovviamente, lavorando sui caratteri, non abbiamo a disposizione un filtro antialiasing, per cui non stupitevi se a 45° l’immagine nel vettore perderà parte della sua definizione.. ;)

]]> http://www.hackyourmind.org/blog/cpp-trigonometria-ruotare-un-punto-attorno-ad-un-vertice/feed/ 0 Ripasso di matematica 0×05 – Geometria analitica http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9705-geometria-analitica/ http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9705-geometria-analitica/#comments Tue, 23 Aug 2011 23:54:49 +0000 admin http://www.hackyourmind.org/blog/?p=4109 Esercizio #3 sulla Geometria analitica.

Determinare le coordinate del baricentro del triangolo di vertici (0;1/3), (1;-2) e (4;-1).

Il baricentro di un triangolo è il punto d’incontro delle sue mediane: la mediana è il segmento che unisce un vertice al punto medio del lato opposto.

Assegnando ad ogni vertice una lettera maiuscola, possiamo rappresentare il triangolo in questo modo:

Rappresentazione del triangolo

Per trovare il baricentro del triangolo ABC è sufficiente calcolare il punto di intersezione di due mediane.

Rappresentazione del triangolo e delle sue mediane

Innanzitutto calcoliamo i punto medi dei lati a e b, che useremo per trovare, rispettivamente, le mediane m ed m’:

D\left( {{x_A + x_B } \over 2}; {{y_A + y_B } \over 2} \right) = D\left( {{0 + 1 } \over 2}; {{{1 \over 3} - 2 } \over 2} \right) = D\left( {1 \over 2}; {-{5 \over 3} \over 2} \right) = D\left( {1 \over 2}; -{5 \over 6} \right)
E\left( {{x_B + x_C } \over 2}; {{y_B + y_C } \over 2} \right) = E\left( {{1 + 4 } \over 2}; {{-2 - 1 } \over 2} \right) = E\left( {5 \over 2}; -{3 \over 2} \right)

Quindi utilizziamo la formula della retta passante per due punti per ottenere le equazioni delle due mediane:

P_0\left( x_0, y_0 \right), \;\; P_1\left( x_1, y_1 \right), \;\; M\left( x_m, y_m \right)
r: \; {{y - y_0} \over {y_1 - y_0}} = {{x - x_0} \over {x_1 - x_0}}

Prima la mediana m:

r_m: \; {{y - y_D} \over {y_C - y_D}} = {{x - x_D} \over {x_C - x_D}}
Mostra i passaggi
1. \;\; {{y + {5 \over 6}} \over { -1 + {5 \over 6}}} = {{x - {1 \over 2}} \over {4 - {1 \over 2}}}
2. \;\; {{y + {5 \over 6}} \over { -{1 \over 6}}} = {{x - {1 \over 2}} \over {7 \over 2}}
3. \;\; \left(y + {5 \over 6}\right)\left(-6\right) = \left(x - {1 \over 2}\right){2 \over 7}
4. \;\; -6y - 5 = {2 \over 7}x - {1 \over 7}
5. \;\; -6y = {2 \over 7}x - {1 \over 7} + 5
6. \;\; -6y = {2 \over 7}x + {34 \over 7}
7. \;\; \left(-{1 \over 6}\right) \left(-6y\right) = \left(-{1 \over 6}\right) \left({2 \over 7}x + {34 \over 7}\right)
r_m: \; y = -{1 \over 21}x - {17 \over 21}

E poi la mediana m’:

r_{m
Mostra i passaggi
1. \;\; {{y + {3 \over 2}} \over {{1 \over 3} + {3 \over 2}}} = {{x - {5 \over 2}} \over {0 - {5 \over 2}}}
2. \;\; {{y + {3 \over 2}} \over {11 \over 6}} = {{x - {5 \over 2}} \over {- {5 \over 2}}}
3. \;\; \left(y + {3 \over 2}\right) {6 \over 11} = \left(x - {5 \over 2}\right) \left(- {2 \over 5}\right)
4. \;\; {6 \over 11}y + {9 \over 11} = -{2 \over 5}x + 1
5. \;\; \left({11 \over 6}\right) \left({6 \over 11}y + {9 \over 11}\right) = \left({11 \over 6}\right) \left(-{2 \over 5}x + 1\right)
6. \;\; y + {3 \over 2} = -{11 \over 15}x + {11 \over 6}
7. \;\; y = -{11 \over 15}x + {11 \over 6} - {3 \over 2}
8. \;\; y = -{11 \over 15}x + {2 \over 6}
r_{m

Infine mettiamo a sistema le due equazioni per trovare l’intersezione delle due mediane e, quindi, il baricentro del triangolo ABC.

K: \; \begin{cases} y = -{11 \over 15}x + {1 \over 3} \\ y = -{1 \over 21}x - {17 \over 21} \end{cases}
Mostra i passaggi
1. \;\; \begin{cases} -{1 \over 21}x - {17 \over 21} = -{11 \over 15}x + {1 \over 3} \\ y = -{1 \over 21}x - {17 \over 21} \end{cases}
2. \;\; \begin{cases} -{1 \over 21}x + {11 \over 15}x = {1 \over 3} + {17 \over 21} \\ y = ... \end{cases}
3. \;\; \begin{cases} {72 \over 105}x = {24 \over 21} \\ y = ... \end{cases}
4: \; \begin{cases} {24 \over 35}x = {8 \over 7} \\ y = ... \end{cases}
5. \;\; \begin{cases} x = {35 \over 24} {8 \over 7} \\ y = ... \end{cases}
6. \;\; \begin{cases} x = {5 \over 3} \\ y = ... \end{cases}
7. \;\; \begin{cases} x = {5 \over 3} \\ y = -{1 \over 21} {5 \over 3} - {17 \over 21} \end{cases}
8. \;\; \begin{cases} x = ... \\ y = -{5 \over 63} - {17 \over 21} \end{cases}
9. \;\; \begin{cases} x = ... \\ y = -{56 \over 63} \end{cases}
10. \;\; \begin{cases} x = ... \\ y = -{8 \over 9} \end{cases}
K\left( {5 \over 3}; -{8 \over 9}\right)

Al prossimo esercizio.. ;)

Riferimenti

  • Lineamenti di matematica. Modulo F. Geometria analitica, N. Dodero, P. Baroncini, R. Manfredi, Ghisetti e Corvi, 2002
]]> http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9705-geometria-analitica/feed/ 0 Ripasso di matematica 0×04 – Geometria analitica http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9704-geometria-analitica/ http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9704-geometria-analitica/#comments Sat, 20 Aug 2011 17:13:46 +0000 admin http://www.hackyourmind.org/blog/?p=4035 Quello che segue è l’esercizio #2 sulla Geometria analitica.

Un triangolo isoscele ha il vertice C nel terzo quadrate, la base OA è sull’asse x (essendo O l’origine degli assi cartesiani) e misura 4. Sapendo che l’area del triangolo misura 16, determinare l’equazione del lato CO (cioè l’equazione della retta passante per C e per O).

Un triangolo isoscele è un triangolo che ha due lati congruenti. Poiché sappiamo che il lato OA è la base del triangolo e che il vertice C appartiene al terzo quadrante del piano cartesiano (ossia quello con le ascisse e le ordinate negative), possiamo rappresentare il triangolo come nell’immagine sottostante.

Rappresentazione del triangolo

I lati AC e AO sono congruenti, per cui l’ascissa del vertice C sarà data dalla media delle ascisse degli altri due vertici. La sua ordinata, invece, corrisponderà all’opposto dell’altezza della base OA, che possiamo trovare applicando la formula inversa dell’area del triangolo.

A = {{b \cdot h} \over 2} \;\; \rightarrow \;\; h = {2A \over b}

Aggiungiamo al grafico l’altezza h e il punto medio della base, che abbiamo chiamato H.

Rappresentazione del triangolo

Quindi calcoliamo le coordinate del vertice C, ricordandoci di modificare il segno dell’altezza in modo tale che il punto appartenga al terzo quadrante del piano cartesiano:

C\left( {{x_O + x_A } \over 2}; -{2A \over b} \right) = C\left( {{0 + \left( -4 \right) } \over 2}; -{{2 \cdot 16} \over 4} \right) = C\left(-2; -8\right)

Infine, troviamo l’equazione della retta OC usando la formula della retta passante per due punti:

1. \;\; {{y - y_O} \over {y_C - y_O} } = {{x - x_O} \over {x_C - x_O} }
2. \;\; {{y - 0} \over {-8 - 0} } = {{x - 0} \over {-2 - 0} }
3. \;\; -{y \over 8} = -{x \over 2}
4. \;\; y = 4x

Al prossimo esercizio.. ;)

Riferimenti

  • Lineamenti di matematica. Modulo F. Geometria analitica, N. Dodero, P. Baroncini, R. Manfredi, Ghisetti e Corvi, 2002
]]> http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9704-geometria-analitica/feed/ 0 Ripasso di matematica 0×03 – Geometria analitica http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9703-geometria-analitica/ http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9703-geometria-analitica/#comments Wed, 17 Aug 2011 00:26:45 +0000 admin http://www.hackyourmind.org/blog/?p=3907 Quello che segue è il primo esercizio di Geometria analitica.

Nel triangolo ABC le coordinate dei vertici sono A(2;1), B(6;3) e C(4;8). Calcolare la misura del perimetro e verificare che il triangolo, avente i vertici nei punti medi dei lati del triangolo dato, abbia il perimetro eguale alla metà di quello del triangolo stesso.

Cominciamo col disegnare il triangolo ABC nel piano cartesiano, assegnando ad ognuno dei suoi lati una lettera minuscola.

Rappresentazione del triangolo

La prima cosa da fare per la risoluzione dell’esercizio è calcolare il perimetro del triangolo ABC, corrispondente alla somma delle lunghezze dei lati a, b e c.
Ogni lato del triangolo è un segmento che ha per estremità due dei suoi vertici. Per ricavarne la lunghezza è sufficiente calcolare la distanza tra le due estremità.

a = \overline{AB}
b = \overline{BC}
c = \overline{AC}

Per farlo utilizziamo la formula della distanza fra due punti:

P_0\left( x_0, y_0 \right), \;\; P_1\left( x_1, y_1 \right)

\overline{AB} = \sqrt{ \left( x_0 - x_1 \right)^2 + \left( y_0 - y_1 \right)^2 }

In questo modo possiamo trovare le lunghezze di tutti e tre i lati:

\overline{AB} = \sqrt{ \left( 2 - 6 \right)^2 + \left( 1 - 3 \right)^2 } = \sqrt{ \left( -4 \right)^2 + \left( -2 \right)^2 } = \sqrt{ 16 + 4 } = \sqrt{ 20 } = 2\sqrt{5}
\overline{BC} = \sqrt{ \left( 6 - 4 \right)^2 + \left( 3 - 8 \right)^2 } = \sqrt{ \left( 2 \right)^2 + \left( -5 \right)^2 } = \sqrt{ 4 + 25 } = \sqrt{ 29 }
\overline{AC} = \sqrt{ \left( 2 - 4 \right)^2 + \left( 1 - 8 \right)^2 } = \sqrt{ \left( -2 \right)^2 + \left( -7 \right)^2 } = \sqrt{ 4 + 49 } = \sqrt{ 53 }

E di conseguenza anche quella del perimetro, data dalla loro somma:

P = a + b + c = 2\sqrt{5} + \sqrt{ 29 } + \sqrt{ 53 }

Continuiamo la risoluzione dell’esercizio calcolando il perimetro del triangolo avente i vertici nei punti medi dei lati del triangolo dato.

Rappresentazione del secondo triangolo

Il punto medio di un segmento (in questo caso di un lato del triangolo) corrisponde al punto che ha per coordinate le medie aritmetiche delle coordinate degli estremi:

P_0\left( x_0, y_0 \right), \;\; P_1\left( x_1, y_1 \right), \;\; M\left( x_m, y_m \right)

x_m = {{x_0 + x_1} \over 2}
y_m = {{y_0 + y_1} \over 2}

Usando tale formula troviamo il punto medio di ogni lato, nonché i vertici del nuovo triangolo DEF.

D\left( {x_A + x_B \over 2}; {y_A + y_B \over 2} \right) = D\left( {2 + 6 \over 2}; { 1 + 3 \over 2} \right) = D\left( 4; 2 \right)
E\left( {x_B + x_C \over 2}; {y_B + y_C \over 2} \right) = E\left( {6 + 4 \over 2}; { 3 + 8 \over 2} \right) = E\left( 5; {11 \over 2} \right)
F\left( {x_A + x_C \over 2}; {y_A + y_C \over 2} \right) = F\left( {2 + 4 \over 2}; { 1 + 8 \over 2} \right) = F\left( 3; {9 \over 2} \right)

Calcoliamo le lunghezze dei lati d, e ed f utilizzando nuovamente la formula della distanza fra due punti:

\overline{DE} = \sqrt{ \left( 4 - 5 \right)^2 + \left( 2 - {11 \over 2} \right)^2 } = \sqrt{ \left( -1 \right)^2 + \left( -{7 \over 2} \right)^2 } = \sqrt{ 1 + \left( {49 \over 4} \right) } = \sqrt{ {53 \over 4} } = {\sqrt{53} \over 2}
\overline{EF} = \sqrt{ \left( 5 - 3 \right)^2 + \left( {11 \over 2} - {9 \over 2}\right)^2 } = \sqrt{ \left( 2 \right)^2 + \left( 1 \right)^2 } = \sqrt{ 4 + 1 } = \sqrt{ 5 }
\overline{DF} = \sqrt{ \left( 4 - 3 \right)^2 + \left( 2 - {9 \over 2}\right)^2 } = \sqrt{ \left( 1 \right)^2 + \left( - {5 \over 2} \right)^2 } = \sqrt{ 1 + {25 \over 4} } = \sqrt{ {29 \over 4} } = {\sqrt{29} \over 2}

Quindi ricaviamo il perimetro del triangolo DEF sommando le lunghezze dei suoi lati, in questo modo:

P

Per finire, controlliamo se il perimetro del primo triangolo è uguale al doppio di quello del secondo, impostando la seguente equazione:

1. \;\; P = 2 \cdot P
2. \;\; 2\sqrt{5} + \sqrt{ 29 } + \sqrt{ 53 } = 2 \left( {\sqrt{53} \over 2} + \sqrt{ 5 } + {\sqrt{29} \over 2} \right)
3. \;\; 2\sqrt{5} + \sqrt{ 29 } + \sqrt{ 53 } = \sqrt{ 53 } + 2\sqrt{5} + \sqrt{ 29 }
4. \;\; 2\sqrt{5} + \sqrt{ 29 } + \sqrt{ 53 } = 2\sqrt{5} + \sqrt{ 29 } + \sqrt{ 53 }

L’espressione è verificata e quindi possiamo affermare con certezza che il perimetro del primo triangolo è il doppio di quello del secondo.. ;)

Riferimenti

  • Lineamenti di matematica. Modulo F. Geometria analitica, N. Dodero, P. Baroncini, R. Manfredi, Ghisetti e Corvi, 2002
  • http://www.ripmat.it/
]]> http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9703-geometria-analitica/feed/ 0 Ripasso di matematica 0×02 – Calcolo letterale http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9702-calcolo-letterale/ http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9702-calcolo-letterale/#comments Tue, 16 Aug 2011 21:18:57 +0000 admin http://www.hackyourmind.org/blog/?p=3843 Esercizio #3 sul Calcolo letterale.

1. \;\; {2 \over 3}x^2 \left( x + y - 1 \right) - 2x \left( x + 1 \right) \left( x - y\right) - {4 \over 3}x^2 \left( 2y - x \right)

La consegna dell’esercizio ci chiede di semplificare l’espressione fino ad ottenere un polinomio in forma normale.

Si chiama polinomio la somma algebrica di più monomi non simili tra loro.

Esempi di polinomi sono i seguenti:

{1 \over 2}a^2b + 17ab - {5 \over 9}b^2; \;\; 5x^4 + \sqrt{2}x + 10; \;\; -{4 \over 3}a^b - ac^2 + 3a

Prima di procedere consiglio di approfondire l’argomento visitando questa pagina.

Per risolvere l’esercizio è sufficiente svolgere i prodotti di polinomi, in questo modo:

Mostra i passaggi
a. \;\; {2 \over 3}x^2 \left( x + y - 1 \right) = {2 \over 3}x^3 + {2 \over 3}x^2y - {2 \over 3}x^2
b. \;\; -2x \left( x + 1 \right) \left( x - y\right) = - 2x \left( x^2 - xy + x - y \right) = -2x^3 + 2x^2y - 2x^2 + 2xy
c. \;\; -{4 \over 3}x^2 \left( 2y - x \right) = -{8 \over 3}x^2y + {4 \over 3}x^3
2. \;\; = {2 \over 3}x^3 + {2 \over 3}x^2y - {2 \over 3}x^2 - 2x^3 + 2x^2y - 2x^2 + 2xy -{8 \over 3}x^2y + {4 \over 3}x^3 =

Quindi sommiamo i monomi simili tra loro per ottenere il polinomio richiesto dall’esercizio.

Mostra i passaggi
d. \;\; {2 \over 3}x^3 - 2x^3 + {4 \over 3}x^3 = {2 - 6 + 4 \over 3}x^3 = 0
e. \;\; {2 \over 3}x^2y + 2x^2y -{8 \over 3}x^2y = {2 + 6 - 8 \over 3}x^2y = 0
f. \;\; -{2 \over 3}x^2 - 2x^2 = {-2 - 6 \over 3}x^2 = -{8 \over 3}x^2
3. \;\; = -{8 \over 3}x^2 + 2xy

Tutto qui.. ;)

Riferimenti

  • Fondamenti e metodi di matematica Vol. A per bienni, L. Tonolini, F. Tonolini e A. Manenti Calvi, Minerva Scuola, 2008
  • http://www.ripmat.it/
]]> http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9702-calcolo-letterale/feed/ 0 Ripasso di matematica 0×01 – Calcolo letterale http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9701/ http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9701/#comments Sun, 07 Aug 2011 16:00:59 +0000 admin http://www.hackyourmind.org/blog/?p=3810 Ecco l’esercizio #2 sul Calcolo letterale.

1. \;\; \left( -{2 \over 5} ac \right)^3 : \left\{ \left[ \left( -a^{-2}b^3c \right)^2 \left( 2a^4b^{-5}c^{-1} \right) - {1 \over 5}bc \right]^2 : \left( 1,8b \right)^2 - \left( -{3 \over 5} c \right)^2 \right\} + \; 0,3a^3c

Lo scopo dell’esercizio è di semplificare l’espressione con diversi monomi al fine di ottenere un unico monomio riconducibile ad essa.

Mostra la soluzione
2. \;\; = \; -{8 \over 125} a^3c^3 : \left\{ \left[ \left( a^{-4}b^6c^2 \right) \left( 2a^4b^{-5}c^{-1} \right) - {1 \over 5}bc \right]^2 : \left( {9 \over 5}b \right)^2 - {9 \over 25} c^2 \right\} + {3 \over 10} a^3c =
3. \;\; = \; -{8 \over 125} a^3c^3 : \left\{ \left[ 2bc - {1 \over 5}bc \right]^2 : {81 \over 25}b^2 - {9 \over 25} c^2 \right\} + {3 \over 10} a^3c =
4. \;\; = \; -{8 \over 125} a^3c^3 : \left\{ \left[ {9 \over 5}bc \right]^2 : {81 \over 25}b^2 - {9 \over 25} c^2 \right\} + {3 \over 10} a^3c =
5. \;\; = \; -{8 \over 125} a^3c^3 : \left\{ {81 \over 25}b^2c^2 : {81 \over 25}b^2 - {9 \over 25} c^2 \right\} + {3 \over 10} a^3c =
6. \;\; = \; -{8 \over 125} a^3c^3 : \left\{ c^2 - {9 \over 25} c^2 \right\} + {3 \over 10} a^3c =
7. \;\; = \; -{8 \over 125} a^3c^3 : {16 \over 25} c^2 + {3 \over 10} a^3c =
8. \;\; = \; -{1 \over 10} a^3c + {3 \over 10} a^3c = {1 \over 5} a^3c

Riferimenti

  • Fondamenti e metodi di matematica Vol. A per bienni, L. Tonolini, F. Tonolini e A. Manenti Calvi, Minerva Scuola, 2008
]]> http://www.hackyourmind.org/blog/ripasso-di-matematica-0%c3%9701/feed/ 0