{"id":428,"date":"2022-10-06T11:08:16","date_gmt":"2022-10-06T09:08:16","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=428"},"modified":"2022-10-06T11:08:16","modified_gmt":"2022-10-06T09:08:16","slug":"7-4-movimiento-circular","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/7-4-movimiento-circular\/","title":{"rendered":"7.4. Movimiento circular"},"content":{"rendered":"<p>Si queremos crear un movimiento circular, lo \u00fanico que tenemos que hacer es utilizar las dos oscilaciones juntas: con el coseno determinando la posici\u00f3n en <em>x<\/em> del c\u00edrculo y el seno determinando la posici\u00f3n en el eje <em>y<\/em>.<\/p>\n<p><figure id=\"attachment_210\" aria-describedby=\"caption-attachment-210\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-210\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_088.jpg\" alt=\"\" width=\"800\" height=\"422\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_088.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_088-300x158.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_088-768x405.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-210\" class=\"wp-caption-text\">Figura 89. Movimiento circular con <span class=\"courier\">sin()<\/span> y <span class=\"courier\">cos()<\/span><br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En este caso, quiz\u00e1 es menos sencillo utilizar <span class=\"courier\">map()<\/span> y nos es m\u00e1s f\u00e1cil pensar en una coordenada alrededor de la cual rotar\u00e1 nuestra figura (<span class=\"courier\">initX<\/span>, <span class=\"courier\">initY<\/span>) y un radio de rotaci\u00f3n (<span class=\"courier\">radius<\/span>). A las coordenadas del centro de rotaci\u00f3n les sumaremos los valores que nos devuelvan <span class=\"courier\">cos()<\/span> y <span class=\"courier\">sin()<\/span>, como siempre entre \u20131 y 1, multiplicados por el radio que queremos para nuestra rotaci\u00f3n. En nuestro caso, los valores oscilar\u00e1n entre \u2013150 y 150 tanto en vertical como en horizontal desde el centro del <em>canvas<\/em> (200, 200).<\/p>\n<p>Tanto en los ejemplos de movimiento lineal como en los de movimiento oscilatorio o circular, hemos utilizado los valores de las variables cambiantes a lo largo del tiempo como par\u00e1metros de la posici\u00f3n de nuestras figuras. Pero esto no tiene que ser as\u00ed, sino que podemos utilizar estos valores para hacer que nuestro <em>sketch <\/em>var\u00ede a lo largo del tiempo de cualquier manera, aplicando estos valores a cualquier par\u00e1metro de dibujo. Veamos un ejemplo aplicado al tama\u00f1o de un c\u00edrculo:<\/p>\n<p><figure id=\"attachment_212\" aria-describedby=\"caption-attachment-212\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-212\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_089.jpg\" alt=\"\" width=\"800\" height=\"322\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_089.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_089-300x121.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_089-768x309.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-212\" class=\"wp-caption-text\">Figura 90. Animando el tama\u00f1o del c\u00edrculo con <span class=\"courier\">sin()<\/span><br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>En este caso hemos utilizado el valor animado <span class=\"courier\">size<\/span> para determinar el tama\u00f1o del c\u00edrculo, que oscilar\u00e1 entre 0 y <span class=\"courier\">width<\/span>. De la misma manera que lo hemos usado para el tama\u00f1o, podr\u00edamos usarlo para el color; veamos un ejemplo:<\/p>\n<figure id=\"attachment_214\" aria-describedby=\"caption-attachment-214\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-214\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_090.jpg\" alt=\"\" width=\"800\" height=\"640\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_090.jpg 800w, \/wp-content\/uploads\/2022\/10\/PID_00290094_090-300x240.jpg 300w, \/wp-content\/uploads\/2022\/10\/PID_00290094_090-768x614.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-214\" class=\"wp-caption-text\">Figura 91. Animando el color<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>En este ejemplo hemos creado una \u00ablluvia aleatoria\u00bb en la que animamos el color de relleno de los c\u00edrculos para que oscile en un <em>hue<\/em> de entre 150 y 250. Esta animaci\u00f3n del color, unida a la animaci\u00f3n de la posici\u00f3n vertical de los c\u00edrculos, nos crea los gradientes de color.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si queremos crear un movimiento circular, lo \u00fanico que tenemos que hacer es utilizar las dos oscilaciones juntas: con el coseno determinando la posici\u00f3n en x del c\u00edrculo y el seno determinando la posici\u00f3n en el eje y. En este caso, quiz\u00e1 es menos sencillo utilizar y nos es m\u00e1s f\u00e1cil pensar en una coordenada [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/428"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":1,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/428\/revisions"}],"predecessor-version":[{"id":429,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/428\/revisions\/429"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}