Saltar navegación

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

Programación básica con Processing - 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 21 de marzo de 2020 por Rafael M.

70 visualizaciones

Programación básica con Processing con ejercicios resueltos

Más información Transcripción

Descargar la transcripción

Bien, buenos días a todos, espero que todos estéis bien. 00:00:00
La idea con esta pequeña mini clase a la que vamos a asistir 00:00:05
es básicamente asegurarme que todo el mundo está trabajando en las prácticas de processing 00:00:11
y que todos estéis siguiendo más o menos esas prácticas guiadas 00:00:18
y que no hay lagunas y que seguís haciendo las prácticas sin resolver esas lagunas. 00:00:22
Entonces, como normalmente en clase sería yo el que estaría pendiente de que esas cosas, de esas dudas se pudieran solucionar, pues lo que voy a hacer con esta pequeña clase es hacer un pequeño repaso general sobre el lenguaje de programación Proceso 5 y algunos ejercicios concretos que os puedan resultar muy interesantes de cara sobre todo a la práctica final que finalmente tenéis que entregar. 00:00:29
Bien, pues vamos a ello. 00:00:52
En primer lugar, como tenéis aquí, bueno, para ver si ya sabéis que es un entorno de programación muy particular, 00:00:54
bueno, pues tiene las características básicas de este lenguaje de programación, son muy parecidas a un lenguaje C, 00:01:00
y, bueno, pues a destacar sobre todo un poquito cómo es la interfaz. 00:01:09
La interfaz es una ventana en la que tenemos diferentes elementos, muy básica, eso sí. 00:01:14
La barra está de menús de pestañas que nos permiten realizar diferentes operaciones, desde editar el código actual en el que estamos, ejecutar con este botón de aquí el proceso en sí o pararlo, establecer el lenguaje de programación en el cual lo queremos programar y aún programándolo en Processing, luego podemos convertirlo a otro lenguaje con esta pestaña. 00:01:18
Tenemos aquí en esta ventana inferior una consola que nos da información sobre el programa 00:01:47
y sobre todo podemos interactuar con el lenguaje y a través del teclado nos da información de errores 00:01:54
y a través del teclado también podemos interactuar con el propio programa. 00:02:00
Tenemos la opción también de depuración, es decir, podemos ejecutar el programa paso a paso, 00:02:04
es un programa muy complicado, podemos utilizar este lenguaje de esta pestaña de depuración 00:02:08
que nos va a ir ejecutando el programa poco a poco. 00:02:13
Como cosas importantes a destacar en el processing es que, como ya sabéis, las instrucciones que vamos a programar en esta ventana deberían ir acompañadas de unos comentarios, 00:02:16
que son esas etiquetas que colocamos a las instrucciones y que nos van separando las partes del programa y nos va diciendo un poquito también esa parte del programa que es lo que hace. 00:02:34
Para poder insertar esos comentarios, acordaros que sobre una línea tenemos que poner la doble raya inclinada 00:02:43
Y si es un párrafo, por ejemplo una cabecera, pues entonces tendríamos que utilizar la barra inclinada y el asterisco 00:02:50
Y terminando después de varias líneas de texto del comentario en asterisco y barra inclinada 00:02:58
Todas las instrucciones, acordaros, terminan en punticoma 00:03:03
y los bloques de código especialmente en bucles y demás se insertan dentro de llaves 00:03:06
a diferencia por ejemplo de Python que es la identación la que determinaba un poquito los bucles y demás 00:03:15
y bueno pues vamos a ver en primer lugar en este PDF algunas instrucciones básicas y elementales 00:03:22
y algunos pequeños programas que nos van a ayudar un poquito a comprender y a poder realizar luego programas más complicados. 00:03:31
En primer lugar, bueno, pues ya veis aquí algunas instrucciones básicas e interesantes, sobre todo que tienen que ver con interacción. 00:03:39
Bueno, en primer lugar, estas son muy interesantes, WISE y HACE, bueno, disculpad mi pronunciación en inglés, que ya sabéis que es perfecta. 00:03:46
Y bueno, pues estas son dos instrucciones que nos dan el ancho de la ventana y el alto de la ventana. 00:03:53
Esto va a ser muy interesante, sobre todo cuando queramos situar algunos elementos en una parte completa de la ventana o bajando un acento de la ventana. 00:03:59
Luego las instrucciones mouseX y mouseY nos dan exactamente la posición X y del cursor dentro de la ventana. 00:04:05
La instrucción key guarda exactamente la tecla pulsada, insisto, muy interesante para el tema de la interacción con el teclado y con nuestro programa. 00:04:12
Key preset nos determina o nos detecta si una tecla ha sido pulsada, sea la que sea. 00:04:22
Y luego tenemos otras instrucciones interesantes que tienen que ver con, en este caso, por ejemplo, print, que nos permite escribir en la ventana de la interfaz de processing, en la ventana inferior nos permite imprimir texto, nos permite imprimir texto constatando de línea, la famosa instrucción delay que se expresa en milisegundos y la instrucción random que crea un número aleatorio. 00:04:27
Vamos en este caso, por ejemplo, con el primero de los ejercicios básicos que veis aquí. Fijaros, con este pequeño programa podemos escribir líneas que se van dibujando sobre nuestro lienzo, sobre nuestra ventana, desde el punto inicial 0,0 hasta la posición en la que esté marcando en ese momento el cursor. 00:04:49
entonces bueno pues en la primera de las funciones voy se está no incluimos no incluimos nada porque 00:05:16
en este caso no incluimos nada porque no queremos determinar por ejemplo el tamaño de la ventana 00:05:22
directamente la ventana por defecto con el color de fondo por defecto y luego eso sí ya en la 00:05:27
función vuestro dibujamos la instrucción dibujamos líneas con la instrucción line y en este caso el 00:05:32
punto de origen es la coordenada 0 0 que ya sabéis es que es en la parte superior izquierda y luego 00:05:39
vamos dibujando líneas en función de la posición del cursor del ratón 00:05:45
con las coordenadas mouseX y mouseY 00:05:50
Bueno, sencillo, es muy básico, hacéis si queréis la prueba 00:05:54
y os va a venir bien para algunas instrucciones y algunos programas 00:05:56
Lo que realmente nos interesa en Processing es el poder interactuar 00:06:01
y que el programa pueda ejecutar unas instrucciones u otras en función de una condición 00:06:06
Y entonces aquí tenemos las estructuras condicionales IF y SUIT 00:06:11
que permiten elegir un camino u otro del programa según se cumpla una condición. 00:06:15
Esas operaciones o esos operadores entre los elementos van a ser mayor o menor que, igual, etc. 00:06:19
Por ejemplo, este ejemplo número 12, este programa ejecuta un fundido a blanco en la ventana. 00:06:25
Y para ello, fijaros, vamos a observarlo, nos encontramos con que primero creamos un lienzo 00:06:32
de tamaño 200x200, creamos una variable entera cuyo valor de nombre y cuyo valor es 0 00:06:40
y ahora vamos a dibujar con la instrucción void drop lo siguiente, vamos a ir dibujando 00:06:47
el color del fondo del lienzo con el valor entre 0 y 255 y por lo tanto va a ser un color 00:06:52
entre el negro y el blanco 00:07:03
es decir que se va a hacer un fundido a blanco 00:07:07
como dice el ejercicio 00:07:10
entonces ejecutamos en este caso 00:07:13
para poder visualizarlo 00:07:15
ejecutamos este void draw 00:07:17
y cada vez que damos una vuelta 00:07:20
incrementamos el valor de la variable i 00:07:22
en una unidad 00:07:25
esta instrucción se consigue con i++ 00:07:26
pero sería lo mismo que poner i igual a i más 1 00:07:28
es exactamente lo mismo 00:07:31
Y luego para poder ver ese degradado de negro a blanco, en este caso lo que hacemos es colocar un 10 milisegundos para poder visualizarlo. 00:07:32
Y yo creo que tenía por aquí esta instrucción, me abro donde está, estará por acá, exactamente por aquí. 00:07:42
Efectivamente tenemos en el programa el fundido a blanco, aquí lo tenemos exactamente igual. 00:07:49
y cuando lo ejecutamos pues efectivamente aparece de negro y se va espero que sea para que se aprecie 00:07:56
en la grabación se va a blanco vale fácil y sencillo y para toda la familia en la siguiente 00:08:03
ejercicio el condiciona el ejercicio número 13 dice que este programa se envía a la consola un 00:08:12
mensaje según la tecla que ha sido pulsada vamos a verlo y efectivamente en la instrucción voy 00:08:17
setup no ejecutamos nada porque no lo queremos ni siquiera consola al decirnos pero no queremos 00:08:22
siquiera una ventana un lienzo aunque se abre uno por defecto porque realmente no nos interesa es 00:08:26
lo que aparece en la parte inferior en la ventana de la consola donde nos va a dar información y 00:08:30
cuál es el programa que vemos aquí pues dice estas funciones dentro y en este caso ejecutamos 00:08:36
la instrucción condicional y detectamos si ha sido pulsado que hay presente si ha sido pulsado 00:08:41
Y entonces en este caso lo que se ejecuta es lo siguiente, una frase con la instrucción println, la tecla pulsada es, fijaros las comillas abarcan toda esta frase incluyendo este espacio y luego le añadimos más key, es decir que añadimos a la frase la tecla pulsada es dos puntos espacio y le añadimos con la instrucción key la tecla que ha sido pulsada. 00:08:49
y esperamos 100 milisegundos para luego detectar la siguiente 00:09:17
porque si no lo pusiéramos probablemente se ejecutaría varias veces la misma tecla 00:09:21
porque en el momento que pulsamos va a toda pastilla la lectura del teclado 00:09:25
y se ejecutaría varias veces 00:09:28
y esto si no recuerdo mal pues tiene que estar 00:09:29
y si abrimos el programa que está por acá 00:09:32
pues efectivamente al ejecutarlo se nos abre una ventana 00:09:37
que no nos sirve para nada el lienzo porque no vamos a actuar sobre él 00:09:40
y al pulsar cualquier tecla, en este caso por ejemplo la letra A, la C, la B, la T, vemos que se va imprimiendo en la consola cualquiera de las letras que vayamos poniendo. 00:09:43
¿De acuerdo? Bueno, pues continuamos con el siguiente ejercicio. 00:09:55
En este caso, este ejercicio utiliza la instrucción switch y en este caso fijaros la ventana cambia de color de rojo a azul según la tecla que haya sido pulsada. 00:10:01
Si nos fijamos un poco en el programa en sí, vemos que el programa primero en la función voice setup crea un lienzo de 200x200 y debajo en la consola nos escribe elige un color R para el rojo y A para el azul, todo ello entrecomillado para indicar al usuario que tiene que teclear la R o la A. 00:10:09
Y luego ya, lo que es en el void draw, es decir, en el programa principal que se va a ejecutar, pues asignamos cualquier tecla presionada a la variable tecla, ¿vale? Y esa tecla, que por cierto la hemos definido antes como un carácter, tiene que ser un carácter del teclado. 00:10:33
Y ahora preguntamos qué tecla ha sido pulsada y en función de qué tecla haya sido pulsada, en el caso de que sea la R, fijaros que se pone entre comillas, pues en este caso se ejecuta el fondo, background, en este caso en color rojo. 00:10:52
Y con esto saldríamos de esta condición. En el caso de que sea la tecla A la pulsada, en este caso sería el color azul y por lo tanto background sería 0,0255. 00:11:08
Y también con la instrucción break saldríamos de este condicional. Y esto volvería a ejecutarse constantemente. 00:11:27
Entonces, si vamos a verlo por aquí, que estará por aquí, efectivamente aquí tenemos este ejercicio, pues cuando lo ejecutamos aparece una ventana y esta ventana, dependiendo si es azul, presiono la A, si presiono la R, pues aquí tenemos los dos colores que se van a ejecutar. 00:11:33
El siguiente ejercicio, el bucle FOR, es un bucle que nos va a permitir en este caso ejecutar unas líneas paralelas en una ventana. 00:11:51
Para ello creamos, fijaros, ni siquiera lo dibujamos en la función VOIDTROP, directamente lo configuramos en el setup porque se ejecuta una vez y ya está. 00:12:04
Y no queremos nada más, simplemente que se represente. 00:12:12
entonces establecemos una ventana de 200 x 200 y con el bucle for 00:12:14
acordaros más o menos que esto es muy parecido a otros lenguajes que hemos visto 00:12:18
pues para la variable x que vale 20 y es entera y hasta 200 00:12:21
vamos incrementando de 20 en 20, es decir que vamos incrementándonos en el eje x de 20 en 20 00:12:30
y ejecutamos una línea que es, atentos, empieza en la posición donde está la variable x 00:12:35
y comienza en la eje de coordenadas y en cero 00:12:41
es decir que siempre va a empezar ahí arriba 00:12:48
y luego va a bajar una distancia que es 00:12:49
perdón, se va a mover una distancia que es la distancia del valor x 00:12:52
y va a bajar exactamente 200 píxeles hacia abajo en el eje y 00:12:57
que es el tamaño del lienzo 00:13:03
bueno pues esto si lo ejecutáramos veríamos esto y no tiene más 00:13:05
y ahora que os he puesto tres pequeños ejercicios 00:13:08
yo creo que ya muy interesantes, una vez que veamos esto 00:13:13
pues vamos a ver tres ejercicios interesantes 00:13:15
uno que tiene que ver con 00:13:17
simbolitos 00:13:18
simbolos de advertencia, un emoticono 00:13:20
y un logo que puede ser el de Audi o cualquier otro 00:13:22
y bueno 00:13:25
para poder hacerlos 00:13:27
simplemente hemos dado una pequeña 00:13:29
pista de como sería un poquito 00:13:31
la figura principal que tiene que dibujar 00:13:32
que ya lo podéis imaginar y vamos a ver aquí 00:13:34
cada una de ellas. En primer lugar, bueno, en este caso, en los tres casos, si no recuerdo mal, 00:13:37
si efectivamente en los tres casos no hay ninguna instrucción condicional porque realmente lo que estamos es dibujando. 00:13:43
En el primer caso dibujamos en un lienzo de 400x400 y con el fondo, en este caso blanco, dibujamos que el ancho sea del contorno 00:13:49
que vamos a dibujar de 15, el color es exactamente el rojo y dibujamos el triángulo, es decir, que hemos definido primero 00:13:59
el ancho de la línea, el color de la línea y dibujamos ya sabiendo que el tamaño es 400x400 pues dibujamos exactamente en estas coordenadas 00:14:05
para exactamente decir los tres puntos de este triángulo. Y después para dibujar la parte interior pues lo que hacemos es dibujar en este caso 00:14:16
recordar en este caso 00:14:26
porque seguiría estando 00:14:28
con el mismo grosor de línea 00:14:30
pero bueno, lo volvemos a escribir 00:14:33
stroke width 15 00:14:34
es decir, estamos diciendo que va a ser 00:14:36
el mismo ancho que el contorno de aquí 00:14:38
en este caso 00:14:40
el color que vamos a poner 00:14:42
es el color negro 00:14:44
y la línea empieza en esta coordenada 00:14:46
que evidentemente está calculada 00:14:48
en función del lienzo 00:14:50
en el que está 00:14:52
en la posición 200-175 00:14:53
y baja hasta la posición 200, que ahora estamos en el mismo eje X, pero luego en el eje Y bajamos en más o menos 230. 00:14:56
Lo rellenamos en este caso de color negro y dibujamos una elipse que en realidad es una pequeña circunferencia 00:15:03
de color negro también con 200, 260, 10 y 10, es decir, esta posición más o menos del centro sería la elipse 00:15:10
y luego tendría 10 de radio en el eje X y en el eje Y, pero al final sale esto. 00:15:18
esta está más o menos si no recuerdo por aquí peligro esta sería efectivamente lo 00:15:26
ejecutamos y nos aparece pues es lo mismo de acuerdo 00:15:31
bueno 00:15:36
en la siguiente y ahora os propondré también un par de cosillas tenemos nos 00:15:39
encontramos con esta este emoticono bueno el emoticono fijaros que sencillo 00:15:45
es dibujarlo, el tamaño en este caso del diente es de 400x400, el fondo exterior va a ser blanco 00:15:52
y vamos a rellenar la cara de la siguiente manera, en color amarillo, por eso 255, 255, 0, 00:16:00
el ancho de la línea exterior va a ser de 7 y la circunferencia es una restricción elipse 00:16:06
y situamos la circunferencia en el centro, en este caso de 200x200 y luego ya nos movemos 00:16:15
300 píxeles en total de ancho y de alto. Por eso nos ocuparía más o menos el lienzo, 00:16:20
lo veremos más o menos por aquí. Después, para dibujar los ojos, lo rellenamos en color 00:16:27
negro y colocamos exactamente con estas coordenadas exactamente los centros aquí y aquí, que 00:16:34
están evidentemente elegidos en función del tamaño que tenemos de 400x400. Luego, 00:16:40
finalmente, para la boca, el relleno va a ser en color blanco y dibujamos un rectángulo 00:16:44
con el mismo contorno que teníamos hasta ahora de grueso, stroke width de 7, es decir que sigue siendo también 7 00:16:49
y luego por último las cejas, aquí ya utilizamos dos líneas y hay que evidentemente buscar los puntos inicial y final 00:16:59
de las rectas que forman las cejas, y entonces aquí tendríamos, si lo ejecutamos que estará por aquí 00:17:07
pues tendríamos en este caso 00:17:14
este dibujo que vemos aquí 00:17:16
que es el que hemos comentado antes 00:17:19
bueno, pues seguimos 00:17:21
y ya por último 00:17:24
pues tenemos un pequeño ejercicio interesante 00:17:26
que también es dibujar un logo 00:17:28
en este caso 00:17:30
en la instrucción Voice Setup 00:17:31
dibujamos en este caso 00:17:34
una ventana de 400x400 00:17:35
con fondo blanco 00:17:39
y al dibujar luego con Void Drop 00:17:40
pues dibujamos primero 00:17:42
establecemos el ancho que va a tener nuestro dibujo de contorno de línea con 00:17:43
este weight de 10 además el color va a ser el gris por lo tanto el stroke es 00:17:48
100 no rellenamos lo que vayamos a dibujar con nada porque como ya es el 00:17:54
fondo blanco ya no existe entonces con no film no vamos a rellenar nada y era 00:18:00
ya dibujamos las cuatro elipses sabiendo que tenemos una ventana de 400 por 400 00:18:03
con todas estas coordenadas evidentemente todos estos centros están 00:18:08
elegidos, evidentemente 00:18:11
pues sabiendo la ventana en la que estamos 00:18:12
finalmente, para poder 00:18:14
dibujar después ya el texto 00:18:16
tenemos que rellenar el texto en color rojo 00:18:18
por lo tanto la instrucción es fill 255 00:18:20
00 y el tamaño 00:18:23
la calculo evidentemente para la ventana 00:18:25
40 y con el texto entrecomillado 00:18:26
Audi en la posición, acuérdalo 00:18:28
que se coloca más o menos en 150 00:18:30
300 más o menos por aquí, ¿vale? para que luego 00:18:32
el texto aparezca aquí, y con esto 00:18:34
pues tendríamos estas instrucciones 00:18:36
básicas, ejemplos básicos 00:18:39
que como veis, pues en este 00:18:41
caso simplemente era para dibujar y 00:18:43
ahora lo que te plantea aquí, que lo que me interesa 00:18:45
es que tendrías que hacer 00:18:47
en este caso al programa 00:18:49
del emoticono anterior para que 00:18:51
al pulsar una tecla, en este caso 00:18:53
cierre los ojos, ¿vale? Pues sería un programa 00:18:55
yo creo muy interesante 00:18:57
para aplicar las estructuras 00:18:58
condicionales a un dibujo que ya tengas hecho 00:19:01
¿de acuerdo? Bueno, espero 00:19:03
que os sirva 00:19:05
de ayuda a esta pequeña clase 00:19:07
esta pequeña mini clase, básicamente 00:19:10
para que todo el mundo tenga claro 00:19:11
lo que tiene que saber 00:19:14
de cara a ese proyecto final 00:19:15
que ya os daré más instrucciones 00:19:18
¿de acuerdo? bueno, pues un saludo 00:19:20
y bueno, espero 00:19:22
veros pronto, hasta luego 00:19:24
y por cierto, se me olvidaba 00:19:25
si alguno se aburre 00:19:28
después de esto que hemos comentado 00:19:30
de las prácticas que tenéis que hacer 00:19:32
y este ejercicio final 00:19:33
os propongo un ejercicio un poquito más interesante 00:19:35
que a mí por lo menos me ha llevado más tiempo 00:19:39
que es que seáis capaces de dibujar 00:19:40
en este caso el famoso Yin y Yang 00:19:44
con estas circunferencias 00:19:46
y formando esta forma tan característica 00:19:50
os reto a que lo intentéis que puede ser muy interesante 00:19:52
hasta luego 00:19:55
Materias:
Tecnologías de la Información
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Educación Secundaria Obligatoria
    • Ordinaria
      • Primer Ciclo
        • Primer Curso
        • Segundo Curso
      • Segundo Ciclo
        • Tercer Curso
        • Cuarto Curso
        • Diversificacion Curricular 1
        • Diversificacion Curricular 2
  • Bachillerato
    • Primer Curso
    • Segundo Curso
Autor/es:
Rafael M
Subido por:
Rafael M.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
70
Fecha:
21 de marzo de 2020 - 21:55
Visibilidad:
Público
Centro:
IES GRAN CAPITAN
Duración:
20′
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
79.78 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid