{"id":766,"date":"2014-04-07T05:49:27","date_gmt":"2014-04-07T04:49:27","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=766"},"modified":"2021-08-07T16:15:01","modified_gmt":"2021-08-07T15:15:01","slug":"animaciones-ejercicio","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/animaciones-ejercicio\/","title":{"rendered":"Animaciones &#8211; Ejercicio"},"content":{"rendered":"<h3 style=\"text-align: justify;\"><span style=\"color: #73a53e;\">Descripci\u00f3n del ejercicio<\/span><\/h3>\n<p style=\"text-align: justify;\">Realizaremos un ejercicio que nos permitir\u00e1 comprender c\u00f3mo se anima una escena. Dicho ejercicio consiste en la construcci\u00f3n de una circunferencia unitaria (circunferencia goniom\u00e9trica) y sobre ella un punto que se desplazar\u00e1 de acuerdo a un \u00e1ngulo <b>a<\/b> que variar\u00e1 de 0 a 2pi Las coordenadas de este punto ser\u00e1n, entonces, (cos(a), sen(a)). Por otra parte, construiremos las funciones seno, coseno, tangente y secante, que ser\u00e1n <b>animadas<\/b> en funci\u00f3n del \u00e1ngulo <b>a<\/b>.<\/p>\n<h4 style=\"text-align: justify;\"><span style=\"color: #73a53e;\">Primera animaci\u00f3n. Circunferencia unitaria<\/span><\/h4>\n<p style=\"text-align: justify;\">En primer lugar, definiremos el tama\u00f1o de la escena en 600&#215;400 p\u00edxeles. Para ello, debemos recordar que este cambio se hace pulsando en la opci\u00f3n c\u00f3digo.<\/p>\n<p style=\"text-align: center;\"><img class=\" wp-image-768 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion2.png\" alt=\"animacion2\" width=\"753\" height=\"163\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion2.png 837w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion2-300x64.png 300w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/p>\n<p><b>Animaci\u00f3n.<\/b> Ahora, seleccionamos la opci\u00f3n animaci\u00f3n, en la que incluiremos los valores que se observan en la imagen. Los valores el algoritmo s\u00f3lo se pueden digitar si hemos activado la casilla de Animaci\u00f3n.<\/p>\n<p style=\"text-align: center;\"><img class=\" wp-image-769 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion3.png\" alt=\"animacion3\" width=\"758\" height=\"473\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion3.png 842w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion3-300x187.png 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/p>\n<p>El contenido de la animaci\u00f3n tiene la siguiente explicaci\u00f3n:<\/p>\n<ul>\n<li><b>Pausa.<\/b> Tiempo de espera entre un paso y otro de la animaci\u00f3n. Por defecto est\u00e1 en 60 mil\u00e9simas de segundo. Usaremos para este ejercicio un valor de 30.<\/li>\n<li><b>Inicio. <\/b>All\u00ed colocaremos nuestro \u00e1ngulo <b>a<\/b> con un valor inicial de cero (0) radianes. Es posible \u201cinicializar\u201d varios par\u00e1metros separ\u00e1ndolos por \u201c;\u201d. Por ejemplo: a=0; r=1;\u2026<\/li>\n<li><b>Hacer.<\/b> Aqu\u00ed escribimos los c\u00e1lculos de nuestra animaci\u00f3n. En nuestro ejercicio, haremos que el \u00e1ngulo se incremente en cada paso una cent\u00e9sima. Podr\u00edamos practicar con otros incrementos para observar los efectos sobre la animaci\u00f3n.<\/li>\n<li><b>Mientras.<\/b> Aqu\u00ed escribimos la condici\u00f3n que permite que los pasos de \u201chacer\u201d se sigan realizando. Es decir, <b>mientras<\/b> la condici\u00f3n sea verdadera, el \u00e1ngulo se seguir\u00e1 incrementando. En nuestro ejercicio la condici\u00f3n es a&lt;2pi.<\/li>\n<\/ul>\n<p><b>Circunferencia goniom\u00e9trica animada.<\/b>\u00a0 En la opci\u00f3n gr\u00e1ficos del editor de configuraciones, a\u00f1adimos la circunferencia unitaria x<sup>2<\/sup> + y<sup>2<\/sup> = 1, tal como se observa en la imagen.<\/p>\n<p style=\"text-align: center;\"><img class=\" wp-image-772 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion4.png\" alt=\"animacion4\" width=\"757\" height=\"192\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion4.png 841w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion4-300x75.png 300w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/p>\n<p style=\"text-align: justify;\">Haremos algunas modificaciones al espacio de trabajo, para efectos de una mejor visualizaci\u00f3n de la escena. Cambiamos la escala a 75 y la ubicaci\u00f3n del origen de coordenadas en O.x = -35%.<\/p>\n<p style=\"text-align: center;\"><img class=\" wp-image-773 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion5.png\" alt=\"animacion5\" width=\"753\" height=\"240\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion5.png 837w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion5-300x95.png 300w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/p>\n<p>Nuevamente, en gr\u00e1ficos, \u00a0a\u00f1adiremos el siguiente punto: (cos(a), sin(a)), con color rojo y tama\u00f1o 5\u2026 \u00a1empieza la animaci\u00f3n!<\/p>\n<p style=\"text-align: center;\"><img class=\"size-full wp-image-776 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion6.png\" alt=\"animacion6\" width=\"636\" height=\"218\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion6.png 636w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion6-300x102.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<p style=\"text-align: justify;\"><b>Tri\u00e1ngulo trigonom\u00e9trico animado.<\/b> Ahora a\u00f1adimos el siguiente <b>pol\u00edgono<\/b> que nos animar\u00e1 el tri\u00e1ngulo trigonom\u00e9trico: (0,0)(cos(a),sin(a))(cos(a),0)(0,0). Observemos que hemos activado el color de relleno (podemos usar el color que deseemos).<\/p>\n<p style=\"text-align: center;\"><img class=\"size-full wp-image-777 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion7.png\" alt=\"animacion7\" width=\"656\" height=\"208\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion7.png 656w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion7-300x95.png 300w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/p>\n<p style=\"text-align: justify;\">Ahora, guardamos, ejecutamos y observamos esta primera animaci\u00f3n.<\/p>\n<h4 style=\"text-align: justify;\"><span style=\"color: #73a53e;\">Segunda animaci\u00f3n.\u00a0<b>Funciones trigonom\u00e9tricas animadas<\/b><\/span><\/h4>\n<p>Vamos a animar la funci\u00f3n seno a\u00f1adiendo el siguiente punto (a, sin(a)). Para crear la animaci\u00f3n activaremos la opci\u00f3n rastro con el color que queramos. Esta opci\u00f3n permite dejar la huella de los diferentes puntos que se dibujan con (a, sin(a)).<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion8.png\"><img class=\" wp-image-778 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion8.png\" alt=\"animacion8\" width=\"752\" height=\"186\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion8.png 836w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/animacion8-300x74.png 300w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><\/a><\/p>\n<p><b>Como tarea, <\/b>no queda \u00a0incluir un control tipo men\u00fa para que muestre las dem\u00e1s funciones y un control tipo bot\u00f3n que pause o reanude la animaci\u00f3n.<\/p>\n<p>Esta ser\u00eda la escena final<\/p>\n<div style=\"text-align: center;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Animaciones_JS\/seno.html\" width=\"630\" height=\"430\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/div>\n<div style=\"text-align: center;\">(Puede descargar la escena desde <a href=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Animaciones_JS.zip\">este enlace<\/a>)<\/div>\n<p>Hemos \u00a0incluido algo adicional, \u00bfqu\u00e9 es?\u00a0Observemos la animaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descripci\u00f3n del ejercicio Realizaremos un ejercicio que nos permitir\u00e1 comprender c\u00f3mo se anima una escena. Dicho ejercicio consiste en la construcci\u00f3n de una circunferencia unitaria (circunferencia goniom\u00e9trica) y sobre ella un punto que se desplazar\u00e1 de acuerdo a un \u00e1ngulo a que variar\u00e1 de 0 a 2pi Las coordenadas de este punto ser\u00e1n, entonces, (cos(a), sen(a)). Por otra parte, construiremos las funciones seno, coseno, tangente y secante, que ser\u00e1n animadas en funci\u00f3n del \u00e1ngulo a. Primera animaci\u00f3n. Circunferencia unitaria En primer lugar, definiremos el tama\u00f1o de la escena en 600&#215;400 p\u00edxeles. Para ello, debemos recordar que este cambio se hace<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/animaciones-ejercicio\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[68,111],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/766"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=766"}],"version-history":[{"count":13,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/766\/revisions"}],"predecessor-version":[{"id":3508,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/766\/revisions\/3508"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}