Haasteita sovelluksen kehityksessä

Canvas-kirjastoa valittaessa päädyttiin Paper.js-kirjastoon, koska sen dokumentaatio oli kattava ja löytyi paljon oppaita, jotka sisälsivät hyviä esimerkkejä. Kirjasto sisältää kaikki 2d symmetrioiden esittämiseen vaadittavat muunnokset ja valmiit toteutukset esimerkiksi muunnosmatriiseille. Paper.js on on myös selvästi pienikokoisempi kirjasto verrattuna 2d-grafiikkakirjastoihin, kuten pixi.js. Paper.js tarjoaa myös mahdollisuuden kuvien animointiin.

 

Paper.js:n rajoitteet tuli kuitenkin ilmi sovellusta toteuttaessa. Tavoitteena oli saada sovellus toimimaan kaikilla laitteilla, näytön resoluutiosta ja pikselitiheydestä riippumatta. Vaikka Paper.js mainosti toimivansa kaikilla näyttötyypeillä, ei sovellus kuitenkaan toiminut oikein uudemmilla korkean pikselitiheyden näytön omaavilla laitteilla. Tämän takia palautetta kerättäessä ei voitu antaa testaajien käyttää omaa kännykkää tai tablettia, koska ei voitu taata sovelluksen toimivuus näillä laitteilla, vaan testaajien piti käyttää meidän omia laitteita, joissa sovellus varmasti toimi. Tämä vaikeutti palautteen keräämistä, koska ei voinut lähettää pelkkää linkkiä testaajille.

 

Kehityksen aikana esiintyi myös ongelmia animaatioiden suorituskyvyssä. Symmetrian esittämiseksi haluttiin animoida symmetrian muunnoksen tulos osittain läpinäkyvänä, jotta tulos voidaan esittää päällekkäin alkuperäisen kuvan kanssa. Animoitu kuva pitää kuitenkin olla selvästi näkyvää aluetta suurempi, jottei animoidun kuvan reuna näkyisi häiritsevästi animaation aikana (esimerkiksi peilaus pelialueen reunalla). Näin suuret kuvat aiheutti joillain laitteilla erittäin hitaita animaatioita. Symmetrioiden kohdistaminen kuviin oli myös haasteellista, ja varsinkin suurilla resoluutioilla näkyi selvä ero animoidun ja alkuperäisen kuvan välillä.

 

Yksi suunnitelluista tehtävätyypeistä mahdollistaisi kokonaisen kuvan rakentamisen tietyn symmetriaryhmän perusalkioista. Perusalkion lisääminen ja sen kiertopisteiden ja peilisuorian esittäminen oli mahdollista, mutta alkion siirtäminen ja symmetrioiden muunnosten mahdollistaminen samanaikaisesti oli haasteellista. Toteutuksessa perusalkio ja sen symmetriat olivat erillisiä elementtejä canvas-alueella, ja jokaiselle määriteltiin omat säännöt hiiren klikkauksia/raahausta varten. Paper.js ei kuitenkaan onnistunut tulkitsemaan mitä elementtiä käyttäjä oli klikannut, ja liian usein klikkaus aiheutti väärän symmetrian muunnoksen, joten tehtävätyyppi jouduttiin hylkäämään.