Ciències Aplicades II · 1r trimestre · Classe 17
La moto de la classe anterior es dibuixava amb triangles. Avui donem gruix a les formes per generar prismes. Podràs girar la càmera, modelar una cara amb relleu o crear una composició de sòlids geomètrics.
INS Pere Borrell · Rubén Pineda · Curs 2026–2027
Materials: ordinador amb navegador, calculadora i paper. Treball en parelles, amb càlcul i conclusió individuals. No cal instal·lar programes.
Recorregut: activació, 5 minuts; explicació de polígons, 10; triangulació i volum, 10; taller creatiu, 20; reptes, 10; tancament, 5.
Punt de partida: saber sumar i multiplicar, i llegir coordenades senzilles. No cal haver fet la classe del xoc: el vincle és amb la representació gràfica.
Dibuixa una cara ràpida amb segments: un triangle per al nas, dos quadrilàters per als ulls i una boca formada per un polígon. Marca els vèrtexs. Quants costats té cada peça?
Al visor de la moto, una superfície que sembla contínua està formada per petites peces. En el nostre retrat, aquestes peces seran visibles i formaran part de l’estil artístic.
Un polígon és una figura plana tancada formada per segments rectes. Un costat és un segment del contorn; un vèrtex és el punt on s’uneixen dos costats. Un cercle no és un polígon.
Un polígon és regular si tots els costats i tots els angles interiors són iguals. Un rectangle no quadrat té quatre costats, però és irregular. Un polígon convex no té entrants; una diagonal queda dins de la figura. Aquest taller accepta peces convexes per poder dividir-les en triangles fàcilment.
El perímetre $P$ és la suma de les longituds dels costats. Per a un rectangle de base $b$ i altura $h$:
$$P=2b+2h$$Si $b=4\,\mathrm{u}$ i $h=3\,\mathrm{u}$, $P=4+3+4+3=14\,\mathrm{u}$.
L’àrea $A$ mesura la superfície interior. Per al mateix rectangle:
$$A=b\cdot h=4\cdot3=12\,\mathrm{u^2}$$La lletra $\mathrm{u}$ representa una unitat de la graella del dibuix; no són metres. Les àrees de peces superposades no es poden sumar per obtenir directament l’àrea visible de la cara.
En aquest taller enviem triangles a la GPU, el processador gràfic. Per dibuixar un polígon convex, triem un vèrtex i l’unim amb els vèrtexs no veïns: obtenim triangles que omplen la peça sense deixar buits.
Si $n$ és el nombre de costats i $T$ el nombre de triangles d’aquesta divisió, sense afegir vèrtexs interiors:
$$T=n-2$$Exemple resolt: un pentàgon té $n=5$. Per tant, $T=5-2=3$ triangles. Un quadrilàter es dibuixa amb $4-2=2$ triangles. Activar «Mostra els triangles» fa visibles les divisions, sense canviar el retrat.
El contorn d’un quadrat continua tenint quatre costats encara que la GPU utilitzi dos triangles. No confonguis les diagonals interiors amb els costats del polígon.
Un polígon és una figura plana. Si el desplacem perpendicularment al seu pla al llarg d’una altura $h$, obtenim un prisma recte. Aquest procés s’anomena extrusió. Una base triangular crea un prisma triangular; una base hexagonal, un prisma hexagonal.
Si la base té $n$ costats, el prisma té dues bases i $n$ cares laterals: $C=n+2$. El volum és:
$$V=A_{\mathrm{base}}\cdot h$$Exemple resolt: una base rectangular de $4\,\mathrm{u}$ per $3\,\mathrm{u}$ té $A=12\,\mathrm{u^2}$. Amb un gruix de $2\,\mathrm{u}$, el volum és $V=12\cdot2=24\,\mathrm{u^3}$. Canviar la posició de la peça no canvia el volum; duplicar-ne el gruix el duplica.
El visor també mostra la superfície total $S$ del prisma: les dues bases més les cares laterals. Amb perímetre de base $P_{\mathrm{base}}$, $S=2A_{\mathrm{base}}+P_{\mathrm{base}}h$. Aquest valor és d’una sola peça, encara que una altra la tapi.
El visor dibuixa totes les cares amb triangles. Les dues bases necessiten $2(n-2)$ triangles i les cares laterals, $2n$: en total, $T_{\mathrm{3D}}=4n-4$. Això és diferent del recompte d’una sola base plana.
Una coordenada $(x;y)$ indica la posició: $x$ creix cap a la dreta i $y$ cap amunt. El centre de la graella és $(0;0)$ i cada eix va de $-10$ a $10$. Per reflectir un punt respecte de l’eix vertical:
$$(-3;2)\longrightarrow(3;2)$$Canvia el signe de la coordenada horitzontal i conserva l’altura. Pots crear una cara simètrica o trencar la simetria de manera intencionada.
La profunditat i el gruix determinen quines superfícies queden davant d’altres; l’ordre de la llista no fixa la visibilitat. «Converteix» substitueix la forma seleccionada per un polígon regular; «Afegeix» crea un prisma nou amb el gruix i la profunditat seleccionats. Els punts blancs indiquen els vèrtexs de la selecció.
Carregar un exemple substitueix la composició actual. Desa primer el JSON si la vols conservar.
Arrossega per girar la càmera i utilitza la roda del ratolí per apropar-te. Un clic curt selecciona una peça. Els mateixos controls també es poden usar amb el teclat.
Preparant el retrat…
El nombre de costats canvia la peça seleccionada a l’instant. El gruix i el color es conserven. Encara que sembli un cercle, la base continua sent un polígon.
El centre és el del rectangle que envolta la base. $z$ situa la base posterior i $h$ n’és el gruix: la cara frontal és a $z+h$. Els indicadors mostren la base, el volum i la superfície total d’un sol prisma. Si una transformació surt de la graella, es conserva la forma anterior.
Crea un prisma amb base octagonal, gruix $h=2\,\mathrm{u}$ i mostra’n els triangles. Pots fer-ho sobre qualsevol peça o començar amb el prisma hexagonal.
Després justifica per què té $C=10$ cares. El visor comprova la construcció; l’explicació és teva.
Retrat inicial preparat. Selecciona una peça per començar.
Cada peça té un nom, un color hexadecimal, punts de la base plana, un gruix depth i una profunditat z. Els JSON antics sense aquests dos camps també es poden recuperar: reben valors inicials de volum. Escriu els punts en ordre al voltant del contorn. Les peces han de ser convexes, tenir entre tres i seixanta-quatre vèrtexs i quedar dins de la graella. En JSON, els decimals s’escriuen amb punt.
Una entrada invàlida conserva el retrat anterior. Els fitxers descarregats contenen el disseny aplicat. Aplica primer les edicions del codi abans de desar-les.
Una peça té forma d’hexàgon convex. Quants costats té? Quants triangles necessitem amb la divisió treballada? Dibuixa-la al paper.
La base d’un rectangle és $4\,\mathrm{u}$ i l’altura, $3\,\mathrm{u}$. Calcula’n el perímetre i l’àrea. Escriu les unitats al paper.
Un vèrtex de l’ull esquerre és $(-3;2)$. On queda el seu reflex respecte de l’eix vertical? Comprova la idea amb la graella i col·loca els dos ulls del retrat a la mateixa altura.
Una peça té una base d’àrea $12\,\mathrm{u^2}$ i un gruix de $2\,\mathrm{u}$. Quin volum té? Un altre prisma té base hexagonal: quantes cares té, comptant les bases?
Reforç: utilitza només triangles i rectangles; marca els vèrtexs al paper abans de comptar. Ampliació: canvia un vèrtex al JSON mantenint la convexitat i explica si la peça continua sent regular.
Mostra el retrat a la parella i explica una decisió de forma i una de color. Després, individualment:
L’explicació es revisa amb el docent; no es valida automàticament.
Creació oberta: una resposta possible és una cara amb nas triangular, ulls rectangulars, silueta octagonal i boca en forma de quadrilàter irregular. La cara pot ser asimètrica si l’alumne ho justifica.
Evidències: vista PNG, disseny JSON, geometria OBJ i càlculs individuals. Observar el recompte correcte, les unitats, una transformació intencionada i la revisió d’errors. No qualificar només l’estètica ni el nombre de peces. La divisió en triangles de polígons còncaus queda fora d’aquest taller.
Estat: proposta de 60 minuts preparada el 06/10/2026. «Classe 17» identifica el material web. És una introducció de geometria d’A4 situada al primer trimestre a petició del docent; no acredita impartició ni substitueix la programació d’octubre. Vinculació orientativa: resolució i comprovació de problemes (RA2), ús de representacions digitals (RA6) i revisió d’errors (RA7), sense pesos d’avaluació nous.
Les formes i coordenades són dissenys didàctics originals, en unitats de graella. El renderitzador utilitza WebGL natiu amb profunditat i llum. Si WebGL no està disponible, projecta la mateixa geometria 3D amb Canvas. L’OBJ conté la geometria; el JSON conserva també els colors. Les peces poden intersecar-se: sumar els seus volums no dona necessàriament el volum de la unió.
MDN · Crear objectes 3D amb WebGL: referència tècnica per als vèrtexs, buffers i shaders. Consulta: 06/10/2026.