{"id":3748,"date":"2019-08-17T14:02:43","date_gmt":"2019-08-17T12:02:43","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=3748"},"modified":"2019-08-17T14:02:43","modified_gmt":"2019-08-17T12:02:43","slug":"2-3-5-soluciones-a-los-ejercicios-del-reto","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/2-3-5-soluciones-a-los-ejercicios-del-reto\/","title":{"rendered":"2.3.5. Soluciones a los ejercicios del reto"},"content":{"rendered":"<h2><strong>Soluci\u00f3n al ejercicio planteado al final del apartado de condicionales<\/strong><\/h2>\n<pre>var figura = \"cuadrado\"; \/\/ Cambiad este valor para probar el ejercicio\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background(200);\r\n\tif (figura == \"c\u00edrculo\") {\r\n\t\tellipse(200,200,100,100);\r\n\t}\r\n\tif (figura == \"cuadrado\") {\r\n\t\trect(150,150,100,100);\r\n\t}\r\n}<\/pre>\n<h3><strong>Degradado vertical<\/strong><\/h3>\n<pre>for (var i=0; i&lt;=255; i++ ) {\r\n  stroke(i);\r\n  line(xIni,yIni+i,xIni+256,yIni+i);\r\n}<\/pre>\n<h3><strong>Degradado horizontal pero de blanco a negro<\/strong><\/h3>\n<pre>for (var i=0; i&lt;=255; i++ ) {\r\n  stroke(256-i);\r\n  line(xIni+i,yIni,xIni+i,yIni+256);\r\n}<\/pre>\n<h3><strong>Tri\u00e1ngulo degradado<\/strong><\/h3>\n<pre>for (var i=0; i&lt;=255; i++ ) {\r\n  stroke(i);\r\n  line(xIni,yIni+i,xIni+i,yIni);\r\n}<\/pre>\n<h3><strong>Degradado oblicuo<\/strong><\/h3>\n<pre>for (var i=0; i&lt;=255; i++ ) {\r\n  stroke(i);\r\n  line(xIni,yIni+i,xIni+i,yIni);\r\n}\r\nfor (var i=0; i&lt;=255; i++ ) {\r\n  stroke(256-i);\r\n  line(xIni+i,yIni+256,xIni+256,yIni+i);\r\n}<\/pre>\n<h2><strong>Soluci\u00f3n al ejercicio del reloj<\/strong><\/h2>\n<p>Iremos viendo el c\u00f3digo poco a poco.<\/p>\n<p>Primero, tenemos el bucle que hacemos con la instrucci\u00f3n\u00a0<strong><span style=\"font-family: Courier, Arial;\">for<\/span><\/strong>:<\/p>\n<pre>for (var i=0;i&lt;60;i++){<\/pre>\n<p>Repetimos 60 veces porque 60 son los minutos y segundos que tiene un reloj.<\/p>\n<p>Dentro de este\u00a0<strong><span style=\"font-family: Courier, Arial;\">for<\/span><\/strong>\u00a0tenemos cuatro <strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>:<\/p>\n<pre>\r\n    if (i % 5 == 0) {\r\n      stroke(0);\r\n      line(0, -40, 0, -60);\r\n    }\r\n<\/pre>\n<p>Este primero nos dibuja todas las l\u00edneas del reloj. No queremos pintar las 60 l\u00edneas, sino que solo pintamos una por cada 5 minutos (igual que en un reloj). Por eso calculamos el residuo de dividir los minutos por 5 y pintamos si el residuo es 0 (es un m\u00faltiplo de 5).<\/p>\n<p>Segundo\u00a0<strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>:<\/p>\n<pre>\r\n    if (i == (horas % 12 * 5)) {\r\n      stroke(255,0,0);\r\n      line(0, -40, 0, -70);\r\n    }\r\n<\/pre>\n<p>Este dibuja la manecilla de las horas. Miramos la hora que es (est\u00e1 guardada en la variable horas), calculamos el residuo de dividir por 12 (porque las horas van de 0 a 23 y as\u00ed pasamos a horas de 0 a 11) y multiplicamos por 5 (para buscar el minuto adecuado para pintar esta hora). Pintamos las horas de color rojo y, adem\u00e1s, hacemos la raya algo m\u00e1s larga.<\/p>\n<p>Tercer <strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>:<\/p>\n<pre>\r\n    if (i == minutos) {\r\n      stroke(0,0,255);\r\n      line(0, -40, 0, -70);\r\n    }\r\n<\/pre>\n<p>Pintamos la manecilla de los minutos. Como tenemos 60 minutos, esto es m\u00e1s f\u00e1cil, pintaremos aquella raya que coincida con los minutos actuales. Tambi\u00e9n la hacemos m\u00e1s larga y adem\u00e1s de color verde.<\/p>\n<p>Y cuarto\u00a0<strong><span style=\"font-family: Courier, Arial;\">if<\/span><\/strong>:<\/p>\n<pre>\r\n    if (i == segundos) {\r\n      stroke(255);\r\n      line(0, -40, 0, -60);\r\n    }\r\n<\/pre>\n<p>Es lo mismo que los minutos. En este caso pintamos de blanco.<\/p>\n<p>Probad el ejercicio y cambiad los valores que cre\u00e1is conveniente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Soluci\u00f3n al ejercicio planteado al final del apartado de condicionales var figura = \u00abcuadrado\u00bb; \/\/ Cambiad este valor para probar el ejercicio function setup() { createCanvas(400, 400); } function draw() { background(200); if (figura == \u00abc\u00edrculo\u00bb) { ellipse(200,200,100,100); } if (figura == \u00abcuadrado\u00bb) { rect(150,150,100,100); } } Degradado vertical for (var i=0; i&lt;=255; i++ ) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/3748"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/comments?post=3748"}],"version-history":[{"count":1,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/3748\/revisions"}],"predecessor-version":[{"id":3752,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/3748\/revisions\/3752"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=3748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}