WebGL al taller: energia i frenada

El repte d’avui

Calcular una energia cinètica i una distància de frenada amb passos guiats.
Comparar l’efecte de variar la massa, la velocitat inicial i el fregament.
Modificar un shader i distingir els càlculs físics del dibuix que fa la GPU.

Materials: navegador, calculadora i paper. Una persona calcula i l’altra prova el simulador; intercanvieu els papers a la segona missió.

Punt de partida: operacions amb decimals, significat de massa, força i velocitat. Si ho necessites, recupera l’explicació de forces de la classe 14.

Recorregut: activació, 5 minuts; explicació, 10; laboratori i missions, 20; taller WebGL, 15; tancament, 10.

1. Abans d’obrir el laboratori · 5 minuts

Si retirem l’empenta a un carretó que es mou, el fregament l’accelera o el frena?
Calcula al paper $2^2=2\cdot2$ i $4^2=4\cdot4$. Quantes vegades és més gran el segon resultat?
Prediu què demanarà més espai de frenada: un carretó a $2\,\mathrm{m/s}$ o el mateix a $4\,\mathrm{m/s}$.

El carretó ja comença en moviment. Durant la prova no hi ha cap empenta: només actua la força horitzontal de fregament.

2. Energia del moviment · 10 minuts

Què vol dir cada símbol?

$m$: massa del carretó i la càrrega, en $\mathrm{kg}$.
$v_0$: velocitat inicial, en $\mathrm{m/s}$.
$E_{c,0}$: energia cinètica inicial, en joules ($\mathrm{J}$).
$F_f$: intensitat de la força de fregament constant, en $\mathrm{N}$.
$d_f$: distància que necessita per aturar-se, en $\mathrm{m}$.

Dues fórmules, tres passos

$$E_{c,0}=\frac{m\cdot v_0^2}{2}$$

Multiplica la velocitat per ella mateixa.
Multiplica pel valor de la massa i divideix entre dos.
Divideix l’energia pel fregament per trobar la distància:

$$d_f=\frac{E_{c,0}}{F_f}\qquad(F_f>0)$$

Exemple resolt: $m=2\,\mathrm{kg}$, $v_0=2\,\mathrm{m/s}$ i $F_f=2\,\mathrm{N}$. Primer, $v_0^2=2\cdot2=4$. Després, $E_{c,0}=2\cdot4/2=4\,\mathrm{J}$. Finalment, $d_f=4/2=2\,\mathrm{m}$.

El fregament transforma l’energia del moviment en energia interna del carretó i la pista. En aquest model, l’energia transformada es representa amb $E_{\mathrm{tr}}$: $E_{\mathrm{tr}}=F_f\cdot d$ i $E_c+E_{\mathrm{tr}}=E_{c,0}$. La barra taronja representa energia transformada; no mesura una temperatura.

Cas límit: sense fregament, $F_f=0\,\mathrm{N}$, un carretó en moviment no s’atura tot sol. No podem dividir entre zero per calcular una distància de frenada.

3. Laboratori i missions · 20 minuts

Model didàctic amb dades fictícies: pista horitzontal i fregament constant. El carretó surt de $x=1\,\mathrm{m}$; el límit de prova és $x=19\,\mathrm{m}$, de manera que té $18\,\mathrm{m}$ de recorregut. La prova acaba si s’atura o arriba al límit; no simulem el xoc.

Velocitat cap a la dretaFregament cap a l’esquerraLímit de la prova

Preparant WebGL…

Massa total Velocitat inicial Força de fregament

Canviar un control prepara una prova nova. «Reinicia» conserva els paràmetres i el shader. Calcula la predicció abans de consultar-la o prémer «Inicia».

A punt per començar.

Temps

Distància recorreguda

Velocitat

Energia cinètica

Energia transformada

Comprova la predicció dels paràmetres actuals

Missió 1 · Amb guia

Prova $m=4\,\mathrm{kg}$, $v_0=2\,\mathrm{m/s}$ i $F_f=4\,\mathrm{N}$. Escriu al paper els tres passos del càlcul i introdueix la teva predicció.

Energia inicial ($\mathrm{J}$)Distància de frenada ($\mathrm{m}$)

Fes la predicció abans de provar el cas.

Missió 2 · Doblem la velocitat

Mantén $m=4\,\mathrm{kg}$ i $F_f=4\,\mathrm{N}$, però passa a $v_0=4\,\mathrm{m/s}$. Calcula l’energia i la distància. Després compara-les amb la missió 1: canvien el doble o quatre vegades?

Energia inicial ($\mathrm{J}$)Distància de frenada ($\mathrm{m}$)

Canvia només la velocitat per fer una comparació justa.

Missió 3 · Decisió de taller

Amb $m=4\,\mathrm{kg}$ i $v_0=4\,\mathrm{m/s}$, volem una distància de frenada màxima de $4\,\mathrm{m}$. Calcula la força mínima de fregament, prova-la i justifica una altra manera de reduir la distància.

Força mínima ($\mathrm{N}$)

Pista: reparteix l’energia inicial entre la distància màxima.

Reforç: usa la calculadora després d’escriure les operacions; recorda que dividir entre dos és trobar la meitat. Ampliació: repeteix la missió 1 amb el doble de massa i compara els resultats. Prova també el fregament nul.

4. Taller WebGL: dona color a l’energia · 15 minuts

Qui calcula i qui dibuixa?

JavaScript, a la CPU, calcula la velocitat, la distància i l’energia. WebGL envia triangles a la GPU. El fragment shader tria el color de cada píxel de la càrrega del carretó.

El shader rep u_energy, la proporció d’energia cinètica que encara queda: $r=E_c/E_{c,0}$. Al principi val $1$ i, quan s’atura, val $0$. Si comença aturat, fem servir $r=0$. u_color és el color base.

El color és una representació de l’energia, no una mesura de temperatura. Canviar el shader modifica l’aspecte; la frenada es calcula amb les mateixes fórmules.

Investiga amb una parella

Carrega el cas de la missió 2 i fes servir «Avança mig segon» per observar-lo sense presses.
Selecciona «Color fix». Modifica els tres decimals de vec3, entre $0$ i $1$, per obtenir un color diferent. Aplica el codi.
Selecciona «Color segons energia». Explica què fan mix i u_energy en aturar-se.
Compara les lectures amb els dos shaders: canvia la distància final?
Elimina un punt i coma, aplica i llegeix l’error. Restaura el codi i comprova que el simulador continua funcionant.

Fragment shader · GLSL

precision mediump float;
uniform vec4 u_color;
uniform float u_energy;
void main() {
    // Blau quan queda energia; taronja quan s’ha transformat.
    vec3 aturat = vec3(1.0, 0.45, 0.12);
    vec3 color = mix(aturat, u_color.rgb, u_energy);
    gl_FragColor = vec4(color, 1.0);
}

Els decimals del codi GLSL s’escriuen amb punt. El shader només pinta la càrrega: el rail, les rodes i les fletxes mantenen els colors de referència. Amb el mode 2D pots completar les missions i llegir el codi; l’editor de shaders necessita WebGL.

Torna al simulador

Shader d’energia preparat.

5. Tancament individual · 10 minuts

Un carretó de $6\,\mathrm{kg}$ comença a $2\,\mathrm{m/s}$ i frena amb $F_f=3\,\mathrm{N}$. Calcula l’energia inicial i la distància de frenada. Escriu una frase que expliqui per què reduir la velocitat ajuda a reduir l’espai necessari.

Energia inicial ($\mathrm{J}$)Distància de frenada ($\mathrm{m}$)

Explica la relació entre velocitat i distància

L’explicació es comenta amb el docent; la comprovació automàtica revisa els dos càlculs.

Pregunta de transferència: si canvies només el color del shader, canvia l’energia física? Quina part del programa sí que canviaria el moviment?

Extra opcional: un taller en 3D

Explora el carretó amb volum, rodes que giren i una càmera orbital. Canvia de perspectiva, vista superior i lateral, i comprova que moure la càmera no modifica els càlculs d’energia i frenada.

Ampliació de 10–15 minuts, per després de la classe o una altra sessió.

Obre el taller 3D →

Solucions i orientacions per al docent

Càlculs i comprovacions

Activació: el fregament frena; $2^2=4$ i $4^2=16$, quatre vegades més. La distància creix amb el quadrat de la velocitat si mantenim massa i fregament.
Missió 1: $E_{c,0}=4\cdot2^2/2=8\,\mathrm{J}$; $d_f=8/4=2\,\mathrm{m}$. Comprovació: $F_f\cdot d_f=4\cdot2=8\,\mathrm{J}$. Acaba a $x=3\,\mathrm{m}$, perquè surt de $x=1\,\mathrm{m}$.
Missió 2: $E_{c,0}=4\cdot4^2/2=32\,\mathrm{J}$; $d_f=32/4=8\,\mathrm{m}$. Energia i distància són quatre vegades les de la missió 1; acaba a $x=9\,\mathrm{m}$.
Missió 3: $F_f=E_{c,0}/d_f=32/4=8\,\mathrm{N}$. Amb aquesta força s’atura just al recorregut màxim demanat. Una força superior redueix la distància; una altra opció és reduir la velocitat inicial. La simulació no substitueix procediments de transport real.
Ampliació: amb $m=8\,\mathrm{kg}$, $v_0=2\,\mathrm{m/s}$ i $F_f=4\,\mathrm{N}$, $E_{c,0}=16\,\mathrm{J}$ i $d_f=4\,\mathrm{m}$. Doblar massa dobla energia i distància si mantenim força i velocitat.
Tancament: $E_{c,0}=6\cdot2^2/2=12\,\mathrm{J}$; $d_f=12/3=4\,\mathrm{m}$. Reduir la velocitat a la meitat redueix energia i distància a la quarta part, amb la mateixa massa i força.
Shader: mix(aturat, u_color.rgb, u_energy) interpola entre els colors. Amb $r=1$ mostra el color base; amb $r=0$ mostra el taronja. Ni el color ni un error de compilació canvien el model físic. La CPU executa les fórmules del moviment; la GPU pinta la càrrega.
Sense fregament: velocitat i energia cinètica constants fins al límit. La prova conserva la lectura de velocitat d’arribada; no representa un carretó aturat per impacte.

Evidències i adaptació

Recull un càlcul amb passos i unitats, una comparació on es canviï un sol paràmetre i una explicació de la funció del shader. Valora la revisió d’errors i la contribució individual a la parella. Si cal reforç, resol les missions 1 i 2 amb suport i usa els exemples de shader sense escriure codi nou.

Situació curricular: material d’ampliació que anticipa moviment i forces del bloc A2, amb una introducció guiada a l’energia. La data és una proposta d’ús demanada pel docent. «Classe 15» identifica el material web; no és el codi S15 del calendari i no acredita impartició. La planificació d’octubre manté els seus documents de referència.