While working on a new visualization algorithm I discovered how easy it is to make mobile browsers crash trying to display a relative small amount of images.  I’ve used an IPad 1 with IOs 5 for my tests, so with other devices the results may vary but I think the point is the same, there are two main problems while handling a lot of images from a mobile browser:

Loading rate:

If I load this simple javascript code in my IPad mobile safari just crash, this is because (imho) the device is not able to handle such a big image loading rate and goes into some form of buffer overflow.

Image quantity:

Using the same image (notice how in the previous example I’ve appended a random number after each image URL in order to force its download) I was able to hit another limit, the maximum number of images a mobile device can display simultaneously, this code which tries to print 500 images made my mobile browser freeze:

A workaround:

I’ve managed to load and show thousands of images using canvas, in the following example each image is loaded, printed on canvas and the discarded, also the number of concurrent loads is limited to avoid browser crash, this example uses 10000 images but I think higher image quantities can be easily reached:

Some refinements:

It seems that mobile Safari cannot handle canvas bigger than a certain value (try this), to handle this problem one solution could be using the ‘toDataUrl‘ method when the canvas is full of pics in order to extract a screenshot. Then this screnneshot can be added to the page before the canvas so the canvas can be cleaned and reused for the upcoming pics.

Then I write this code:

Demo1 = function(){
  var demo1 = {};

  demo1.generatePoints = function(numero,dimensioni_box){
    var points = [];
    for(var i=0;i < numero; i++){
      var x0 = Math.floor((Math.random()-0.5)*(dimensioni_box)),
          y0 = Math.floor((Math.random()-0.5)*(dimensioni_box)),
          z0 = Math.floor((Math.random()-0.5)*(dimensioni_box)),
          x1 = x0 + 5;
          y1 = x1 + 5;
          z1 = z0;

      points.push(
        [$M([[x0],[y0],[z0]]), $M([[x1],[y1],[z1]])]
      );
    }
    return points;
  }

  demo1.init = function(evento){
    // #drawboard is a canvas element
    demo1.canvas = document.querySelector('#drawboard');
    demo1.canvas.width  = 320;
    demo1.canvas.height = 480;
    demo1.context = demo1.canvas.getContext('2d');
    demo1.points =  demo1.generatePoints(200, 100);
  };

  demo1.resetCanvas = function(){
     demo1.context.fillStyle = '#FFFFFF';
     demo1.context.fillRect(0,0, demo1.canvas.width, demo1.canvas.height);
     demo1.context.fillStyle = '#000000';
  }

  demo1.cambioOrientamento = function(evento){
    demo1.resetCanvas();

    var heading  = ((evento.alpha > 180 ? evento.alpha - 360 : evento.alpha) * Math.PI) / 180.0;
    var attitude = (evento.beta  *  Math.PI)     / 180.0;
    var bank     = (evento.gamma * (Math.PI/2.0)) / 90.0;

    var ch = Math.cos(heading),     sh = Math.sin(heading),
        ca = Math.cos(attitude),    sa = Math.sin(attitude),
        cb = Math.cos(bank),        sb = Math.sin(bank);

    var rotation_matrix = $M([
          [ch*ca  , -ch*sa*cb + sh*sb , ch*sa*sb + sh*cb    ],
          [sa      , ca*cb             , -ca*sb             ],
          [-sh*ca , sh*sa*cb + ch*sb  , -sh*sa*sb + ch*cb   ]
    ]);

    for(var i=0; i < demo1.points.length; i++){
      var pr  = rotation_matrix.x(demo1.points[i][0]);
      var x   = 160 + ((640*pr.e(1,1)) / (pr.e(3,1)));
          y   = 240 - ((640*pr.e(2,1)) / (pr.e(3,1)));
      demo1.context.fillRect(x,y,10,10);
    }
  };
  return demo1;
}();

window.addEventListener('load',Demo1.init,false);
window.addEventListener('deviceorientation',Demo1.cambioOrientamento,false);

If you have a device which supports the deviceorientation API (eg: iPhone4) you can test the running example here: http://sandropaganotti.com/wp-content/goodies/mobile/demo1.html as you might notice is still far from perfect but at the moment I've no time to refine it and so I have to leave it 'as is' ( still somehow nice IMHO ).

If someone got a clues on this please e-mail me at: sandro.paganotti@gmail.com

Here’s the simple snippet of code you can use (from a linux shell):

curl -u sandro.paganotti@gmail.com:my_password -d "vid=4762107" http://api.foursquare.com/v1/checkin

Foursquare api are really easy to use and lets you invoke up to 200 times each method each hour, so a quite simple exercise can be write a simple program that automatically check-in a selected account in a given array of locations:

require 'rubygems'
require 'restclient'
require 'nokogiri'

counter = -1
debug   = true

travel = [
            # minutes to wait, venue to check-in
            [5 ,4762107],
            [10,2335319]
         ]

RestClient.add_before_execution_proc do |req, params|
    req.basic_auth 'sandro.paganotti@gmail.com', 'my_password'
end

loop do
    time, venue_id = travel[counter = ((counter + 1) % travel.size)]
    puts "sleeping #{time} minutes.." if debug
    sleep time * 60
    response = RestClient.post "http://api.foursquare.com/v1/checkin", :vid=>venue_id
    puts  ['checkin','message'].inject(Nokogiri::XML(response.body)) { |s,r| s.send(:at, r) }.inner_text
end

By invoking this code an infinite loop will check-in the provided account into each of the given venues waiting a configurable amount of time between each of them.

Here’s the result:

sandropaganotti$ ruby venue.rb
sleeping 5 minutes..
OK! We've got you @ WC2010 Soccer City Stadium. This is your 2nd checkin here!
sleeping 10 minutes..
OK! We've got you @ Service Station Cafe. This is your 1st checkin here!
sleeping 5 minutes..

So I tried to assign weights using the relation type as discriminator, to make an example take the word ‘sword’ and its relations:

related-term        relation type           assigned weight
weapon:             hypernym                5
backsword:          hyponym                 2
blade:              part_meronym            3
broadsword:         hyponym                 2
cavalry sword:      hyponym                 2
cutlas:             hyponym                 2
Excalibur:          instance_hyponym        2
falchion:           hyponym                 2
fencing sword:      hyponym                 2
foible:             part_meronym            3
forte:              part_meronym            3
haft:               part_meronym            3
hilt:               part_meronym            3
rapier:             hyponym                 2
point:              part_meronym            3

The weight I choose for each of the relation types tried to follow the statement
‘The more the words are related the less greater the number is’; so weapon is less
related to sword than broadsword because the first express a concept broader than sword
(also a nuclear bomb is a weapon); the second instead detail the word ‘sword’ and
make true the statement ‘A broadsword is always a sword’ so it’s more related to the
chosen word.

By following this general rule I associated a weight to each of the most common relation types and wrote down a few lines of code in order to compute weights by navigate the relation graph:

def compute_distances(weights = :default, max_depth_allowed = 6)

  # retrieve the list of the weights associated to each relation type
  # (its just an hash {:relation_type => weight})
  weights = CONFIG_FILE['distance']["#{weights}"]
  data = Words::Wordnet.new

  # get a list of sysnsets as a starting point (eg: red, crimson)
  synsets_to_analyze = self.synsets.map{|s| [s.synset_id,0,0]}
  synsets_to_store   = []

  # process the first element of the list
  # until the sysets_to_analyze stack is empty
  while(sys = synsets_to_analyze.shift) do
    sys_id,dis,dep = *sys; next if dep >= max_depth_allowed
    sys = Words::Synset.new(sys_id,data.wordnet_connection,nil) rescue next;

    # save the current sysnset words into an output array
    sys.words.each {|w|  synsets_to_store.unshift([sys_id,w,dis])}

    # put each of the sysnset related to this into the stack unless they
    # are already present
    sys.relations.each do |r|
      synsets_to_analyze.unshift(
        [r.destination.synset_id, dis + weights["#{r.relation_type}"],dep + 1]
      ) if r.is_semantic? and
           !synsets_to_store.find{|s| s.first == r.destination.synset_id}
    end
  end

  # now in sysnsets_to_store you have an array of the words each of them
  # with the weight that separe it from the starting synsets.
 # (now I store them on a db, but is just because the context is the same as the Abacus gem)
  synsets_to_store.each do |s|
    a_id = ArticleKey.find_by_the_key(s[1]).id rescue next
    self.distances.find_or_create_by_article_key_id( a_id, :distance => s[2])
  end

end

Here some of the results for ‘sword’ with depth = 3:

sword:                           0
brand:                           0
steel:                           0
broadsword:                      2
rapier:                          2
tuck:                            2
backsword:                       2
fencing sword:                   2
falchion:                        2
Excalibur:                       2
cutlas:                          2
sabre:                           2
cavalry sword:                   2
saber:                           2
cutlass:                         2
foible:                          3
blade:                           3
hilt:                            3
forte:                           3
tip:                             3
peak:                            3
point:                           3
helve:                           3
haft:                            3
claymore:                        4
scimitar:                        4
saber:                           4
sabre:                           4
foil:                            4
epee:                            4
arm:                             5
basket hilt:                     5
head:                            5
weapon system:                   5
knife blade:                     5
weapon:                          5
widow's peak:                    5
cusp:                            5
razorblade:                      5
cutting edge:                    6
pommel:                          6
knob:                            6
knife edge:                      6
fire ship:                       7
shaft:                           7
slasher:                         7
missile:                         7
Greek fire:                      7
missile:                         7
weapon of mass destruction:      7
light arm:                       7
WMD:                             7
gun:                             7
flamethrower:                    7
pike:                            7
brass knucks:                    7
knucks:                          7
brass knuckles:                  7
knuckles:                        7
W:                               7
tomahawk:                        7
hatchet:                         7
lance:                           7
knuckle duster:                  7
bow and arrow:                   7
projectile:                      7
sling:                           7
bow:                             7
stun baton:                      7
spear:                           7
stun gun:                        7
convexity:                       8
cutting implement:               8
convex shape:                    8
portion:                         8
part:                            8
handle:                          8
grip:                            8
hold:                            8
handgrip:                        8
reap hook:                       9
knife:                           9
sticker:                         9
dagger:                          9
axe:                             9
file:                            9
awl:                             9
lawn mower:                      9
mower:                           9
scissors:                        9
ax:                              9
sickle:                          9
cone shape:                      9
conoid:                          9
cone:                            9
reaping hook:                    9
pencil:                          9
arrowhead:                       9
knife:                           9
pair of scissors:                9
spatula:                         9
spatula:                         9
alpenstock:                      9
instrument:                      10
weapons system:                  11
implements of war:               11
arms:                            11
munition:                        11
weaponry:                        11

Now, as you may notice, there still a lot of tuning to do; for example it is pretty strange that ‘weapon of mass destruction’ is more semantically related to ‘sword’ than ‘dagger’ .

Anyway I’m pretty pleased of the results of this small experiment thus I’m still far from my initial idea: calculate the weight of each word of the dictionary in relation to ‘good’ and ‘bad’ and use these weights to estimate the ‘mood’ of some common trends in twitter.

In the following snippet the two versions (classic and analogic) are compared:

//  Classic version:
  void compute(){
    int black_neighbours = 0;
    for(int z=0; z < neighbours.length; z++)
      if(neighbours[z].rgb == black)
        black_neighbours ++;  

    switch(black_neighbours){
      case 0:
      case 1:
      case 4:
      case 5:
      case 6:
      case 7:
      case 8:
        to_color(white);
        break;
      case 2:
        to_color(rgb);
        break;
      case 3:
        to_color(black);
        break;
    }
  } 

// Analogic version
  void compute(){
    int[] medium_color = new int[] {0,0,0};
    for(int z=0; z < neighbours.length; z++)
      for(int c=0; c < 3; c++)
        medium_color[c] = medium_color[c] + neighbours[z].rgb[c];

    int medium_tone = 0;
    for(int c=0; c < 3; c++){
      medium_color[c] = medium_color[c] / neighbours.length;
      medium_tone = medium_tone + medium_color[c];
    }  

    medium_tone = medium_tone / 3;

    if (medium_tone > 191 || medium_tone < 128 ){
      to_color(white);
    }else if(medium_tone > 159 ){
      to_color(rgb);
    }else{
      to_color(black);
    }
  }

Next I went a step further using ‘medium color’ when the classic rules asked insted to keep the previous cell color. This lead to a general acceleration to white because the medium neighbours color is always more bright than pure black, to balance this behavior I expanded the range of medium_tones which results in black. Here’s the tuned code:

  void compute(){
    int[] medium_color = new int[] {0,0,0};
    for(int z=0; z < neighbours.length; z++)
      for(int c=0; c < 3; c++)
        medium_color[c] = medium_color[c] + neighbours[z].rgb[c];

    int medium_tone = 0;
    for(int c=0; c < 3; c++){
      medium_color[c] = medium_color[c] / neighbours.length;
      medium_tone = medium_tone + medium_color[c];
    }  

    medium_tone = medium_tone / 3;

    if (medium_tone > 191 || medium_tone < 80 ){
      to_color(white);
    }else if(medium_tone > 159 ){
      to_color(medium_color);
    }else{
      to_color(black);
    }
  }

Now a short video of this new behavior:

Here’s the rules:

• if the organism has more than 3 or fewer than 2 neighbours it dies;
• if the organism has 2 or 3 neighbours it survives;
• if a white cell in the matrix is sorrounded by exactly 3 neighbours it became a living organism.

I’ve implemented this Game Of Life using Processing language and trying to push all of the game logic within the organism class in order to really simulate a cellular behavior, here’s the class:

class Spot{
  int[]   rgb, rgb_next;
  int     x,y;
  Spot[]  neighbours;

  Spot(int gx, int gy, int[] c){
    rgb      = c;
    rgb_next = new int[3];
    x       = gx;
    y       = gy;
  }

  void set_neighbors(Spot[][] grid){
    int xp = (x+1 == grid.length ? 0 : x+1);
    int xm = (x-1 == -1 ? grid.length - 1 : x-1);
    int yp = (y+1 == grid[0].length ? 0 : y+1);
    int ym = (y-1 == -1 ? grid[0].length - 1 : y-1);

    neighbours = new Spot[] {  grid[xm][ym], grid[xm][y ], grid[xm][yp],
                               grid[x ][ym],               grid[x ][yp],
                               grid[xp][ym], grid[xp][y ], grid[xp][yp]
                            };
  }

  void compute(){
    int black_neighbours = 0;
    for(int z=0; z < neighbours.length; z++)
      if(neighbours[z].rgb == black)
        black_neighbours ++;  

    switch(black_neighbours){
      case 0:
      case 1:
      case 4:
      case 5:
      case 6:
      case 7:
      case 8:
        to_color(white);
        break;
      case 2:
        to_color(rgb);
        break;
      case 3:
        to_color(black);
        break;
    }
  } 

  void advance(){
    rgb = rgb_next;
    rgb_next = new int[3];
  }

  void draw(int bw,int bh){
     fill(rgb[0],rgb[1],rgb[2]);
     rect(x*bw,y*bh,bw,bh);
  }

  void to_color(int[] c){ rgb_next = c; }
}

There are three methods that worth a look:

• set_neighbors:
  which determinates the sourronding neighbors (as the method name states) by creating an array of pointer to the closest organisms using the matrix passed as parameter as a reference. The first four lines are needed in order to eliminate the boundaries by linking each edge of the matrix to the opposite one.
• compute:
  which implements the real logic of the Game, it is divided into two steps, the first part calculates the number of alive neighbors sorrounding the organism and the second one applies the rules stated above.
• advance:
  due the fact that all of the organisms need to be processed before each of them can switch to the new state, the Spot class record the result of the ‘compute’ method inside a different variable and then, when advance is invoked, it moves this result to the ‘live’ variable.

Here’s a short video of my script in action, the source code is, as usually, available on my github account:

Lo script si compone di tre parti, una (classica) funzione di inizializzazione,  una funzione che effettua il GeoCoding della località della quale si vuole calcolare l’isocrono e la funzione chiave, che cicla su ognuno dei raggi (il numero di raggi è impostabile, di default 10) della circonferenza costruita intorno a tale località e per ogni raggio si muove verso l’esterno misurando la distanza in minuti dal centro, quando trova un punto che sorpassa il tempo limite dato lo script mette un marker.

Lo script passa al raggio successivo quando rileva una misurazione che supera del 50% il tempo limite dato.

    function crawlpoint(px,py,mins){
        var point      = new GPoint(px,py);
        var destpoint  = new GPoint(px + x,py + y);   

        directions.loadFromWaypoints(new Array(point.y + "," + point.x ,destpoint.y + "," + destpoint.x),{preserveViewport:true});
        x = x + (inc_x * Math.sin(start_s));
        y = y + (inc_y * Math.cos(start_s));
        m = m + 1;

        if (directions.getNumRoutes() > 0){
            document.getElementById('txt1').value = 'y' + document.getElementById('txt1').value
            var curr_meas = directions.getDuration().seconds/60;
            if (prev_meas <= mins && curr_meas > mins ){
                map.addOverlay(new GMarker(prev_dest,{title:'Distance: ' + directions.getDuration().html}));
                found     = 1;
            }else{
                prev_dest = destpoint;
                prev_meas = curr_meas;
            }

            if(curr_meas > (mins + (mins * 0.4)) || (m > 20 && found ==1) || m > 50){
                points.push(new GLatLng(prev_dest.y, prev_dest.x));
                start_s = start_s + slice;
                x = inc_x;
                y = inc_y;
                m = 0;
                found = 0;
                prev_meas = 0;
                curr_meas = 0;
                prev_dest = point;
                directions.clear();

                if(start_s >= (2*Math.PI)){
                    start_s = 0;
                    $('#loader').hide();
                    clearInterval(intval);
                }
            }

        }else{
            document.getElementById('txt1').value = 'n' + document.getElementById('txt1').value
        }
    }

Possiamo spezzare la funzione in tre punti distinti, la prima parte invoca le Directions API, per calcolare la distanza tra il centro e un punto (destpoint) posizionato sul raggio attivo (il cui angolo è memorizzato in start_s, inizialmente a 0) ad una distanza espressa da due variabili x e y. Una volta calcolato il percorso x e y vengono incrementate in modo che al prossimo giro puntino ad un punto sullo stesso raggio un poco più avanti.

La seconda parte aggiunge un marker se tra la durata del percorso attuale supera per la prima volta il limite di tempo inserito.

La terza parte resetta tutti i contatori e avanza al raggio successivo se la misurazione temporale corrente eccede del 50% il tempo limite inserito o se sono state effettuate più di venti misurazioni con l’identificazione di un marker o più di 50 misurazioni.

Trovate il codice nella sua interezza sul mio account di github, potete inoltre testare il tutto su di una pagina di demo.

PS: credo che l’algoritmo sia altamente perfezionabile, ad esempio introducendo alcuni concetti di reinforcement learning per la ricerca degli zeri della funzione T(R(p1,p2)) – t dove T(R(p1,p2)) è il tempo di percorrenza del percorso tra p1 e p2 e t è il tempo limite dell’isocrono.

Non mi dilungo oltre ne nella descrizione ne nelle procedure di installazione in quanto è tutto specificato sulla homepage del progetto (c’è anche un video e una demo live se il vostro browser supporta WebGL, testato con Webkit); vorrei invece spendere questo post nello spiegare un paio di funzioni che ho scritto e che potrebbero IMHO rivelarsi utili a qualche lettore, ecco la prima:

function createTextureFromCanvas(ctx, canvas_imagedata) {

    var pixels = new WebGLUnsignedByteArray(canvas_imagedata.data);
    var texture = ctx.createTexture();
    ctx.bindTexture(ctx.TEXTURE_2D, texture);
    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.NEAREST);
    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.NEAREST);
    ctx.pixelStorei(ctx.UNPACK_ALIGNMENT, 1);
    ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, canvas_imagedata.width, canvas_imagedata.height, 0, ctx.RGBA, ctx.UNSIGNED_BYTE, pixels);
    ctx.generateMipmap(ctx.TEXTURE_2D)
    ctx.bindTexture(ctx.TEXTURE_2D, null);

    return texture;
}

In questa funzione si concentra il cuore dello slideshow, non tanto dal punto di vista operativo, quanto di mio personale sforzo concettuale; il principale problema che ho incontrato nello sviluppo di questo script infatti riguardava la necessità di mappare immagini di dimensioni potenzialmente diverse su di un cubo (le cui facce devono essere tutte uguali). Ecco quindi il passaggio forzato attraverso dei canvas bidimensionali di appoggio, sui quali effettuare le operazioni di resize delle immagini prima di passarle come textures sul cubo. Questi canvas sono anche serviti per gestire i margini neri che venivano a crearsi naturalmente in quanto la proporzione tra le dimensioni delle fotografie non è sempre 1:1.

Ma una volta ottenuto questi canvas contenenti le immagini normalizzate come procedere per metterle su di una texture ? Dopo aver seguito senza successo un gist sul tema mi sono imbattuto nel salvifico esempio ‘Texture test‘ che contiene una funzione che disegna 4 pixel su di una texture:

function createCheckerboardTexture() {
    var pixels = new WebGLUnsignedByteArray([255, 255, 255,
                                             0,   0,   0,
                                             0,   0,   0,
                                             255, 255, 255]);
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    //  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    //  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 2, 2, 0, gl.RGB, gl.UNSIGNED_BYTE, pixels);
    return texture;
}

Da qui è stato facile; al posto che specificare i singoli bit dell’immagine ho passato nella variabile pixels il contenuto dei miei canvas di appoggio e, con un paio di altre modifiche sono riuscito ad ottenere l’effetto desiderato.

La seconda funzione di cui vorrei far menzione è invece quella che recupera un immagine e la mappa, centrata, su di un canvas 2d, per scrivere queste righe ho utilizzato il metodo drawImage del context 2D in un modo che non conoscevo (suggeritomi da qui), cioè con 5 parametri:

• Canvas di destinazione;
• Posizione x e y da cui disgnare l’immagine sul canvas di destinazione;
• Dimensioni dell’immagine sul canvas di destinazione (width e height).

Ecco la funzione, in ingresso riceve l’<img> da adattare al canvas:

function initTexture(e)
{
  var textureWidth  = 500;

  if($(e).width() > $(e).height()){
     var magnitude = textureWidth/$(e).width();
  } else {
     var magnitude = textureWidth/$(e).height();
  }

  var new_width  = Math.floor($(e).width()*magnitude);
  var new_height = Math.floor($(e).height()*magnitude);
  var textureCanvas     = document.createElement("canvas");
  textureCanvas.width   = textureCanvas.height = textureWidth;
  var textureContext    = textureCanvas.getContext("2d");
  textureContext.drawImage(e,Math.floor((textureWidth-new_width)/2.0),Math.floor((textureWidth-new_height)/2.0),new_width,new_height); 

  return textureCanvas;
}

Se la cosa vi interessa sappiate che tutto il progetto è, come al solito, disponibile sul mio account di github.

Per tutta una serie di impegni/dimenticanze/ritardi/… non sono più riuscito ad avvicinarmi a Gosu anche se le sue potenzialità sembravano quantomeno interessanti; oggi approfittando del piovoso ponte lavorativo mi sono cimentato nella stesura di  una piccolissima applicazione (non la si può nemmeno chiamare gioco) che gestisca, su un unico schermo, una moltitudine di client associando ad ognuno di essi uno sprite e consentendogli di pilotarlo con dei semplici comandi.

In questa proof-of-concept ogni client può connettersi alla porta 8888 del server e dialogando in TCP può pilotare il proprio areo da caccia sullo schermo dell’applicazione; la sintassi del messaggio è semplicissima:

codice_client|comando

I comandi supportati sono, al momento, solo ‘left’, ‘right’, ‘close’ e ‘welcome’ ma ben presto introdurrò almeno ‘shot’ per consentire all’areo di difendersi dai (futuri) nemici. L’intera implementazione è come al solito presente sul mio account di github; a seguire invece uno screenshot dell’applicazione con due client connessi:

Ogni aereo è controllato da un client diverso

Le istruzioni per ripeterlo sono queste:

1. Mescolate un mazzo di carte da Briscola;
2. Tenete il mazzo in mano in modo che le carte siano a faccia in su;
3. Estraete la prima carta dal mazzo, memorizzatene il valore ( da 1 a 10 ) e appoggiatela a faccia coperta sul tavolo;
4. Estraete le successive 10-k carte ed impilatele, sempre a faccia coperta, sulla precedente ( dove k è il valore memorizzato al punto 3 );
5. Ripetete i punti 3 e 4 con le restanti carte del mazzo. Se non doveste trovare sufficienti carte per completare l’ultima pila disponete le carte di questa pila a faccia in giù sul tavolo separandole una dall’altra ( possiamo chiamarle ‘carte del resto’).

Ok, se avete operato nel modo corretto la somma delle carte capofila di ogni mazzetto (quelle del punto 3) dovrebbe corrispondere alla seguente formula:

(numero di mazzetti * 11) + carte del resto - 40

Cerchiamo di capire come si possa arrivare ad un simile risultato:

Cominciamo affermando che ogni mazzetto di carte è composto da 11 – k carte dove k è il valore della carta a capofila quindi, ad esempio, se la carta capofila è un due il mazzetto conterrà 9 carte: il due e le otto successive, con questa osservazione è possibile stendere una prima versione della formula:

Dove con n indichiamo il numero di mazzetti, con il valore della carta capofila dell’x-esimo mazzetto e con r il numero della ‘carte del resto’. Ora non ci resta che isolare il più possibile k, per fare questo non dobbiamo fare altro che applicare alcune trasformazioni alla formula:

Done, con questi semplici passaggi siamo riusciti a ricostruire il funzionamento di un piccolo gioco che è riuscito ad impressionarmi ed incuriosirmi.