PAC 2. Introducció a la Física en Javascript

En aquesta PAC de nou varem modificar i personalitzar uns exemples. En el meu cas, vaig aprofitar per entendre el millor possible com funcionaven les col·lisions y per posar una mica de so al tema 😉 El consultor ja em va animar i donar idees per fer un mini-joc de bàsket!

http://pedrotrotz.com/jsproves/pac2/demo0_mod.html
Els dos cercles s’han convertit en una pilota de basket i una cistella. Els rebots de la pilota disparen un so que a l’inici es defineix al <head> com un element <audio> que podrem fer servir dins el codi fent servir detecció de col·lisions. L’objecte que es passa a la funció Physics.body per crear la pilota té algunes propietats que hem canviat o afegit com, per exemple, la posició inicial, la velocitat inicial en l’eix x, el radi o la textura d’imatge associada. La cistella és un cos de tipus ‘compound’ amb tractament ‘static’ que evita que es mogui.

http://pedrotrotz.com/jsproves/pac2/demo1_mod.html
S’ha afegit un altre cercle, aplicant textures a les imatges del Sol i els planetes. S’ha eliminat la restricció dels límits del viewport per permetre als planetes sortir de la pantalla . També s’han canviat algunes propietats dels objectes com la massa, radi, posició i velocitat inicials. S’ha afegit la velocitat angular per emular el moviment de rotació dels planetes. També s’han aplicat textures d’imatge mitjançant la propietat styles. S’ha eliminat el comportament associat a l’atractor.

http://pedrotrotz.com/jsproves/pac2/demo3_mod.html
El renderer pixi s’ha canviat pel canvas i s’ha canviat la manera d’introduïr els projectils per permetre’n múltiples instàncies cada vegada que es clica sobre la pantalla en lloc de fer servir un únic timeout. En el procés de creació de les caixes, s’ha afegit un factor aleatori que decideix si una caixa és de pedra o de fusta i, en funció del seu valor, es canvien les propietats de massa i textura d’imatge de la caixa. El codi de detecció de col·lisions dispara un so quan xoquen un ocell amb una caixa.

http://pedrotrotz.com/jsproves/pac2/demo4_mod.html
S’ha canviat el valor timestep per aconseguir una major fluidesa en els càlculs del motor i s’ha afegit un objecte compost en forma de rellotge d’arena amb un petit codi que el fa girar cada 15 segons que s’executa a cada ‘step’ en funció del valor de la variable ‘mustRotate’. Cal destacar que els components de l’objecte compost es situen en relació al centre de masses d’aquest. El codi original de la funció dropInBody() ara introdueix només cercles de radi, massa i velocitat angular aleatoris als que s’ha assignat una textura d’imatge.

Leave a Reply