Projecte ProgessiveMaps

De wikijoan
Salta a la navegació Salta a la cerca

Introducció[modifica]

(TBD) 2 modes:

  • mode SDK, per definir i configurar el mapa.
  • mode Render, per fer funcionar el mapa en una línia de temps.

Funcionalitats[modifica]

(TBD)

  • App1. Definim una sèrie de punts sobre el mapa. Sobre aquests punts posem un marker. L'últim punt el fem amb doble click. Seguidament, es traça la spline que millor s'ajusta als punts.
  • App2. Interpolació d'àrees tancades. Donada una sèrie de punts que defineixen una àrea, interpolar amb més punts tota aquesta àrea. Pintar l'area.
  • App3. Donada una àrea petita i una àrea grossa, interpolar les dues àrees de manera que l'àrea petita s'expandeixi a l'àrea grossa. [1]
  • App4. Donats una sèrie de punts (Markers), omplir-los de forma seqüencial amb un delay de temps. [2][3][4]
  • App5. Donada una sèrie de labels, omplir-los de forma seqüencial amb un delay de temps.
  • App6. Fer zoom i centrar en un punt. Controlar el temps amb què es viatja cap al zoom. ([5])
  • App7: distingir click, double click, alt-click, hover sobre el mapa [6]
  • App8: carregar una imatge com a mapa [7][8]
  • App9: mapa físic sense labels [9]
  • App10: Botons, custom controls [10]
  • App11: Imatges satèl·lit [11][12]

Aplicacions unitàries[modifica]

Abans de posar-ho tot conjuntament, totes les funcionalitats es provaran en unes aplicacions unitàries.

App1[modifica]

Primer havia pensat de fer servir la llibreria cubic-spline que s'explica més avall. Però aquest problema de suavitzar segments ja està resolt a Smoothing lines using Chaikins algorithm:

$ npm instal chaikin-smooth

Llibreries[modifica]

cubic-spline[modifica]

NOTA: no cal. suavitzar segments està resolt a [13], que és exactament el que jo vull.

Donats una sèrie de punts, vull augmentar la resolució entre els punts obtenint una línia suavitzada.

$ cd /projectes/ProgressiveMaps

Projecte cubic-spiline:

This is helpful for smoothing line graphs.

$ git clone https://github.com/morganherlocker/cubic-spline.git

Depèn d'un paquet que es diu tape:

$ npm install tape

I ja funciona:

$ npm test
> node test.js

TAP version 13
# spline
ok 1 should be equal
ok 2 should be equal
ok 3 should be equal
ok 4 should be equal
ok 5 should be equal
...

Faig la modificació test2.js per tal d'obtenir un codi mínim que funcioni i que es vegi com es suavitza una corba:

  • script test2.js:
const Spline = require("./");

const xs = [1, 2, 3, 4, 5];
const ys = [9, 3, 6, 2, 4];

// new a Spline object
const spline = new Spline(xs, ys);

//comprovació
console.log(spline.at(1));
console.log(spline.at(2));

// interpolate a line at a higher resolution
for (var i = 0; i < 50; i++) {
  console.log(i/10 + " " + spline.at(i * 0.1));
}
$ node test2.js

9
3
0 14.999999999999998
0.1 14.916053571428568
0.2 14.669142857142853
0.3 14.277375
0.4 13.758857142857144
0.5 13.131696428571427
0.6 12.414
0.7 11.623874999999998
0.8 10.779428571428571
0.9 9.898767857142857
1 9
1.1 8.101232142857143
1.2 7.220571428571427
...

El mòdul tape té a veure amb el testing. No el necessitem si no fem testing.

En teoria, per instal·lar la llibreria és:

$ npm install cubic-spline

però en aquests moments (abril 2020) no està disponible en els repositoris. Tant se val, perquè n'hi ha prou en incloure el fitxer del projecte on es defineix la classe Spline, en aquest cas index.js.


creat per Joan Quintana Compte, abril 2020