{"id":1958,"date":"2019-07-10T12:54:27","date_gmt":"2019-07-10T10:54:27","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/?page_id=1958"},"modified":"2019-08-17T13:25:21","modified_gmt":"2019-08-17T11:25:21","slug":"2-3-2-condicionales","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/2-3-2-condicionales\/","title":{"rendered":"2.3.2. Condicionales"},"content":{"rendered":"

A pesar de que se volver\u00e1 a ver m\u00e1s adelante en el libro, vamos a ver una instrucci\u00f3n que nos permitir\u00e1 seleccionar entre dos opciones: la instrucci\u00f3n condicional<\/strong>.<\/p>\n

Todos sabemos qu\u00e9 es una condici\u00f3n: es aquello que se tiene que cumplir para poder tener aquello otro.<\/p>\n<\/div>\n

La instrucci\u00f3n condicional es el if<\/span><\/strong> y la podemos usar de dos maneras diferentes. La sintaxis de la primera manera es la siguiente:<\/p>\n

if (condici\u00f3n) {\r\n  \/\/ instrucciones a hacer si se cumple la condici\u00f3n\r\n}<\/pre>\n
Vamos a ver un ejemplo:<\/p>\n
var figura = true;\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 == true) {\r\n\t\tellipse(200,200,100,100);\r\n\t}\r\n}<\/pre>\n
Este c\u00f3digo dibuja un c\u00edrculo si la variable figura<\/span> guarda el valor true<\/span>. Probad este c\u00f3digo y comprobad qu\u00e9 pasa si en vez de true<\/span> almacenamos false<\/span> en la variable figura<\/span>.<\/p>\n
La segunda sintaxis de la instrucci\u00f3n\u00a0if<\/span><\/strong> es esta:<\/p>\n
if (condici\u00f3n) {\r\n  \/\/ instrucciones a hacer si<\/strong> se cumple la condici\u00f3n<\/span>\r\n} else {\r\n  \/\/ instrucciones a hacer si no<\/strong> se cumple la condici\u00f3n<\/span>\r\n}<\/pre>\n
En este caso, si se cumple la condici\u00f3n, entonces hacemos las instrucciones que tenemos en azul. Y si no se cumple, las instrucciones que tenemos en rojo.<\/p>\n
Ahora modificaremos el ejemplo anterior haciendo que se tenga que escoger entre un c\u00edrculo y un cuadrado:<\/p>\n
var figura = \"c\u00edrculo\";\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} else {\r\n\t\trect(150,150,100,100);\r\n\t}\r\n}<\/pre>\n
En este caso, si el texto guardado en la variable figura<\/span> es \u00ab<\/span><\/strong>c\u00edrculo<\/span>\u00ab<\/span><\/strong>\u00a0entonces se dibujar\u00e1 un c\u00edrculo. Y si es cualquier otra cosa, dibujar\u00e1 un cuadrado. Haced la prueba, copiad este c\u00f3digo en el editor y probad a cambiar \u00abc\u00edrculo\u00bb<\/span> por cualquier otra cosa.<\/p>\n
Hemos visto las dos sintaxis que tiene la instrucci\u00f3n\u00a0if<\/span><\/strong>, pero, \u00bfc\u00f3mo lo podemos hacer si lo que queremos es que si en la figura hay \u00abc\u00edrculo\u00bb dibuje un c\u00edrculo, si hay \u00abcuadrado\u00bb dibuje un cuadrado y si no hay nada, que no dibuje nada? Lo podemos hacer con dos if<\/span><\/strong> simples (la primera versi\u00f3n). \u00bfLo prob\u00e1is? Al final de este reto ten\u00e9is una posible soluci\u00f3n.<\/p>\n
Nota<\/strong>: En estos \u00faltimos ejemplos hemos trabajado con tres tipos de datos diferentes: n\u00fameros, textos y valores l\u00f3gicos (true\/false<\/em>). Los valores num\u00e9ricos y l\u00f3gicos se escriben tal cual, pero los textos se escriben entre comillas\u00a0\u00ab\u00bb<\/span> para poderlos diferenciar de los nombres de variables.<\/p>\n<\/div>\n
Otro ejemplo con la instrucci\u00f3n for<\/span><\/strong><\/h2>\n
Vamos a hacer un peque\u00f1o ejemplo que explicaremos paso a paso. El objetivo es crear este cuadrado pintado con un degradado de grises. El cuadro gris m\u00e1s grande es el canvas<\/em>. Y lo que pintaremos es el degradado.<\/p>\n
\"\"<\/p>\n
Lo que haremos primero es crear dos variables que nos indiquen d\u00f3nde empezamos a dibujar el cuadro. Tendremos que tener en cuenta las medidas del canvas<\/em>:<\/p>\n
var xIni = 100, yIni = 100;\r\n\r\nfunction setup() {\r\n  createCanvas(480, 480);\r\n}<\/pre>\n
El canvas<\/em> ser\u00e1 un cuadrado de 480 p\u00edxeles de anchura. A la x<\/strong> inicial y la i<\/em> inicial les hemos asignado un valor de 100 p\u00edxeles. Si os fij\u00e1is en la imagen, podr\u00edamos centrar m\u00e1s el cuadro dentro del canvas<\/em>. \u00bfC\u00f3mo lo har\u00edais?<\/p>\n
Para dibujar el degradado, lo que haremos ser\u00e1 pintar 256 l\u00edneas verticales<\/strong> cada una de un color desde el 0 (negro) hasta el 255 (blanco). Para determinar de qu\u00e9 color se pinta una l\u00ednea, usaremos la funci\u00f3n\u00a0stroke()<\/span><\/a>.<\/p>\n
Por lo tanto, queremos repetir una misma instrucci\u00f3n (pintar una l\u00ednea), cambiando su posici\u00f3n\u00a0x<\/strong> y su color. Como sabemos el n\u00famero inicial (0) y el final (255) de los colores, podemos empezar por aqu\u00ed y escribir la\u00a0instrucci\u00f3n\u00a0for<\/span> correspondiente:<\/p>\n
for (var i=0; i<=255; i++ ) {<\/pre>\n
Vamos desde 0 hasta 255 con incrementos de uno.<\/p>\n
Nota<\/strong>: i<\/em>++ es equivalente a escribir i<\/em> = i<\/em> + 1. Pero es m\u00e1s corto poner i<\/em>++.<\/p>\n<\/div>\n
El siguiente paso que tenemos que hacer es, dentro de la repetici\u00f3n, escoger el color. Pero esto es muy f\u00e1cil:<\/p>\n
stroke(i);<\/pre>\n
Y nos queda un punto, algo m\u00e1s complicado, que es dibujar las l\u00edneas. Pensemos un poco. Primero, hemos dicho que las l\u00edneas son verticales, por lo tanto las y<\/strong> (inicial y final) no cambian nunca, siempre son las mismas yIni<\/span> e yIni+256<\/span>, porque como queremos hacer un cuadrado y sabemos que dibujaremos 256 l\u00edneas (una de cada color), la altura de las l\u00edneas tambi\u00e9n tiene que ser de 256 p\u00edxeles.<\/p>\n
Ahora nos queda determinar c\u00f3mo ser\u00e1n las x<\/strong>. Cada l\u00ednea empezar\u00e1 y acabar\u00e1 en la misma\u00a0x<\/strong> (es una l\u00ednea vertical). La primera l\u00ednea que dibujamos estar\u00e1 en la posici\u00f3n xIni<\/span>, la segunda 1 p\u00edxel m\u00e1s a la derecha, la tercera 2 p\u00edxeles m\u00e1s a la derecha que la primera y as\u00ed sucesivamente. La primera l\u00ednea la dibujaremos cuando la variable i<\/em> sea 0, la segunda cuando sea 1 y la tercera cuando sea 2. \u00bfPod\u00e9is ver la relaci\u00f3n? S\u00ed, xIni+i<\/span> ser\u00e1 la posici\u00f3n donde pintaremos cada l\u00ednea:<\/p>\n
line(xIni+i, yIni, xIni+i, yIni+256);<\/pre>\n
El programa completo quedar\u00e1 as\u00ed:<\/p>\n
var xIni = 100, yIni = 100;\r\n\r\nfunction setup() {\r\n  createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n  background(204);\r\n  for (var i=0; i<=255; i++ ) {\r\n\tstroke(i);\r\n\tline(xIni+i,yIni,xIni+i,yIni+256);\r\n  }\r\n}<\/pre>\n
Ejercicios<\/h2>\n
A partir del ejemplo, intentad hacer los siguientes cuadros, que solo requieren peque\u00f1os cambios en el programa anterior:<\/p>\n
\"\"<\/p>\n
Tambi\u00e9n pod\u00e9is intentar hacer este otro, a pesar de que hay que hacer dos repeticiones; la primera es el tri\u00e1ngulo degradado que acabamos de hacer. La segunda\u2026<\/p>\n
\"\"<\/p>\n
Encontrar\u00e9is las soluciones al final de este reto.<\/p>\n","protected":false},"excerpt":{"rendered":"
A pesar de que se volver\u00e1 a ver m\u00e1s adelante en el libro, vamos a ver una instrucci\u00f3n que nos permitir\u00e1 seleccionar entre dos opciones: la instrucci\u00f3n condicional. La instrucci\u00f3n condicional es el if y la podemos usar de dos maneras diferentes. La sintaxis de la primera manera es la siguiente: if (condici\u00f3n) { \/\/ […]<\/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\/1958"}],"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=1958"}],"version-history":[{"count":19,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1958\/revisions"}],"predecessor-version":[{"id":3740,"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/pages\/1958\/revisions\/3740"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/es\/wp-json\/wp\/v2\/media?parent=1958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}