Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Vídeo 7. Definición de funciones - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 6 de octubre de 2020 por Juan Luis C.

73 visualizaciones

Hasta ahora hemos "utilizado" funciones. Pero, también las podemos
definir o crear. Este vídeo muestra cómo hacerlo. Además, muestra un programa de ejemplo. Y muy importante, indica
las funciones que debemos definir para utilizar Processing en "modo dinámico".

Más información Transcripción

Descargar la transcripción

Hola, muy buenas. En este video tutorial hablaremos sobre la definición o creación de funciones. 00:00:00
Hasta ahora hemos utilizado las funciones del API de Processing, pero también podemos crearnos nosotros funciones 00:00:07
que podremos utilizar en nuestro código o incluso el sistema puede llamar de manera automática. 00:00:15
¿Cómo creamos o definimos funciones? Lo hacemos de esta forma. 00:00:24
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. 00:00:28
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. 00:00:55
A continuación, entre paréntesis, se pondrán los parámetros que necesita la función. 00:01:14
Si no necesita parámetros, pues directamente se queda en blanco lo que hay entre los paréntesis. 00:01:24
Cuando se emplean parámetros, se tienen que definir los parámetros como se definen las variables. 00:01:29
El tipo de dato del parámetro y a continuación el nombre del parámetro. 00:01:36
Si hay más, pues pones una coma, el tipo de datos del segundo parámetro y el nombre del segundo parámetro 00:01:40
Y así sucesivamente con todos los parámetros que tuviera la función 00:01:46
Y por último, en tres llaves se pondría el código, el conjunto de instrucciones, de pasos que hace toda esa función 00:01:51
Bueno, os recuerdo que todo el código que haya en tres llaves se le llama bloque de código 00:02:00
Cuando una función no devuelve ningún dato, hace cosas pero no tiene por qué devolver ningún dato 00:02:07
Como han sido por ejemplo las funciones que hemos utilizado como circle, dibujo un círculo pero no devuelve ningún valor 00:02:20
Cuando tenemos funciones de este tipo, utilizamos como tipo devuelto la palabra reservada void 00:02:27
Cuando queremos devolver un dato, cuando tenemos una función que sí que devuelve un valor 00:02:34
Para proceder a devolver ese valor, utilizamos la palabra reservada retan 00:02:41
Y a continuación el valor que queremos devolver 00:02:48
Cuando ejecutamos esta sentencia, retan, y el valor que queremos devolver 00:02:50
Se termina la función, sale de ahí la función 00:02:56
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. 00:02:59
Vamos a ver un par de ejemplos de funciones. 00:03:08
Empezamos con dos funciones muy importantes en Processing, la función Setup y la función Draw. 00:03:12
Hasta ahora hemos estado utilizando Processing de manera estática, pintábamos una serie de cosas y se acababa nuestro programa. 00:03:20
Sin embargo, cuando nosotros ponemos estas funciones, decimos que ya utilizamos Processing de una manera dinámica 00:03:26
¿Por qué? Porque lo que hace el sistema cuando tenemos estas funciones, la primera que va a ejecutar es la función Setup 00:03:34
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 00:03:45
Y solo lo hará una vez 00:03:52
Cuando se ejecute todo lo que haya dentro de la función setup 00:03:54
Se ejecutará lo que hay dentro de la función draw 00:03:57
De manera repetitiva 00:04:00
Es decir, empezará por la primera línea 00:04:04
Irá ejecutando todas las líneas que haya dentro de ese bloque de código de la función 00:04:08
Y cuando termine, volverá a ejecutarse otra vez la función draw 00:04:13
De manera seguida, una vez detrás de otra 00:04:17
Como si fuera un bucle infinito 00:04:21
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. 00:04:23
Dentro de la función setup se suele utilizar la función que ya conocemos side 00:04:38
Fijaros que en este caso no estoy definiendo una función sino lo que estoy haciendo es llamarla o ejecutarla 00:04:45
Side es una función del API de processing y la estoy utilizando dentro de la función que me he definido 00:04:51
La función setup 00:05:01
Bueno si ejecutamos esto vemos que efectivamente se nos abre una pantalla más grande 00:05:02
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. 00:05:08
Bueno, esta función draw se está ejecutando una vez tras otra 00:05:26
Como el círculo lo tengo siempre en la misma posición 00:05:33
Parece que solo se ejecuta una vez 00:05:37
Pero realmente esto está continuamente ejecutándose 00:05:39
De hecho vamos a hacer una pequeña modificación para comprobar que es así 00:05:42
En lugar de poner una coordenada x estática 00:05:46
No vamos a crear una variable de tipo numérico 00:05:51
De tipo int, por ejemplo 00:05:55
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 00:05:56
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. 00:06:13
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. 00:06:28
Bueno, si draw se está ejecutando de manera repetida, lo que va a ocasionar es que ese círculo se desplace hacia la derecha. 00:06:36
Vamos a comprobarlo. 00:06:44
Bueno, ahí lo tenemos. 00:06:48
Efectivamente, la función draw se repite una vez tras otra y el círculo se desplaza hacia la derecha. 00:06:49
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. 00:06:57
Si le ponemos el valor de 200, me pintaría un color gris. Ahí lo tenemos. 00:07:12
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. 00:07:25
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 00:07:33
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. 00:07:48
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 00:07:58
Bueno, vamos a llamar a la función Mickey Mouse, no nos vamos a complicar 00:08:05
Como es una función que va a dibujar algo, un Mickey Mouse, no va a devolver ningún valor 00:08:09
Decimos que el tipo de vuelta es void o lo que es lo mismo, ninguno 00:08:14
A continuación damos nombre a nuestra función y le indicamos los parámetros que va a tener esta función 00:08:19
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. 00:08:29
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. 00:08:44
Bueno, esa coma nos sobra, abrimos llaves, cerramos llaves 00:09:00
Por cierto, antes de continuar vamos a quitar la definición de esta variable 00:09:07
Que ya no la vamos a necesitar 00:09:13
Y vamos a quitar también esta línea de código que ya no la vamos a necesitar 00:09:15
Para pintar el Mickey Mouse vamos a ayudarnos ya de un programita que tenemos hecho 00:09:21
Vamos a ir a buscar donde tenemos ya dibujado un Mickey Mouse 00:09:26
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. 00:09:31
Vamos a cogerla y vamos a copiarlas. Y nos las vamos a llevar dentro de la función. 00:09:40
Bueno, cosas importantes. Siempre que se abre una llave, que estamos en un bloque de código, 00:09:50
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. 00:09:55
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. 00:10:19
bueno, si intentamos ejecutar este código que tenemos aquí 00:10:42
vamos a ver que aparentemente no pasa nada 00:10:47
¿por qué? 00:10:50
porque nos hemos definido la función Mickey Mouse 00:10:51
pero no la estamos utilizando en ningún lado 00:10:53
para utilizarla tendríamos que venir al sitio adecuado 00:10:55
por ejemplo aquí 00:11:02
y llamar a la función 00:11:02
yo la voy a copiar 00:11:05
la función va a tener tres parámetros 00:11:05
que es la posición X, la posición Y y la escala. De momento le vamos a poner que la escala valga 1. 00:11:08
Bueno, ahí tenemos el Mickey Mouse. ¿Que queremos pintarlo de un color negro? 00:11:19
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. 00:11:23
Bueno, vamos a ver que tal y como lo tenemos hasta ahora, aunque yo cambie las coordenadas de mi Mickey Mouse, 00:11:33
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. 00:11:38
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. 00:11:51
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. 00:12:12
De igual manera, para conseguir 260, pues tendremos que sumarlo, cor x más 60. 00:12:27
Y aquí pondremos la coordenada x. 00:12:37
Vamos a hacer lo mismo con la coordenada y. 00:12:43
Suponemos que tiene que valer 200, la coordenada y, y para conseguir 110 haremos cor y menos 90. 00:12:46
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. 00:12:55
Fijaros que en Java para multiplicar se emplea el operador asterisco 00:13:22
Un asterisco en un código Java significa una multiplicación 00:13:29
Bueno, tenemos que multiplicar ese valor 00:13:34
Y tenemos que multiplicar también los tamaños de los círculos de las orejas 00:13:37
Y también tenemos que multiplicar estos valores que hemos puesto aquí 00:13:44
Este 60 por la escala 00:13:48
Este 90 por la escala 00:13:50
Este 60 aquí también por la escala 00:13:52
Y este 90 por la escala 00:13:54
Bueno, ahora 00:13:56
Podemos ejecutar la función 00:13:58
Igual que antes 00:14:01
Y se nos ha desplazado 00:14:02
A la coordenada adecuada 00:14:04
Vamos a probarlo poniendo un valor más pequeño 00:14:06
Por ejemplo, desplazándolo 00:14:09
Hacia la izquierda 00:14:11
Con un valor aquí más pequeño 00:14:12
Vemos que se cambia 00:14:14
Es más, podemos poner más caras de Mickey Mouse 00:14:15
De forma muy sencilla 00:14:18
Ya nos hemos creado la función 00:14:21
Vamos a llamarla, vamos a utilizarla tantas veces como queramos 00:14:22
Por ejemplo, vamos a hacerlo con un tamaño de cara más pequeño 00:14:26
Y le vamos a poner un valor de 0.5, es decir, la mitad, la mitad de tamaño 00:14:30
Por cierto, en Java los decimales se ponen con punto, nunca con coma 00:14:36
Se sigue el criterio americano de numeración 00:14:41
Y vamos a poner, por ejemplo, que la coordenada x sea el valor 200 00:14:45
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. 00:14:50
Ahí las tenemos. De esta forma podemos poner tantas caras como queramos en la posición que queramos de una manera muy sencilla. 00:15:00
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. 00:15:07
con esto es fácil entender la utilidad que tiene la creación de funciones 00:15:16
puede que me cueste un poco hacer o definir, crear la función 00:15:23
pero una vez que la tengo creada es muy fácil utilizarla 00:15:28
bueno, de momento hasta aquí es todo 00:15:31
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Autor/es:
Juan Luis Carrillo
Subido por:
Juan Luis C.
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
73
Fecha:
6 de octubre de 2020 - 7:38
Visibilidad:
Público
Centro:
IES SEVILLA LA NUEVA
Duración:
15′ 35″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
125.36 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid