{"id":9182,"date":"2017-09-26T10:17:58","date_gmt":"2017-09-26T08:17:58","guid":{"rendered":"http:\/\/agora.xtec.cat\/ieshugroger\/?p=9182"},"modified":"2017-09-26T10:45:22","modified_gmt":"2017-09-26T08:45:22","slug":"serpiente-roja","status":"publish","type":"post","link":"https:\/\/agora.xtec.cat\/ieshugroger\/general\/serpiente-roja\/","title":{"rendered":"Serpiente roja"},"content":{"rendered":"<h3><a>Serpiente Roja<\/a><\/h3>\n<div><\/div>\n<div><\/div>\n<ul>\n<li id=\"module-267\">\n<div>\n<div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ico-sfw-3\" alt=\"\" width=\"40\" height=\"39\" \/><\/div>\n<p>En este miniproyecto vas a aprender a programar un objeto que se mueve en la pantalla y va dejando rastro del movimiento del rat\u00f3n. Iremos escribiendo el c\u00f3digo paso por paso, a\u00f1adiendo nuevas funcionalidades en cada uno.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-0\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<ol>\n<li>\n<h3>Dibuja un c\u00edrculo<\/h3>\n<p>Empezaremos dibujando un c\u00edrculo rojo.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<\/td>\n<td>\n<pre id=\"\">\/*\r\n* _01_Red_Snake\r\n* \r\n* How to program a moving object leaving traces of the mouse movement on the screen. \r\n*       \r\n* (c) 2013-2016 Arduino LLC.\r\n*\/\r\n \r\nvoid setup() {\r\n  size(400, 400);\r\n}\r\n\r\nvoid draw() {\r\n  noStroke();                \/\/ Draw borderless shapes\r\n  fill(255, 0, 0);           \/\/ Fill shapes with pure red color\r\n  ellipse(100, 100, 30, 30); \/\/ Circle of 30 pixels diameter\r\n}\r\n\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-1\" target=\"_blank\" rel=\"noopener noreferrer\">source:\u00a0http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-1<\/a><\/p>\n<h4>Resultado<\/h4>\n<p>Se dibuja un c\u00edrculo en las misma posici\u00f3n una y otra vez mientras el programa est\u00e9 ejecut\u00e1ndose.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-1\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>noStroke(): Se emplea para no dibujar el contorno de las siguientes figuras.<\/li>\n<li>fill(red, green, blue): Establece el color utilizado para rellenar las siguientes figuras. Cada color (red, green, blue) puede ser un color entre 0 y 255.<\/li>\n<\/ul>\n<p>Comandos relacionados:<\/p>\n<ul>\n<li>size(ancho, alto): Establece el tama\u00f1o de la ventana del programa en p\u00edxeles.<\/li>\n<li>ellipse(x, y, diametroX, diametroY): Dibuja un elipse con centro en\u00a0x,y. El tama\u00f1o se establece con\u00a0diametroX\u00a0y\u00a0diametroY. Cuando estos dos par\u00e1metros son iguales, el resultado es un c\u00edrculo.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se establece el tama\u00f1o de la ventana a 400 x 400 p\u00edxeles en la funci\u00f3n\u00a0setup().<\/li>\n<li>En la funci\u00f3n\u00a0draw(), se llama a la funci\u00f3n\u00a0noStroke()\u00a0para dibujar las figuras sin contorno.<\/li>\n<li>Se configura el color para rellenar las figuras a rojo.<\/li>\n<li>Se dibuja un circulo en las coordenadas (100,\u00a0100) con un di\u00e1metro x e y de 30 p\u00edxeles. Debido a la configuraci\u00f3n anterior, el c\u00edrculo ser\u00e1 rojo y sin contorno.<\/li>\n<li>Repite la funci\u00f3n\u00a0draw()\u00a0y como no hay ning\u00fan cambio en ning\u00fan par\u00e1metro el programa se comporta de forma est\u00e1tica.<\/li>\n<\/ul>\n<\/li>\n<li value=\"2\">\n<h3>Haz que el c\u00edrculo se mueva<\/h3>\n<p>En este paso haremos que el c\u00edrculo se mueva con el rat\u00f3n, dejando un rastro en la pantalla.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<\/td>\n<td>\n<pre id=\"\">\/*\r\n* _01_Red_Snake\r\n* \r\n* How to program a moving object leaving traces of the mouse movement on the screen. \r\n*       \r\n* (c) 2013-2016 Arduino LLC.\r\n*\/\r\n \r\nvoid setup() {\r\n  size(400, 400);\r\n}\r\n\r\nvoid draw() {\r\n  noStroke();             \r\n  fill(255, 0, 0);          \r\n  ellipse(mouseX, mouseY, 30, 30); \/\/ Circle's placement following the mouse pointer\r\n}\r\n\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-2\" target=\"_blank\" rel=\"noopener noreferrer\">source:\u00a0http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-2<\/a><\/p>\n<h4>Resultado<\/h4>\n<p>En este paso lo que hemos hecho ha sido reemplazar las coordenadas del c\u00edrculo por\u00a0mouseX ymouseY. El punto rojo sigue ahora al rat\u00f3n, haciendo que el programa se comporte como una aplicaci\u00f3n de dibujo cualquiera.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-2\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Cada vez que se ejecuta la funci\u00f3n\u00a0draw(), las coordenadas de la elipse se sit\u00faan en\u00a0mouseX\u00a0y\u00a0mouseY\u00a0haciendo que el c\u00edrculo siga el puntero del rat\u00f3n.<\/li>\n<li>Como el fondo no se pinta de nuevo en cada iteraci\u00f3n, cada c\u00edrculo permanece en la pantalla dejando su trazo.<\/li>\n<\/ul>\n<\/li>\n<li value=\"3\">\n<h3>Cambia gradualmente el color<\/h3>\n<p>En este paso haremos que el color cambie mientras se ejecuta el programa, y para hacerlo, emplearemos una variable para el color en lugar de un n\u00famero constante.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<br \/>\n19<br \/>\n20<\/td>\n<td>\n<pre id=\"\">\/*\r\n* _01_Red_Snake\r\n* \r\n* How to program a moving object leaving traces of the mouse movement on the screen. \r\n*       \r\n* (c) 2013-2016 Arduino LLC.\r\n*\/\r\n\r\nint red = 255;\r\n \r\nvoid setup() {\r\n  size(400, 400);\r\n}\r\n\r\nvoid draw() {\r\n  noStroke();             \r\n  fill(red, 0, 0);          \r\n  ellipse(mouseX, mouseY, 30, 30); \/\/ Circle according to the mouse coordinates\r\n}\r\n\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-3\" target=\"_blank\" rel=\"noopener noreferrer\">source:\u00a0http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-3<\/a><\/p>\n<h4>Resultado<\/h4>\n<p>Como ves, este programa produce el mismo resultado que el programa del paso anterior solo que est\u00e1 vez empleamos una variable para definir el color.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-3\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Antes de la funci\u00f3n\u00a0setup(), se declara una variable tipo integer (red) y se inicializa a 255.<\/li>\n<li>Cuando configuramos el color en la funci\u00f3n\u00a0draw(), empleamos la variable\u00a0red\u00a0en lugar del n\u00famero 255.<\/li>\n<\/ul>\n<\/li>\n<li value=\"4\">\n<h3>Cambia gradualmente el color II<\/h3>\n<p>El cambio de color puede hacerse de diferentes maneras. El color puede cambiar entre 0 y 255 (negro y rojo respectivamente). En este paso se muestra como reducir la cantidad de rojo cada vez que se ejecuta la funci\u00f3n\u00a0draw().<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<br \/>\n19<br \/>\n20<br \/>\n21<br \/>\n22<br \/>\n23<br \/>\n24<br \/>\n25<\/td>\n<td>\n<pre id=\"\">\/*\r\n* _01_Red_Snake\r\n* \r\n* How to program a moving object leaving traces of the mouse movement on the screen. \r\n*       \r\n* (c) 2013-2016 Arduino LLC.\r\n*\/\r\n \r\nint red = 255;\r\n \r\nvoid setup() {\r\n  size(400, 400);\r\n}\r\n\r\nvoid draw() {\r\n  red = red - 1;            \/\/ Make the red a little darker\r\n  if (red &lt; 0){\r\n    red = 255;                 \/\/ Once it reaches black, make it light red again\r\n  }\r\n  \r\n  noStroke();             \r\n  fill(red, 0, 0);          \r\n  ellipse(mouseX, mouseY, 30, 30); \r\n}\r\n\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-4\" target=\"_blank\" rel=\"noopener noreferrer\">source:\u00a0http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-4<\/a><\/p>\n<h4>Resultado<\/h4>\n<p>Como ves, esta vez el color del c\u00edrculo var\u00eda mientras se ejecuta el programa.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-4\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>if( test ){ statements }: Comprueba si la condici\u00f3n (test) es cierta. Si lo es, se ejecuta el c\u00f3digo entre llaves. Si no lo es, el programa salta y el ejecuta el c\u00f3digo despu\u00e9s de las llaves.En este ejemplo, si\u00a0rojo\u00a0es menor que 0. Si es as\u00ed, los\u00a0statements\u00a0entre llaves son ejecutados. En este ejemplo, establece\u00a0red\u00a0a 255 de nuevo. Si por el contrario,\u00a0test\u00a0es falso, el programa procede a ejecutar el c\u00f3digo despu\u00e9s de las llaves. Utilizando declaraciones &#8220;if&#8221; te permite decir al programa que c\u00f3digo ejecutar<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>En la funci\u00f3n\u00a0draw()\u00a0se resta una unidad a la variable\u00a0red,\u00a0red = red-1. La primera vez que la funci\u00f3n\u00a0draw()\u00a0se ejecuta, la variable\u00a0red\u00a0valdr\u00e1 254.<\/li>\n<li>Empleando el s\u00edmbolo\u00a0&lt;\u00a0o &#8220;menor que&#8221;, la sentencia if comprueba si\u00a0red\u00a0es menor que 0. La primera vez que la funci\u00f3n\u00a0draw()\u00a0se ejecuta, esto ser\u00e1 falso.<\/li>\n<li>El color para rellenar las figuras se configura con la variable\u00a0red, esta vez un poco m\u00e1s oscuro que en el paso anterior,\u00a0fill(254, 0, 0).<\/li>\n<li>Con cada iteraci\u00f3n de la funci\u00f3n\u00a0draw(),\u00a0red\u00a0estar\u00e1 m\u00e1s cerca de valer 0, haciendo el color cada vez m\u00e1s oscuro.<\/li>\n<li>En la iteraci\u00f3n 255, al restar 1 a la variable\u00a0red, esta valdr\u00e1 0.<\/li>\n<li>La condici\u00f3n sigue siendo falsa ya que 0 no es menor que cero.<\/li>\n<li>Se configura el color de relleno a negro,\u00a0fill(0, 0, 0).<\/li>\n<li>En la iteraci\u00f3n 256 de la funci\u00f3n\u00a0draw(), al restar 1 de la variable\u00a0red\u00a0esta valdr\u00e1 -1.<\/li>\n<li>La sentencia if es cierta, -1 es menor que 0.<\/li>\n<li>Se ejecuta el c\u00f3digo entre llaves, haciendo que la variable\u00a0red\u00a0valga 255 de nuevo.<\/li>\n<li>Se configura el color de relleno a rojo,\u00a0fill(255, 0, 0).<\/li>\n<\/ul>\n<\/li>\n<li value=\"5\">\n<h3>Usa la funci\u00f3n sin()<\/h3>\n<p>En el paso anterior, el color cambia bruscamente de negro a rojo. Para cambiar los colores gradualmente, utilizaremos una funci\u00f3n sinusoidal que oscile continuamente entre negro y rojo.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<br \/>\n19<br \/>\n20<br \/>\n21<br \/>\n22<br \/>\n23<br \/>\n24<\/td>\n<td>\n<pre id=\"\">\/*\r\n* _01_Red_Snake\r\n* \r\n* How to program a moving object leaving traces of the mouse movement on the screen. \r\n*       \r\n* (c) 2013-2016 Arduino LLC.\r\n*\/\r\n\r\nint red = 255;\r\nint time = 0;\r\n \r\nvoid setup() {\r\n  size(400, 400);\r\n}\r\n\r\nvoid draw() {\r\n  time = time + 1;  \/\/ Increase time in one unit\r\n  red = int(128 * (1 + sin(time * 2 * PI \/ frameRate \/ 20)));  \/\/ Change the color red, repeat every 20s\r\n  \r\n  noStroke();             \r\n  fill(red, 0, 0);          \r\n  ellipse(mouseX, mouseY, 30, 30); \r\n}\r\n\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-5\" target=\"_blank\" rel=\"noopener noreferrer\">source:\u00a0http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-5<\/a><\/p>\n<h4>Resultado<\/h4>\n<p>El color de la serpiente cambia gradualmente entre negro y rojo continuamente. Esto se debe a que el color se establece con una funci\u00f3n senoidal dependiendo de la frecuencia de ejecuci\u00f3n del programa (framerate) y la variable\u00a0time\u00a0que cuenta las veces que\u00a0draw()\u00a0se ha ejecutado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-5\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>int(data): Convierte diferente tipos de datos a enteros.\u00a0int( 2.545 )\u00a0devuelve 2,\u00a0int( 233.9999 )\u00a0devuelve 233, etc..<\/li>\n<li>frameRate: Es una variable que da el\u00a0framerate\u00a0(frecuencia de ejecuci\u00f3n) del programa. Es decir, cuantas veces por segundo se ejecuta.<\/li>\n<li>PI: Es una variable constante que contiene el valor del n\u00famero \u03c0 (3.14).<\/li>\n<li>sin( angle ): Esta funci\u00f3n se utiliza para calcular el seno de un \u00e1ngulo. El par\u00e1metro\u00a0angle\u00a0est\u00e1 en radianes y por tanto puede ser un valor de 0 a 2\u03c0 (6.28). El valor que esta funci\u00f3n devuelve oscila gradualmente entre -1 y 1 con la variaci\u00f3n del \u00e1ngulo como se muestra a continuaci\u00f3n:\n<ul>\n<li>sin( 0 )\u00a0= 0<\/li>\n<li>sin( \u03c0\/2 )\u00a0= 1<\/li>\n<li>sin( \u03c0 )\u00a0= 0<\/li>\n<li>sin( \u03c0 + \u03c0\/2 )\u00a0= -1<\/li>\n<li>sin( 2\u03c0 )\u00a0= 0<\/li>\n<li>sin( 2\u03c0 + \u03c0\/2 )\u00a0= 1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-7\" alt=\"\" width=\"580\" height=\"572\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se calcula en valor de la variable\u00a0red\u00a0con esta l\u00ednea de c\u00f3digo:\u00a0red = int(128 * (1 + sin(time * 2 * PI \/ frameRate \/ 20)))<\/li>\n<li>Esto es lo que sabes por ahora: La variable para el color (red) debe ser un n\u00famero entre 0 y 255. La funci\u00f3n\u00a0sin( angle )\u00a0devuelve un valor entre -1 y 1 dependiendo del par\u00e1metro\u00a0angle.<\/li>\n<li>Necesitar\u00e1s: 1, el resultado final del calculo en un rango de 0 a 255; y 2, el valor para pasarle a la funci\u00f3n\u00a0sin(). El \u00e1ngulo tiene que aumentar una cantidad que se adapte a las necesidades del ejercicio.<\/li>\n<li>Se declara la variable entera\u00a0time\u00a0al principio del programa.<\/li>\n<li>Cada vez que la funci\u00f3n\u00a0draw()\u00a0se ejecuta, la variable\u00a0time\u00a0se incrementa 1. De esta forma, puedes emplear esta variable en la funci\u00f3n\u00a0sin().<\/li>\n<li>Veamos el calculo de la variable\u00a0red\u00a0m\u00e1s en detalle:\n<ul>\n<li>El valor que devuelve la funci\u00f3n\u00a0sin(time)\u00a0oscila entre -1 y 1, pero oscila demasiado r\u00e1pido.<\/li>\n<li>En cambio,\u00a0sin( time * 2 * PI \/ frameRate \/ 20)\u00a0oscila con un intervalo de 20 segundos.<\/li>\n<li>1 + sin( time * 2 * PI \/ frameRate \/ 20)\u00a0proporciona un valor que oscila entre 0 y 2.<\/li>\n<li>128 * ( 1 + sin( time * 2 * PI \/ frameRate \/ 20) )\u00a0proporciona un valor que oscila entre 0 y 255\u00a0(128*0 = 0 and 128*2 = 255).<\/li>\n<li>El resultado es un n\u00famero decimal, por tanto se convierte a entero con\u00a0int().\u00a0int( 128 * ( 1 + sin( time * 2 * PI \/ frameRate \/ 20) ) )<\/li>\n<\/ul>\n<\/li>\n<li>Igual que antes,\u00a0red\u00a0se emplea para configurar el color de relleno.<\/li>\n<\/ul>\n<\/li>\n<li value=\"6\">\n<h3>Cambiando de forma<\/h3>\n<p>El este paso cambiar\u00e1s la forma de la serpiente. Esto se consigue f\u00e1cilmente cambiando el tama\u00f1o del c\u00edrculo, utilizando tambi\u00e9n una funci\u00f3n senoidal.<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<br \/>\n19<br \/>\n20<br \/>\n21<br \/>\n22<br \/>\n23<br \/>\n24<br \/>\n25<br \/>\n26<\/td>\n<td>\n<pre id=\"\">\/*\r\n* _01_Red_Snake\r\n* \r\n* How to program a moving object leaving traces of the mouse movement on the screen. \r\n*       \r\n* (c) 2013-2016 Arduino LLC.\r\n*\/\r\n \r\nint red = 255;\r\nint time = 0;\r\nint diameter = 50;\r\n \r\nvoid setup() {\r\n  size(400, 400);\r\n}\r\n\r\nvoid draw() {\r\n  time = time + 1;     \r\n  red = int(128 * (1 + sin(time * 2 * PI \/ frameRate \/ 20))); \r\n  diameter = int(50 * (1 + sin( time * 2 * PI \/ frameRate \/ 5))); \/\/ Change the circle's diameter with the time\r\n  \r\n  noStroke();             \r\n  fill(red, 0, 0, 50);  \/\/ Add a 50% transparency to the color\r\n  ellipse(mouseX, mouseY, diameter, diameter); \r\n}\r\n\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><a href=\"http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-6\" target=\"_blank\" rel=\"noopener noreferrer\">source:\u00a0http:\/\/verkstad.cc\/urler\/ctc-g-b1-p-1-6<\/a><\/p>\n<h4>Resultado<\/h4>\n<p>La serpiente cambia ahora su tama\u00f1o y color continuamente. Calculamos el tama\u00f1o con una nueva variable,\u00a0diameter\u00a0cada vez que\u00a0draw()\u00a0se ejecuta.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-01-6\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>fill(red, green, blue, alpha): a\u00f1adimos un cuarto par\u00e1metro (alpha) a la funci\u00f3n\u00a0fill(). Esto establece la transparencia del color. Su rango va de 0 a 255.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable entera\u00a0diameter.<\/li>\n<li>En la funci\u00f3n\u00a0draw(), se calcula el valor de la variable\u00a0diameter\u00a0con esta l\u00ednea de c\u00f3digo:\u00a0int(50 * (1 + sin( time* 2 * PI \/ frameRate \/ 5)))\u00a0lo que hace que oscile entre 0 y 100 en intervalos de 5 segundos.<\/li>\n<li>Se configura el color de la serpiente con una transparencia de 50.<\/li>\n<li>El di\u00e1metro se configura con la funci\u00f3n\u00a0diameter.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>\u00a1SIGUE EXPERIMENTANDO!<\/h2>\n<ul>\n<li>La modificaci\u00f3n m\u00e1s sencilla que puedes hacer es cambiar el color de la serpiente. Puede ser tan f\u00e1cil como mover la variable\u00a0red\u00a0al segundo o tercer par\u00e1metro de la funci\u00f3n\u00a0fill().<\/li>\n<li>Puedes tambi\u00e9n a\u00f1adir otras variables para cambiar los otros par\u00e1metros del color de forma independiente.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><a>Serpiente Roja<\/a><\/p>\n<ul>\n<li id=\"module-267\">\n<p>En este miniproyecto vas a aprender a programar un objeto que se mueve en la pantalla y va dejando rastro del movimiento del rat\u00f3n. Iremos escribiendo el c\u00f3digo paso por paso, a\u00f1adiendo nuevas funcionalidades en cada uno.<\/p>\n<ol>\n<li>\nDibuja un c\u00edrculo<br \/>\nEmpezaremos dibujando un c\u00edrculo rojo.<\/p>\n<p>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<\/p>\n<p>\/*<br \/>\n*&hellip;  <a href=\"https:\/\/agora.xtec.cat\/ieshugroger\/general\/serpiente-roja\/\" title=\"Read Serpiente roja\">Llegeix m\u00e9s\u00bb<\/a><\/p>\n","protected":false},"author":3,"featured_media":9184,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1,394],"tags":[395],"class_list":["post-9182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-impulsem-la-robotica","tag-robotica"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/comments?post=9182"}],"version-history":[{"count":3,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9182\/revisions"}],"predecessor-version":[{"id":9187,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9182\/revisions\/9187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/media\/9184"}],"wp:attachment":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/media?parent=9182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/categories?post=9182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/tags?post=9182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}