Forces, moviment i programació WebGL al taller

Objectius i repte inicial · 5 minuts

Què aprendrem avui?

Reconèixer com actuen les forces oposades: l'empenta (força motriu) i el fregament (resistència).
Distingir les magnituds clau de la física amb les seves unitats: massa ($\mathrm{kg}$), força ($\mathrm{N}$), velocitat ($\mathrm{m/s}$) i acceleració ($\mathrm{m/s^2}$).
Comprendre com un navegador web utilitza les fórmules matemàtiques i la GPU (targeta gràfica) per programar simulacions amb WebGL.
Programar i editar el motor de físiques (afegir resistència aerodinàmica, pendents o rebots) i el Fragment Shader de la GPU.

💡 Pregunta d'entrada al taller

Imagina que estàs empenyent un carretó ple de plaques base i fonts d'alimentació al taller i agafa velocitat. Si de sobte retires completament les mans i deixes d'empènyer, què passarà?

Anota la teva predicció al quadern abans d'iniciar el simulador. Després comprovarem per què el fregament amb el terra determina el resultat!

Explicació guiada: Les forces i la 2a Llei de Newton · 10 minuts

Magnituds físiques

Què mesurem al taller?

La massa ($m$) mesura la quantitat de matèria del carretó i la seva càrrega, en quilograms ($\mathrm{kg}$).

Una força ($F$) és una empenta, tracció o resistència, mesurada en newtons ($\mathrm{N}$).

La velocitat ($v$) ens diu quants metres recorre el carretó cada segon, en metres per segon ($\mathrm{m/s}$).

L'acceleració ($a$) és el ritme al qual canvia la velocitat en el temps, en metres per segon al quadrat ($\mathrm{m/s^2}$).

2a Llei de Newton

Forces en direccions oposades

Al taller, l'empenta humana empeny cap endavant ($+$) i el fregament de les rodes s'hi oposa ($-$). La força resultant o neta és la diferència de forces:

F_{\mathrm{resultant}} = F_{\mathrm{empenta}} - F_{\mathrm{fregament}}

a = \frac{F_{\mathrm{resultant}}}{m} \quad \iff \quad F_{\mathrm{resultant}} = m \cdot a

$F_{\mathrm{res}}$ Força neta ($\mathrm{N}$)

$F_{\mathrm{emp}}$ Empenta ($\mathrm{N}$)

$F_{\mathrm{freg}}$ Fregament ($\mathrm{N}$)

$m$ Massa ($\mathrm{kg}$)

$a$ Acceleració ($\mathrm{m/s^2}$)

Exemple pràctic de taller resolt pas a pas

Un carretó amb eines té una massa de $m = 4\,\mathrm{kg}$. L'empenyem amb una força de $F_{\mathrm{emp}} = 12\,\mathrm{N}$ i la fricció de les rodes és de $F_{\mathrm{freg}} = 4\,\mathrm{N}$.

1️⃣ Pas 1: Calculem la força neta resultant

F_{\mathrm{resultant}} = 12\,\mathrm{N} - 4\,\mathrm{N} = 8\,\mathrm{N}

Restem les forces oposades perquè actuen en sentits contraris.

2️⃣ Pas 2: Calculem l'acceleració amb Newton

a = \frac{F_{\mathrm{resultant}}}{m} = \frac{8\,\mathrm{N}}{4\,\mathrm{kg}} = 2\,\mathrm{m/s^2}

Dividim força entre massa: cada segon guanya $2\,\mathrm{m/s}$ de velocitat!

Com funciona i es programa WebGL · Fórmules matemàtiques i arquitectura

Com fa un navegador web per dibuixar el carretó, la pista i les fletxes de força a $60$ fotogrames per segon? WebGL (Web Graphics Library) és una tecnologia que permet a JavaScript comunicar-se directament amb la targeta gràfica (GPU) de l'ordinador.

Arquitectura de computació

1. La CPU contra la GPU

Al nostre ordinador o mòbil tenim dos processadors clau que es reparteixen la feina:

🧠 CPU (Processador central · Càlcul seqüencial)

F_{\mathrm{res}} = F_{\mathrm{emp}} - F_{\mathrm{freg}} \quad \implies \quad a = \frac{F_{\mathrm{res}}}{m}

Executa les lleis físiques pas a pas i envia els paràmetres a la pantalla.

⚡ GPU (Targeta gràfica · Milers de nuclis en paral·lel)

Pinta simultàniament milions de píxels a $60\,\mathrm{fps}$ aplicant la geometria i el color sense sobrecarregar la CPU.

Fórmula 1 · Espai de pantalla

2. Coordenades normalitzades (NDC)

La pista del taller mesura $20\,\mathrm{m}$ ($x \in [0, 20]$). Però la GPU només entén coordenades de $-1.0$ (esquerra) a $+1.0$ (dreta), anomenades NDC (Normalized Device Coordinates):

x_{\mathrm{clip}} = \frac{2 \cdot (x - x_{\min})}{x_{\max} - x_{\min}} - 1 \quad \xrightarrow{x \in [0, 20]} \quad x_{\mathrm{clip}} = \frac{x}{10} - 1

Mapeig matemàtic a la GPU:

$x=0\,\mathrm{m} \to -1.0$ $x=10\,\mathrm{m} \to 0.0$ $x=20\,\mathrm{m} \to +1.0$

Fórmula 2 · Geometria

3. Construir objectes amb triangles

Les GPU només saben dibuixar triangles! Per dibuixar un rectangle (com el carretó o la pista), unim dos triangles amb $6$ vèrtexs de coordenades $(x,y)$:

\text{Rectangle carretó} = T_1(V_1, V_2, V_3) \cup T_2(V_3, V_2, V_4)

Aquests $6$ vèrtexs s'empaqueten com un vector numèric decimal Float32Array i s'envien a la memòria de vídeo (gl.ARRAY_BUFFER).

Fórmula 3 · Shaders i Uniforms

4. Connexió Física $\to$ GPU

Passem les magnituds físiques calculades a JavaScript cap als shaders de la targeta gràfica com a uniforms:

Magnitud	Símbol	Unitat	Variable Shader
Velocitat	$v$	$\mathrm{m/s}$	`u_velocity`
Acceleració	$a$	$\mathrm{m/s^2}$	`u_acceleration`
Massa	$m$	$\mathrm{kg}$	`u_mass`
Color RGBA	$\vec{C}$	$(R,G,B,A)$	`u_color`

Fórmula 4 · Integració numèrica d'Euler a 60 fps Com s'actualitza el moviment a cada fotograma?

A cada cicle d'animació del navegador ($\Delta t \approx 0,016\,\mathrm{s}$ a $60\,\mathrm{fps}$), s'apliquen les equacions d'actualització temporal:

⚡ Actualització de Velocitat

v_{\mathrm{nou}} = v_{\mathrm{anterior}} + a \cdot \Delta t

📍 Actualització de Posició

x_{\mathrm{nou}} = x_{\mathrm{anterior}} + \left(\frac{v_{\mathrm{anterior}} + v_{\mathrm{nou}}}{2}\right) \cdot \Delta t

Després, JavaScript converteix $x_{\mathrm{nou}}$ en coordenades NDC i la GPU repinta el carretó a la nova posició a l'instant!

Laboratori WebGL · 20 minuts

La pista representa un passadís de taller de $20\,\mathrm{m}$. El carretó s’atura quan el seu centre arriba a $19{,}5\,\mathrm{m}$ per mantenir-lo dins la pista. La fletxa blava indica la força d'empenta ($F_{\mathrm{empenta}}$); la fletxa taronja indica el fregament ($F_{\mathrm{fregament}}$). Els càlculs es processen en temps real i la GPU els visualitza amb WebGL.

Preparant la simulació…

⚖️ Massa del carretó ($m$) $4\,\mathrm{kg}$

Varia la càrrega de components ($1$ a $10\,\mathrm{kg}$)

▶️ Força d'empenta ($F_{\mathrm{emp}}$) $12\,\mathrm{N}$

Empenta cap a la dreta ($0$ a $20\,\mathrm{N}$)

◀️ Força de fregament ($F_{\mathrm{freg}}$) $4\,\mathrm{N}$

Resistència de les rodes ($0$ a $10\,\mathrm{N}$)

⏱️ Temps $t=0,0\,\mathrm{s}$ Durada cronometrada

📍 Posició $x=1,0\,\mathrm{m}$ Punt a la pista ($20\,\mathrm{m}$ max)

⚡ Velocitat $v=0,0\,\mathrm{m/s}$ Metres per segon

🚀 Acceleració $a=0,0\,\mathrm{m/s^2}$ $a = F_{\mathrm{res}} / m$

⚖️ Força neta $F_{\mathrm{res}}=8,0\,\mathrm{N}$ $F_{\mathrm{emp}} - F_{\mathrm{freg}}$

🎯 Missions de prova guiades

Tria una missió, calcula la força resultant i l'acceleració al quadern, i després prem «Inicia».

Força resultant en $\mathrm{N}$ ($F_{\mathrm{emp}} - F_{\mathrm{freg}}$): Acceleració en $\mathrm{m/s^2}$ ($a = F_{\mathrm{res}} / m$):

Recorda el principi d'inèrcia: la fletxa mostra una força, no la velocitat. Si les dues forces s'equilibren ($F_{\mathrm{resultant}} = 0\,\mathrm{N}$) i el carretó ja es mou, aquest continua avançant a velocitat constant! Si el fregament supera l'empenta, el carretó es frena progressivament fins a aturar-se.

Taller interactiu: Experimenta amb les Físiques i els Shaders WebGL

Pots editar tant les fórmules matemàtiques del motor físic (com es calcula l'acceleració, si hi ha vent o rebot) com el Fragment Shader de WebGL (com la GPU visualitza la velocitat i el color). Selecciona què vols programar:

📄 motor-fisica.js (Càlcul dinàmic d'acceleració i forces) JS Engine

function calculaFisiques(massa, empenta, fregament, velocitat, temps) {
    // 1. Força neta resultant (diferència de forces oposades):
    let forcaNeta = empenta - fregament;

    // 2. Acceleració segons Newton: a = F / m
    let a = forcaNeta / massa;

    // Si està aturat i la força és negativa, el fregament frena l'avanç
    if (velocitat <= 0 && a < 0) {
        a = 0;
    }

    return {
        acceleracio: a,
        rebot: false, // canvia a true per fer rebotar el carretó a la paret!
        coeficientRebot: 0.75
    };
}

Model clàssic de Newton actiu. Fes canvis a les fórmules i prem «Aplica la física a la simulació».

🔍 Com programar les teves lleis físiques

Fórmules matemàtiques que pots aplicar al motor:

📐 Fórmules físiques editables

F_{\mathrm{neta}} = F_{\mathrm{empenta}} - F_{\mathrm{fregament}} \quad \implies \quad a = \frac{F_{\mathrm{neta}}}{m}

\text{Fricció de l'aire:} \quad F_{\mathrm{neta}} = F_{\mathrm{emp}} - F_{\mathrm{freg}} - k \cdot v^2

Variable JS	Símbol	Unitat	Funció
`massa`	$m$	$\mathrm{kg}$	Quantitat de matèria del carretó
`empenta`	$F_{\mathrm{emp}}$	$\mathrm{N}$	Força aplicada cap a la dreta
`fregament`	$F_{\mathrm{freg}}$	$\mathrm{N}$	Resistència oposada de les rodes
`velocitat`	$v$	$\mathrm{m/s}$	Metres per segon actuals
`temps`	$t$	$\mathrm{s}$	Cronòmetre de la simulació

💡 Repte de ciències: prova la plantilla de «Fricció de l'aire». Veuràs com el carretó no pot accelerar infinitament perquè la resistència creix amb el quadrat de la velocitat ($v^2$)!

📄 fragment-shader.glsl (Shader de píxels de la GPU) GLSL ES 1.0

precision mediump float;
uniform vec4 u_color;
uniform float u_time;
uniform float u_velocity;
uniform float u_acceleration;

void main() {
    // gl_FragColor defineix el vector RGBA de color del píxel: vec4(R, G, B, A)
    // Els valors van de 0.0 a 1.0. Pots utilitzar u_velocity o u_acceleration!
    
    // Prova 1: mantén el color base:
    gl_FragColor = u_color;
    
    // Prova 2: descomenta per pintar groc industrial de taller:
    // gl_FragColor = vec4(1.0, 0.85, 0.1, 1.0);
}

Codi de shader llest. Fes canvis als valors numèrics i prem «Aplica el codi a la GPU».

🔍 Guia del Shader línia a línia

Fórmules de color i comunicació amb la GPU:

🎨 Vector de color de la GPU

\vec{C}_{\mathrm{pixel}} = \mathtt{gl\_FragColor} = \begin{pmatrix} R \\ G \\ B \\ A \end{pmatrix} \in [0.0, 1.0]^4

\text{Efecte tèrmic:} \quad R = \min\left(1.0, \; \frac{v}{8.0}\right), \quad B = 1.0 - R

Uniform GLSL	Física	Rang / Tipus	Descripció
`u_velocity`	$v$ ($\mathrm{m/s}$)	`float`	Velocitat actual del carretó
`u_acceleration`	$a$ ($\mathrm{m/s^2}$)	`float`	Acceleració del motor de física
`u_time`	$t$ ($\mathrm{s}$)	`float`	Rellotge continu per a animacions
`u_color`	$\vec{C}$	`vec4`	Vector RGBA de color inicial

💡 Efecte físic a la GPU: prova la plantilla «Termosensible». Comprova com la GPU llegeix u_velocity per fer que el carretó s'escalfi cap a tons vermellosos quan augmenta la velocitat!

Gran repte de física · 20 minuts

📊 Estadístiques de Kahoot de la classe →

Qüestionari interactiu tipus Kahoot integrat a la pàgina. Respon individualment o per parelles des del teu ordinador de taller. Totes les respostes es registren automàticament i s'envien a la pantalla d'estadístiques de l'aula per analitzar conjuntament la mitjana i els conceptes de física.

🖥️ Ordinador: 👤 Alumne:

Sincronització: FORCES-A004 Panell en viu ↗

8 preguntes Punts: 0 · Ratxa: 0

Prem «Comença el repte» quan estiguis a punt.

Les preguntes relacionen el simulador amb situacions reals del taller.

Tiquet de sortida · 5 minuts

Un carretó de components de $5\,\mathrm{kg}$ rep una empenta de $10\,\mathrm{N}$ i té un fregament de $5\,\mathrm{N}$.

1. Fórmules per a calcular la força neta i l'acceleració:

F_{\mathrm{resultant}} = 10\,\mathrm{N} - 5\,\mathrm{N} = \dots \quad \implies \quad a = \frac{F_{\mathrm{resultant}}}{m} = \dots

2. Escriu una frase breu que expliqui què passarà amb la velocitat si deixes d'empènyer mentre el carretó ja està en moviment.

Extra opcional: crea un carretó 3D

Edita dimensions, rodes, colors i shaders. Explora una càmera orbital i calcula l’acceleració amb empenta i fregament. Inclou tres reptes guiats i permet desar el disseny.

Ampliació de 10–15 minuts, per una altra sessió o després del recorregut principal; adapta l’ús al període de 55 minuts de FP1.

Obre el taller 3D editable →

Solucions i orientacions per al docent

Mostra les solucions després de treballar les activitats

Missió 1: $m=4\,\mathrm{kg}$, empenta de $12\,\mathrm{N}$ i fregament de $4\,\mathrm{N}$.
$F_{\mathrm{resultant}} = 12 - 4 = 8\,\mathrm{N} \quad \implies \quad a = \frac{8}{4} = 2\,\mathrm{m/s^2}$
Missió 2: la força resultant continua sent $8\,\mathrm{N}$, però la massa es duplica a $m=8\,\mathrm{kg}$:
$a = \frac{8}{8} = 1\,\mathrm{m/s^2}$
Amb més massa i la mateixa força neta, el carretó accelera exactament a la meitat.
Missió 3: el carretó comença amb empenta de $8\,\mathrm{N}$ i fregament de $2\,\mathrm{N}$. En retirar l'empenta mentre es mou ($F_{\mathrm{emp}}=0\,\mathrm{N}$), només actua el fregament:
$F_{\mathrm{res}} = 0 - 2 = -2\,\mathrm{N} \quad \implies \quad a = \frac{-2}{4} = -0,5\,\mathrm{m/s^2}$
L'acceleració negativa indica frenada fins que el carretó queda immòbil.
Tiquet de sortida:
$F_{\mathrm{resultant}} = 10 - 5 = 5\,\mathrm{N} \quad \implies \quad a = \frac{5}{5} = 1\,\mathrm{m/s^2}$
En retirar l'empenta, la força resultant passa a ser només el fregament ($-5\,\mathrm{N}$), la qual cosa produeix una desacceleració d'$a = -1\,\mathrm{m/s^2}$ que atura el carretó progressivament.

Criteris pedagògics d'FP Bàsica: insistir que la predicció es faci abans de tocar la simulació, verificar la concordança de les unitats ($\mathrm{N}$, $\mathrm{kg}$, $\mathrm{m/s^2}$), respectar l'ordre «resta de forces i divisió per la massa» i relacionar el concepte de shader WebGL amb la targeta gràfica dels ordinadors que munten al taller.