PRÀCTICA BOUNCING BALL – Aula de Informàtica

Bouncing Balls (p5.js) — MVC + Diagrama

Diagrama MVC

Variables i propietats

Model (BallModel): pos — vector p5.Vector amb la posició (x,y).; vel — vector amb la velocitat.; r — radi de la bola (px).; mass — massa calculada com r * 0.1.; color — color de la bola.
View (BallView): model — referència al BallModel; utilitzat per a dibuixar.
Controller (BallController): model — el BallModel controlat.; view — BallView que dibuixa el model.; update(dt, bounds) — aplica gravetat, moviment i col·lisions amb les parets.
App (BallsApp): controllers — array amb tots els BallController.; paused — booleà per pausar la simulació.; bounds — objecte {w, h} amb dimensions del canvas.; lastMillis — timestamp per calcular dt.
Globals: app — instància de l’aplicació.; dragging — true si s’està arrossegant per crear una bola.; dragStart — p5.Vector amb la posició d’inici del drag.

Per incrustar aquesta pàgina a WordPress, penges el fitxer HTML al teu servidor i utilitzes un <iframe src="URL_DEL_FITXER"></iframe>. Alternativament, plugins com “Insert HTML Snippet” o “Code Embed” permeten enganxar HTML directe.

http://aula.gimnesia.net/2025/09/15/practica-bouncing-ball/2025-09-15T11:56:41+00:00adminUncategorizedBouncing Balls (p5.js) — MVC + Diagrama :root{--bg:#1b1b1d;--panel:#fafafa;--muted:#d0d0d0} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:#111} .wrap{display:grid;grid-template-columns:1fr 360px;gap:16px;height:100vh;padding:12px;box-sizing:border-box} .canvas-wrap{position:relative;background:#111;border-radius:8px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,0.6)} /* p5 canvas will fill this area */ ...admin pereantonibennassar@gmail.comAdministratorAula de Informàtica Blog Aula Informàtica Gimnèsia