1 00:00:00,820 --> 00:00:06,900 Hola, muy buenas. En este video tutorial hablaremos sobre la definición o creación de funciones. 2 00:00:07,379 --> 00:00:15,500 Hasta ahora hemos utilizado las funciones del API de Processing, pero también podemos crearnos nosotros funciones 3 00:00:15,500 --> 00:00:23,239 que podremos utilizar en nuestro código o incluso el sistema puede llamar de manera automática. 4 00:00:24,160 --> 00:00:28,960 ¿Cómo creamos o definimos funciones? Lo hacemos de esta forma. 5 00:00:28,960 --> 00:00:55,759 Lo primero que ponemos es el tipo de datos que devuelve la función, si es que la función devuelve un dato, por ejemplo si nos hacemos una función para calcular la distancia entre dos puntos tendrá que devolver un dato numérico, pues tendríamos que representarlo en esta primera palabra, sería una palabra reservada que corresponde con el dato numérico o bien una clase, pero eso ya lo veremos más adelante. 6 00:00:55,759 --> 00:01:14,640 A continuación pondremos el nombre de la función. El nombre seguirá las mismas reglas que utilizamos para las variables. Tienen que estar en minúscula, son varias palabras, van juntas y la primera letra de las segundas, terceras, cuartas, etc. palabras van en mayúscula, etc. 7 00:01:14,640 --> 00:01:23,719 A continuación, entre paréntesis, se pondrán los parámetros que necesita la función. 8 00:01:24,299 --> 00:01:29,200 Si no necesita parámetros, pues directamente se queda en blanco lo que hay entre los paréntesis. 9 00:01:29,859 --> 00:01:35,519 Cuando se emplean parámetros, se tienen que definir los parámetros como se definen las variables. 10 00:01:36,299 --> 00:01:40,340 El tipo de dato del parámetro y a continuación el nombre del parámetro. 11 00:01:40,340 --> 00:01:46,980 Si hay más, pues pones una coma, el tipo de datos del segundo parámetro y el nombre del segundo parámetro 12 00:01:46,980 --> 00:01:51,400 Y así sucesivamente con todos los parámetros que tuviera la función 13 00:01:51,400 --> 00:02:00,939 Y por último, en tres llaves se pondría el código, el conjunto de instrucciones, de pasos que hace toda esa función 14 00:02:00,939 --> 00:02:07,280 Bueno, os recuerdo que todo el código que haya en tres llaves se le llama bloque de código 15 00:02:07,280 --> 00:02:20,129 Cuando una función no devuelve ningún dato, hace cosas pero no tiene por qué devolver ningún dato 16 00:02:20,129 --> 00:02:27,069 Como han sido por ejemplo las funciones que hemos utilizado como circle, dibujo un círculo pero no devuelve ningún valor 17 00:02:27,069 --> 00:02:34,110 Cuando tenemos funciones de este tipo, utilizamos como tipo devuelto la palabra reservada void 18 00:02:34,110 --> 00:02:41,770 Cuando queremos devolver un dato, cuando tenemos una función que sí que devuelve un valor 19 00:02:41,770 --> 00:02:48,110 Para proceder a devolver ese valor, utilizamos la palabra reservada retan 20 00:02:48,110 --> 00:02:50,710 Y a continuación el valor que queremos devolver 21 00:02:50,710 --> 00:02:56,270 Cuando ejecutamos esta sentencia, retan, y el valor que queremos devolver 22 00:02:56,270 --> 00:02:59,789 Se termina la función, sale de ahí la función 23 00:02:59,789 --> 00:03:07,530 Si no, la función acabaría cuando llegue a la última línea de código que hay dentro del bloque de código correspondiente a la función. 24 00:03:08,569 --> 00:03:11,449 Vamos a ver un par de ejemplos de funciones. 25 00:03:12,969 --> 00:03:18,409 Empezamos con dos funciones muy importantes en Processing, la función Setup y la función Draw. 26 00:03:20,009 --> 00:03:26,289 Hasta ahora hemos estado utilizando Processing de manera estática, pintábamos una serie de cosas y se acababa nuestro programa. 27 00:03:26,289 --> 00:03:34,330 Sin embargo, cuando nosotros ponemos estas funciones, decimos que ya utilizamos Processing de una manera dinámica 28 00:03:34,330 --> 00:03:45,259 ¿Por qué? Porque lo que hace el sistema cuando tenemos estas funciones, la primera que va a ejecutar es la función Setup 29 00:03:45,259 --> 00:03:52,259 Todo lo que haya dentro de las llaves de Setup, ahora mismo está vacío, pero la iremos dando contenido, será lo primero que se ejecute 30 00:03:52,259 --> 00:03:54,240 Y solo lo hará una vez 31 00:03:54,240 --> 00:03:57,599 Cuando se ejecute todo lo que haya dentro de la función setup 32 00:03:57,599 --> 00:04:00,860 Se ejecutará lo que hay dentro de la función draw 33 00:04:00,860 --> 00:04:04,039 De manera repetitiva 34 00:04:04,039 --> 00:04:08,199 Es decir, empezará por la primera línea 35 00:04:08,199 --> 00:04:13,319 Irá ejecutando todas las líneas que haya dentro de ese bloque de código de la función 36 00:04:13,319 --> 00:04:17,699 Y cuando termine, volverá a ejecutarse otra vez la función draw 37 00:04:17,699 --> 00:04:21,800 De manera seguida, una vez detrás de otra 38 00:04:21,800 --> 00:04:23,660 Como si fuera un bucle infinito 39 00:04:23,660 --> 00:04:38,639 Bueno, vamos a ejecutar el programa tal y como está. Hemos definido las funciones, pero no tienen contenido. Lo único que se hace es abrir una ventanita como se abría cuando no teníamos ningún código. 40 00:04:38,639 --> 00:04:45,040 Dentro de la función setup se suele utilizar la función que ya conocemos side 41 00:04:45,040 --> 00:04:51,639 Fijaros que en este caso no estoy definiendo una función sino lo que estoy haciendo es llamarla o ejecutarla 42 00:04:51,639 --> 00:05:01,300 Side es una función del API de processing y la estoy utilizando dentro de la función que me he definido 43 00:05:01,300 --> 00:05:02,680 La función setup 44 00:05:02,680 --> 00:05:08,600 Bueno si ejecutamos esto vemos que efectivamente se nos abre una pantalla más grande 45 00:05:08,600 --> 00:05:26,370 Dentro de la función draw, como ejemplo, vamos a dibujar un círculo. Vamos a dibujar un círculo con coordenada 100, la coordenada y 200 y el tamaño 50. 46 00:05:26,370 --> 00:05:33,990 Bueno, esta función draw se está ejecutando una vez tras otra 47 00:05:33,990 --> 00:05:37,350 Como el círculo lo tengo siempre en la misma posición 48 00:05:37,350 --> 00:05:39,850 Parece que solo se ejecuta una vez 49 00:05:39,850 --> 00:05:42,829 Pero realmente esto está continuamente ejecutándose 50 00:05:42,829 --> 00:05:46,629 De hecho vamos a hacer una pequeña modificación para comprobar que es así 51 00:05:46,629 --> 00:05:51,389 En lugar de poner una coordenada x estática 52 00:05:51,389 --> 00:05:55,350 No vamos a crear una variable de tipo numérico 53 00:05:55,350 --> 00:05:56,930 De tipo int, por ejemplo 54 00:05:56,930 --> 00:06:13,519 que voy a llamar coreX, de coordenada X, que va a empezar con un valor de 100 y aquí vamos a hacer lo siguiente, vamos a sustituir ese valor por el valor de la variable 55 00:06:13,519 --> 00:06:28,779 y después de pintarlo vamos a incrementar la variable core en 1. Una manera de hacer esto es utilizar el operador más igual y poniendo el número que queremos sumar. 56 00:06:28,879 --> 00:06:35,480 Esta expresión lo que está haciendo es que está sumando el valor 1, el que tengo aquí a la derecha, a la variable corX. 57 00:06:36,339 --> 00:06:44,620 Bueno, si draw se está ejecutando de manera repetida, lo que va a ocasionar es que ese círculo se desplace hacia la derecha. 58 00:06:44,939 --> 00:06:45,759 Vamos a comprobarlo. 59 00:06:48,040 --> 00:06:49,079 Bueno, ahí lo tenemos. 60 00:06:49,620 --> 00:06:56,680 Efectivamente, la función draw se repite una vez tras otra y el círculo se desplaza hacia la derecha. 61 00:06:57,259 --> 00:07:08,360 Si queremos borrar el fondo, es decir, que no aparezca un círculo encima del otro, sino solo un círculo, podemos utilizar la función background. 62 00:07:12,629 --> 00:07:20,000 Si le ponemos el valor de 200, me pintaría un color gris. Ahí lo tenemos. 63 00:07:25,329 --> 00:07:33,949 Bueno, estas dos funciones hemos dicho que son muy especiales y, de hecho, si nos vamos a la referencia del lenguaje, las vamos a encontrar. 64 00:07:33,949 --> 00:07:48,209 Aquí donde pone estructura en este bloque vamos a tener por una parte la función draw, aquí la tenemos y la función setup. Como siempre podemos entrar en cualquiera 65 00:07:48,209 --> 00:07:58,009 de ellas y vamos a ver ejemplos en los que aparecen estas funciones. Bueno, estas dos funciones son muy especiales pero podemos hacer otro tipo de funciones. 66 00:07:58,009 --> 00:08:05,290 De hecho vamos a crearnos una función que nos permita dibujar un Mickey Mouse en cualquier parte de la pantalla de forma muy sencilla 67 00:08:05,290 --> 00:08:09,970 Bueno, vamos a llamar a la función Mickey Mouse, no nos vamos a complicar 68 00:08:09,970 --> 00:08:14,949 Como es una función que va a dibujar algo, un Mickey Mouse, no va a devolver ningún valor 69 00:08:14,949 --> 00:08:19,110 Decimos que el tipo de vuelta es void o lo que es lo mismo, ninguno 70 00:08:19,110 --> 00:08:29,350 A continuación damos nombre a nuestra función y le indicamos los parámetros que va a tener esta función 71 00:08:29,350 --> 00:08:43,019 Bueno, esta función va a tener tres parámetros. El primero será de tipo numérico decimal, vamos a utilizar el float, y le vamos a llamar coreX. 72 00:08:44,480 --> 00:09:00,279 El segundo también será de tipo float y le vamos a llamar coreY. Y el tercero también será de tipo float y le vamos a llamar escala. 73 00:09:00,279 --> 00:09:07,440 Bueno, esa coma nos sobra, abrimos llaves, cerramos llaves 74 00:09:07,440 --> 00:09:13,519 Por cierto, antes de continuar vamos a quitar la definición de esta variable 75 00:09:13,519 --> 00:09:15,320 Que ya no la vamos a necesitar 76 00:09:15,320 --> 00:09:21,179 Y vamos a quitar también esta línea de código que ya no la vamos a necesitar 77 00:09:21,179 --> 00:09:26,120 Para pintar el Mickey Mouse vamos a ayudarnos ya de un programita que tenemos hecho 78 00:09:26,120 --> 00:09:31,720 Vamos a ir a buscar donde tenemos ya dibujado un Mickey Mouse 79 00:09:31,720 --> 00:09:39,940 la versión 2 de este programita, pues aquí tenía una serie de líneas de código que me pintaban la cara de un Mickey Mouse. 80 00:09:40,320 --> 00:09:48,039 Vamos a cogerla y vamos a copiarlas. Y nos las vamos a llevar dentro de la función. 81 00:09:50,019 --> 00:09:55,399 Bueno, cosas importantes. Siempre que se abre una llave, que estamos en un bloque de código, 82 00:09:55,399 --> 00:10:19,340 Lo lógico es intentar hacia la derecha el código para que se vea bien. Por ejemplo, esto funcionaría pero no queda muy bien. Como estas tres funciones están todas ellas dentro de este bloque de código, además fijaros como cuando me pongo en una llave se selecciona la de cierre, pues lo lógico es que estuvieran perfectamente intentadas. 83 00:10:19,340 --> 00:10:42,139 Lo puedo hacer con espacios o con tabuladores o mucho más sencillos. Dentro de editar hay una opción que se llama autoformato. Se puede hacer también con las teclas CTRL T. Si yo doy a autoformato, automáticamente se me pone el código bien ordenado, bien intentado. 84 00:10:42,139 --> 00:10:47,960 bueno, si intentamos ejecutar este código que tenemos aquí 85 00:10:47,960 --> 00:10:50,019 vamos a ver que aparentemente no pasa nada 86 00:10:50,019 --> 00:10:50,500 ¿por qué? 87 00:10:51,039 --> 00:10:53,320 porque nos hemos definido la función Mickey Mouse 88 00:10:53,320 --> 00:10:55,480 pero no la estamos utilizando en ningún lado 89 00:10:55,480 --> 00:11:02,000 para utilizarla tendríamos que venir al sitio adecuado 90 00:11:02,000 --> 00:11:02,779 por ejemplo aquí 91 00:11:02,779 --> 00:11:05,059 y llamar a la función 92 00:11:05,059 --> 00:11:05,899 yo la voy a copiar 93 00:11:05,899 --> 00:11:08,580 la función va a tener tres parámetros 94 00:11:08,580 --> 00:11:17,179 que es la posición X, la posición Y y la escala. De momento le vamos a poner que la escala valga 1. 95 00:11:19,559 --> 00:11:23,340 Bueno, ahí tenemos el Mickey Mouse. ¿Que queremos pintarlo de un color negro? 96 00:11:23,519 --> 00:11:32,200 Pues antes de llamar a la función, utilizaremos la función fill que ya conocemos, que nos sirve para elegir el color y le pondremos el valor 0. 97 00:11:33,240 --> 00:11:38,919 Bueno, vamos a ver que tal y como lo tenemos hasta ahora, aunque yo cambie las coordenadas de mi Mickey Mouse, 98 00:11:38,919 --> 00:11:51,299 El Mickey Mouse se sigue pintando en el mismo sitio. Vamos a ver qué podemos hacer para poder cambiar de posición este Mickey Mouse cuando llamamos a la función. 99 00:11:51,299 --> 00:12:12,899 Bueno, vamos a hacerlo modificando aquí un poco los círculos. Para ello, si está la cara, el círculo principal, y originalmente vale 200, vamos a intentar conseguir aquí un valor de 140 utilizando esta coordenada, como si fuera una variable. 100 00:12:12,899 --> 00:12:27,779 Es decir, restaré la coordenada menos 60. Puedo poner espacios o puedo quitarlos. Eso ya a gusto del consumidor. Fijaros como la llamada a una función resulta de una operación. No pasa absolutamente nada. 101 00:12:27,779 --> 00:12:36,379 De igual manera, para conseguir 260, pues tendremos que sumarlo, cor x más 60. 102 00:12:37,480 --> 00:12:40,759 Y aquí pondremos la coordenada x. 103 00:12:43,230 --> 00:12:44,990 Vamos a hacer lo mismo con la coordenada y. 104 00:12:46,129 --> 00:12:55,490 Suponemos que tiene que valer 200, la coordenada y, y para conseguir 110 haremos cor y menos 90. 105 00:12:55,490 --> 00:13:22,580 Y en la función de abajo, lo mismo, exactamente lo mismo. Y aquí pondremos core y. Por último, para conseguir dibujar más grande o más pequeño la cara del Mickey Mouse, lo único que tenemos que hacer es multiplicar este valor en la cara, el valor del tamaño del círculo de la cara, por la escala. 106 00:13:22,580 --> 00:13:29,480 Fijaros que en Java para multiplicar se emplea el operador asterisco 107 00:13:29,480 --> 00:13:34,799 Un asterisco en un código Java significa una multiplicación 108 00:13:34,799 --> 00:13:37,620 Bueno, tenemos que multiplicar ese valor 109 00:13:37,620 --> 00:13:44,159 Y tenemos que multiplicar también los tamaños de los círculos de las orejas 110 00:13:44,159 --> 00:13:48,659 Y también tenemos que multiplicar estos valores que hemos puesto aquí 111 00:13:48,659 --> 00:13:50,519 Este 60 por la escala 112 00:13:50,519 --> 00:13:52,559 Este 90 por la escala 113 00:13:52,559 --> 00:13:54,960 Este 60 aquí también por la escala 114 00:13:54,960 --> 00:13:56,620 Y este 90 por la escala 115 00:13:56,620 --> 00:13:58,259 Bueno, ahora 116 00:13:58,259 --> 00:14:01,419 Podemos ejecutar la función 117 00:14:01,419 --> 00:14:02,179 Igual que antes 118 00:14:02,179 --> 00:14:04,980 Y se nos ha desplazado 119 00:14:04,980 --> 00:14:06,320 A la coordenada adecuada 120 00:14:06,320 --> 00:14:09,559 Vamos a probarlo poniendo un valor más pequeño 121 00:14:09,559 --> 00:14:11,080 Por ejemplo, desplazándolo 122 00:14:11,080 --> 00:14:12,519 Hacia la izquierda 123 00:14:12,519 --> 00:14:14,519 Con un valor aquí más pequeño 124 00:14:14,519 --> 00:14:15,480 Vemos que se cambia 125 00:14:15,480 --> 00:14:18,860 Es más, podemos poner más caras de Mickey Mouse 126 00:14:18,860 --> 00:14:21,019 De forma muy sencilla 127 00:14:21,019 --> 00:14:22,320 Ya nos hemos creado la función 128 00:14:22,320 --> 00:14:26,759 Vamos a llamarla, vamos a utilizarla tantas veces como queramos 129 00:14:26,759 --> 00:14:30,399 Por ejemplo, vamos a hacerlo con un tamaño de cara más pequeño 130 00:14:30,399 --> 00:14:36,539 Y le vamos a poner un valor de 0.5, es decir, la mitad, la mitad de tamaño 131 00:14:36,539 --> 00:14:41,879 Por cierto, en Java los decimales se ponen con punto, nunca con coma 132 00:14:41,879 --> 00:14:45,779 Se sigue el criterio americano de numeración 133 00:14:45,779 --> 00:14:50,899 Y vamos a poner, por ejemplo, que la coordenada x sea el valor 200 134 00:14:50,899 --> 00:14:58,059 y por aquí el valor 300. Es decir, va a estar más a la derecha, más abajo y va a ser más pequeña que la primera. 135 00:15:00,440 --> 00:15:07,399 Ahí las tenemos. De esta forma podemos poner tantas caras como queramos en la posición que queramos de una manera muy sencilla. 136 00:15:07,659 --> 00:15:16,299 Nos hemos creado una función que pinta una cara de manera genérica en la posición y con el tamaño que nosotros queremos. 137 00:15:16,299 --> 00:15:23,039 con esto es fácil entender la utilidad que tiene la creación de funciones 138 00:15:23,039 --> 00:15:28,139 puede que me cueste un poco hacer o definir, crear la función 139 00:15:28,139 --> 00:15:31,100 pero una vez que la tengo creada es muy fácil utilizarla 140 00:15:31,100 --> 00:15:34,340 bueno, de momento hasta aquí es todo