En la pràctica heu pogut veure que l'ús de recursos de programació aplicats a la realització de gràfics ens han permès avançar força en la interactivitat.

En el mòdul 2 vam presentar les llistes com un element de treball avançat amb la Wiris que, juntament amb l'ús de amb..en..on.. per generar-les, poden substituir moltes vegades procediments que a primera vista sembla que s'haurien de fer amb la programació. Ara veurem que també va molt bé tenir en compte les llistes a l'hora de fer gràfics sofisticats.

En un dels exemples de la primera pràctica del mòdul 2 vau poder fer un gràfic que recorda el logotip del Campionat del Món de Natació - BCN 2003.

Amb l'ús d'una única llista les línies de codi poden ser aquestes:

Per explicar quin és el funcionament, heu de saber quin és el punt (r·cos(a), r·sin(a)) i llavors us podeu adonar que, perquè s'aconsegueixi l'efecte espiral:

• El centre de cada circumferència és a una distància cada vegada més gran de l'origen de coordenades, exactament 3·i/4 per a la circumferència i-sima.
• La línia que uneix aquest centre amb l'origen de coordenades i l'eix de les x formen un angle que va augmentant de p/4 en p/4.
• Els radis de les circumferències augmenten progressivament.

Vegeu que amb les consideracions anteriors construïm una llista de circumferències que després dibuixem totes de cop. Podeu escriure el codi que us hem mostrat i fer-hi variacions. Recordeu, també, que, si volguéssiu dibuixar les circumferències de colors diferents, no seria possible fer-ho amb una sola ordre. Ara bé, és molt interessant constatar que amb la Wiris la construcció d'una llista pot substituir eficaçment sentències iteratives de la programació.

Amb caràcter d'ampliació, expliquem seguidament que també ho podríem fer "programant".

S'ha de tenir en compte que el mètode de treball de la Wiris (construcció del gràfic que es dibuixa al final de le slínies de codi) no permet fer-ho tant directament com a la primera proposta:

Si escriviu les línies de codi anteriors i les executeu veureu que només es dibuixa una circumferència. Per què? La Wiris emmagatzema l'ordre que ha de dibuixar una circumferència de centre c i radi r. Això sí, rep l'ordre 10 vegades, però la circumferència és sempre cfr(c,r). Quan acaba de llegir tot el codi fa el dibuix: el de la cfr(c,r) amb els valors actuals (els "del final del codi", els que corresponen al valor i=10)

La primera manera de solventar aquest problema és incloure una opció avalua=cert en la comanda dibuixa. Això indica que volem que es dibuixi efectivament, amb els valors de cada moment, el que s'indica en la comanda.

Tanmateix, en la nova versió de la Wiris, l'opció avalua=cert en les sentències repetitives de programació ja es dóna per sobreentesa si en la comanda dibuixa hi intervé la variable del per:

En el segon exemple que us proposem veureu una manera de dibuixar un engraellat 6 x 6 amb algunes caselles acolorides, com aquest:

L'exemple servirà per recordar l'ús de condicionals en la generació de llistes i per explicar alguns aspectes de la comanda tauler. Si cliqueu a la icona de la fletxa, activareu una finestra de la Wiris on veureu una manera d'aconseguir l'objectiu indicat, que comença per situar els eixos i la graduació de les unitats com podeu veure en el gràfic següent.

• Vegeu la comanda tauler que ja hem vist anteriorment. En aquest cas, rep com a arguments el nou centre, les noves mides (vegeu que són 8 x 8) i una llista d'opcions que ens permeten desactivar la icona del tauler gràfic i fer que no es mostrin els eixos ni la malla.
  Vegeu la diferència sintàctica per fer aquestes últimes accions: si es passen com a opcions a la comanda tauler, mostrar_malla=fals, per exemple, o si s'escriuen independentment en una línia de programa; llavors seria mostrar_malla(fals).
• La definició dels segments que formen l'engraellat és clara. Adoneu-vos que podem definir dos objectes per cada valor de i.
• Hem fet servir una comanda que permet dibuixar un polígon regular donat el nombre de costats i dos vèrtexs consecutius; la resta de vèrtexs es generen a continuació d'aquests en el sentit contrari a les agulles del rellotge. D'aquesta manera, hem generat, inicialment, tots els quadrats de l'engraellat.
• Però hem estudiat quina havia de ser la condició que complien els vèrtexs inferiors esquerres dels quadrats pintats (això no ens ho fa la Wiris!) i l'hem afegida a la definició de la llista amb on. Així, ja només s'han generat els quadrats que havíem d'omplir.

Us proposem que, com una de les múltiples possibilitats per als exercicis d'aquest mòdul, feu les variacions oportunes a l'exemple que acabem de presentar per obtenir un tauler d'escacs com el que mostra la imatge il·lustrativa de la capçalera de la pràctica.

En acabar la pràctica 6 del mòdul 2, que tracta el tema dels nombres complexos, heu pogut veure una aplicació generada amb la Wiris que s'ha presentat justament com a aplicació didàctica.

Podeu revisar-la tal com l'hem presentat allà si cliqueu a la icona que indica el començament de l'activitat o bé a la mateixa imatge. Experimenteu!

• Constatareu que s'obre una petita finestra auxiliar (cosa que està feta amb l'ajut del JavaScript en una pàgina web) i automàticament es fa visual el tauler gràfic de la Wiris.
• En la pàgina web hi ha incorporat el codi necessari amb la Wiris, que està guardat amb l'opció amagar la barra d'eines i s'ha posat la mida de l'applet a width=1, height=1 i per això no es fa visual
• També s'ha emmagatzemat la pàgina Wiris amb les opcions activar-se al carregar i calcular-se al carregar. Aquesta és la que fa que s'executi automàticament la pàgina i, en concet, s'obri el tauler gràfic.

Ara ha arribat el moment d'estudiar amb detall el codi d'aquest exemple. Veurem la creació de llistes amb l'ajut de amb..en per a la generació d'objectes sofisticats que després dibuixarem; a més, incorporarem dos desplaçadors per a triar el nombre complex i l'índex de l'arrel.

Amb la icona de l'esquerra podeu obrir una finestra activa amb el codi molt detallat que també comentem tot seguit . I si us interessa més baixar-vos-el per treballar-hi amb la Wiris-Desktop aquí ho podeu fer . Tingueu en compte el que ja s'ha comentat: avantatge, la interactivitat dels gràfics és més àgil; inconvenient: la presentació dels taulers gràfics no respon a les comandes que haguem fet, a no ser que, com s'ha fet en aquest cas s'hagi guardat el tauler gràfic "desenganxat"..

• 
  
  Com que ha de ser un nombre complex de mòdul 1 només cal triar l'argument. Això es fa amb un desplaçador que s'ha fet variar de 3º en 3º per estar segurs que "passa" per tots els angles que poden interessar més. Una vegada fixat l'argument, adoneu-vos de com es passa el nombre complex de la forma polar a la binòmica amb la comanda polar (hem d'indicar que l'argument es dóna en graus amb º de la pestanya unitats). Després d'això recordeu que punt aplicat a un nombre complex en forma binòmica ja en dibuixa l'afix.
• 
  
  La tria d el'índex es fa simplement amb un desplaçador que varia de 2 a 11 d'un en un. Per què fins a 11? Es podria posar més, evidentment!!!
• 
  
  El procediment per al càlcul d'arrels ja l'hem estudiat en el seu moment en la pràctica sobre nombres complexos però ara cal combinar-lo amb aspectes que ja preparen la presentació. És molt interessant observat llistes formades quan es recorren els elements d'un conjunt.
  • La comanda arrels ens dóna directament totes les arrels en forma binòmica
  • Ara les passem a la forma polar també amb la comanda polar, perquè la mateixa comanda té un doble ús.
  • Això ho hem fet perquè voldrem visualitzar el valor de l'argument en el gràfic. Adoneu-vos de com es converteixen aquests arguments, que estan donats en radiants, a graus. S'agafa només el número sense el signe º per qüestions de presentació en pantalla.
• 
  
  S'han deixat els eixos centrats i, com que es vol treballar amb la circumferència unitat, que té de diàmetre 2, s'ha cregut convenient deixar un marge i definir la finestra de 3 x 3.
  Per què informació="cap"? Perquè no apareguin etiquetes/pop-up que distraurien l'atenció.
  També es podrien desactivar els eixos, però ha semblat adequat deixar-los.
  Vegeu que es prepara el dibuix de la circumferència unitat i que com a referència s'hi marquen punts corresponents als valors que ens pot donar el desplaçador.
  Finalment adoneu-vos de l'ús de la comanda capsa_de_text (equivalent a la comanda escriu) perquè així podem preparar unes llistes, que es fan recorrent el conjunt G d'arguments de les arrels passats a graus, amb els textos que després farem escriure. Vegeu també que, a títol d'exemple, s'ha diversificat la posició on fem escriure l'argument segons que el punt corresponent sigui dels dos primers quadrants (argument positiu) o del tercer o el quart (argument negatiu).
• 
  
  Creiem que no cal cap comentari especial. Analitzeu-les amb atenció. Veureu que per "escriure" les capses_de_text que hem construït la comanda adequada és dibuixa. Recordeu que D és el punt que representa el nombre complex del qual volem calcular les arrels.
  Podríem acabar amb el dibuix dels dos desplaçadors:
  
  però en l'activitat tal com s'ha presentat s'ha fet una tasca "artesanal" per tal d'il·lustrar els regles graduats dels desplaçadors. Podeu entendre que és un aspecte d'ampliació.
• 
  
  
  Vegeu que es fa una llista de capses_de text que mostren els valors, sobre el regle del depsplaçador, d'alguns angles destacats i la llista dels punts corresponents que se superposen al regle. Con ja s'ha dit é suna llabor totalment "artesanal" la de buscar els valors adequats perquè tot encaixi perfectament.
• Semblantment es fa amb el desplaçador que ens permet escollir l'índex de l'arrel. No cal dir que si varieu el valor màxim d'aquest índex que està fixat a 11, també haureu de variar (si és que heu decidit posar-los) aquests punts.
  
  
  

Segur que amb aquestes indicacions i una bona dosi de paciència per a l'anàlisi ja heu tret l'entrellat del codi que analitzàvem. Ara no us en demanarem cap exercici relacionat... però ben segur que alguna de les coses que heu estudiat us donarà idees per a les vostres aplicacions que hauran de formar part del treball de fi de curs.

De vegades, en les aplicacions didàctiques és interessant que una figura compleixi sempre unes determinades condicions.

En la pràctica 6 del mòdul 1 ja vam veure la construcció interactiva d'un paral·lelogram. Es podien moure tres dels vèrtexs i la figura sempre es manetnia com a paral·lelogram. El quart no era lliure, no el podíem controlar, sinó que era el que ens ajudava a aconseguir que el quadrilàter fos un paral·lelogram.

Us proposo, tot seguit, que analitzeu l'exercici de dibuixar un quadrilàter que sempre sigui un rectangle... però naturalment no tots els vèrtexs es podran moure lliurement. Vegeu-ne primer de tot una animació.

• Dibuixareu dos punts A i B (els marcareu de color vermell) que es podran moure lliurement i serviran per establir la inclinació i l'amplada del rectangle.
• Tot seguit, definireu un punt C (de color verd) que, amb l'ajut de la comanda punt_més_proper podeu aconseguir que sempre estigui sobre la recta perpendicular a AB que passa per B.
• Finalment, definireu el punt D (que pintareu negre) per completar el rectangle. Ho podeu fer, pensant en la geometria afí com D = A + (C-B).

I ja podeu ordenar de fer el dibuix, posar algun rètol explicatiu... i provar si funciona.

• Versió Wiris-Desktop .