Saltar navegación

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

Moviendo objetos en 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 23 de enero de 2022 por Inmaculada M.

859 visualizaciones

Ayuda para la práctica 3, mover objetos simples en processing

Más información Transcripción

Descargar la transcripción

Bueno, aquí tenemos un programa de processing similar a los que hemos visto hasta ahora, con instrucciones que ya debemos conocer. 00:00:00
Por ejemplo, la instrucción size, que lo que nos hace es crear una ventana, en este caso de 500x500 píxeles cuadrada. 00:00:08
La función background, que con un código de tres colores nos va a definir el color del fondo, en este caso es un color azul, porque hemos puesto el canal azul a 100. 00:00:15
la función fill que lo que hace es definir el color de relleno de las figuras que haya a continuación 00:00:24
en este caso vamos a elegir un color de relleno rojo 00:00:29
la función stroke weight que lo que hace es definir el tamaño de la línea o de los bordes de las figuras 00:00:32
en este caso hemos cogido un tamaño de línea de 5 píxeles 00:00:39
la función stroke que lo que hace es definir el color de la línea o de los bordes de las figuras 00:00:43
en este caso es un color verde porque tenemos el canal verde que es el segundo número a tope 00:00:48
y a continuación he puesto dos instrucciones 00:00:53
que ya también conocemos 00:00:56
de cómo dibujar un rectángulo 00:00:57
en este caso sería un rectángulo 00:00:59
que va a estar su esquina superior izquierda 00:01:01
en el punto 10, 50 00:01:04
más o menos cerca de la esquina superior izquierda 00:01:05
mientras no cambiemos el modo de dibujar los rectángulos 00:01:09
la referencia la va a tener ahí 00:01:13
en la esquina superior izquierda 00:01:15
y luego el tamaño de 100 por 50 00:01:16
100 en horizontal, 50 en vertical 00:01:19
y después una elipse 00:01:20
cuyas dos primeras coordenadas van a definir el centro, que justo va a coincidir con el centro de la pantalla en este caso, 00:01:23
y las dos siguientes, el radio en horizontal y el vertical. 00:01:29
Como he puesto el mismo número, pues será un círculo. 00:01:32
Esto ya lo controlamos más o menos, nos dibuja ese cuadrado con la esquina superior izquierda en el punto 10, 50, 00:01:36
tamaño 100, en horizontal y 50 en vertical. 00:01:42
Y la elipse, como hemos dicho, con el centro en 250, 250 y de tamaño 100%. 00:01:45
Bien, vale, ahora vamos a ver cómo hacemos que estos dos elementos se muevan. 00:01:51
Para hacer que estos elementos se muevan vamos a incorporar a nuestros programas dos funciones. 00:01:56
La primera de las funciones que hay que poner es la función setup, vale, se le pone delante la palabra reservada void, 00:02:02
que quiere decir que no va a devolver ningún valor, tampoco hace falta entender mucho más. 00:02:09
Y una función es un conjunto de instrucciones que se van a ejecutar cada vez que yo llamo a esa función, 00:02:14
o que la llama la ejecución del programa. 00:02:20
Entonces la función setup solo se va a ejecutar una vez en el programa 00:02:23
y en este caso nos va a hacer las instrucciones de dibujar la pantalla y poner el fondo. 00:02:28
A continuación vamos a poner otra función que es la función que hace que se dibujen las cosas de forma dinámica 00:02:34
que es la función drawDibuja y que nos va a dibujar, primero nos va a elegir los colores 00:02:41
y luego nos va a dibujar las figuras, va a terminar en esta otra llave, vale, las funciones siempre empiezan y terminan en una llave 00:02:47
y es conveniente, aunque no imprescindible, que indexemos, que metamos hacia adentro las líneas para que nosotros veamos más claro 00:02:53
de dónde a dónde van las instrucciones de cada una de las funciones, vale, hasta ahora no he cambiado nada y si lo doy a ejecutar vamos a ver lo mismo que antes 00:03:02
aunque en realidad lo que está ocurriendo es que este dibujo se está haciendo continuamente, vale, se está redibujando 00:03:10
Lo que pasa es que se está redibujando tan rápido que nosotros no somos capaces de apreciarlo. 00:03:16
Vamos a ver ahora cómo podemos hacer que alguno de estos elementos se mueva por la pantalla. 00:03:23
Vamos a hacer primero que el rectángulo se mueva, por ejemplo, hacia la derecha. 00:03:28
Entonces lo primero que vamos a hacer es declarar una variable. 00:03:33
Una variable es como reservar un sitio en la memoria al que hay que poner un nombre. 00:03:35
Le voy a poner posición del rectángulo X. 00:03:40
El nombre da lo mismo el que pongamos, pero es conveniente que sea uno que nos permita interpretar lo que vamos a hacer. 00:03:44
Entonces, como voy a modificar la posición x del rectángulo, le voy a llamar posición del rectángulo x o algo parecido. 00:03:51
El valor inicial de ese número en el programa que teníamos era un 10, así que le voy a poner aquí como valor inicial 10. 00:03:58
Y lo que voy a hacer es que en la ejecución del programa, este 10 de aquí, en vez de poner el 10, voy a poner el nombre de la variable. 00:04:05
vale, posición de rectángulo 00:04:13
en x 00:04:15
el nombre que le he asignado a la variable 00:04:16
todavía no he ejecutado nada 00:04:18
y lo único que he hecho es cambiar 00:04:20
ese 10 lo he llamado posición de rectángulo 00:04:22
y lo he puesto aquí, o sea que este valor sigue siendo 10 00:04:24
pero ahora lo que voy a hacer 00:04:27
es que cada vez que se ejecute el programa 00:04:29
la posición del rectángulo 00:04:30
la voy a incrementar 00:04:33
no sé, por ejemplo 00:04:36
50 píxeles 00:04:38
hay que volver a poner el nombre 00:04:39
esta instrucción que estoy escribiendo 00:04:43
quiere decir que la posición del rectángulo 00:04:45
va a ser igual a la posición del rectángulo 00:04:46
que tenía antes 00:04:49
más el número que ponga a continuación 00:04:50
es lo que se va a incrementar el valor 00:04:52
o sea lo que se va a mover hacia la derecha 00:04:54
hemos dicho 50 píxeles, pues 50 00:04:56
vale 00:04:58
si le doy ahora al play 00:05:00
mirad lo que va a pasar 00:05:02
y es que se va a dibujar tan rápido 00:05:03
casi que no hemos dado tiempo a verlo 00:05:06
Entonces hay una instrucción que nos va a venir muy bien en este caso, que es la instrucción delay, que podemos poner aquí un número, son milisegundos, por ejemplo si pongo mil sería un segundo, 00:05:07
y lo que va a hacer es ralentizar la ejecución del programa para que nosotros podamos verlo. 00:05:19
Ahora cada segundo el cuadrado se va a mover 50 píxeles hacia la derecha, porque esta variable 10 va a ser 60, 110, sumándole 50 cada vez. 00:05:26
Vale, es conveniente lo que dijimos el otro día de poner comentarios para irnos aclarando de lo que hace cada instrucción. 00:05:36
Vale, vamos a hacer ahora, como estoy separando las líneas también para que se vea más claro, 00:05:52
¿cómo haríamos que la elipse, por ejemplo, se moviera hacia arriba? 00:05:56
Pues tengo que declarar, perdón, tengo que declarar una variable que me sirva para, en este caso sería la posición y, y elipse, por ejemplo, voy a poner, o y círculo, para que veáis que se puede poner cualquier palabra. 00:05:59
Y inicialmente era 250, así que voy a poner 250 como su valor inicial, ¿vale? 00:06:19
Si le doy ahora, vamos a probar también que si este número lo reduzco, se va a mover más deprisa al cuadrado y la elipse de momento no se va a mover, ¿vale? 00:06:27
Porque no he variado la coordenada, solamente le he cambiado el nombre. 00:06:35
Entonces tendría que poner aquí y círculo y después tengo que pensar, a ver, si quiero que se mueva hacia arriba, como hemos dicho, la y del círculo anterior va a ser, o sea, la y del círculo nueva va a ser igual que la y del círculo anterior, pero ahora tengo que restar porque quiero que se mueva hacia arriba. 00:06:39
Como las is se incrementan hacia abajo, por ejemplo voy a poner 25 píxeles, ¿vale? Si resto, las is van a ir disminuyendo y lo que va a hacer es ir, en este caso, subiendo hacia arriba el círculo, ¿vale? 00:07:00
si quisiera 00:07:17
que también pueda hacer por ejemplo 00:07:22
en lugar de que se 00:07:23
voy a comentarla para que no ocurra 00:07:25
para que no se ejecute esa función 00:07:27
si le pongo un comentario delante 00:07:29
el programa no le va a hacer caso 00:07:30
si quisiera incrementar el tamaño del círculo 00:07:32
¿vale? por ejemplo 00:07:35
voy a poner otra variable 00:07:36
que sea el radio del círculo 00:07:38
que inicialmente era 100 00:07:40
como lo había definido yo 00:07:42
al principio 00:07:44
Y ahora aquí, en vez de estos 100, voy a poner la variable radio. 00:07:45
¿Qué creéis que va a pasar ahora? 00:07:56
Me dice que he puesto esto mal. 00:08:02
Pues no va a pasar nada porque no he variado el radio. 00:08:05
Entonces sigue dibujando lo mismo de antes. 00:08:09
Si quiero que crezca cada vez que el círculo se dibuje, lo que tengo que hacer... 00:08:12
Esta línea en realidad la puedo poner en cualquier sitio. 00:08:19
Lo que pasa es que conviene ponerla al lado de lo que voy a modificar para que me sea más fácil interpretar el programa a mí. 00:08:23
El radio lo voy a incrementar en 10 píxeles cada vez que se dibuja. 00:08:30
Y ahora vamos a ver cómo el círculo se va a dibujar cada vez un poquito más grande. 00:08:36
Vamos a ver cómo el círculo crece. 00:08:42
Y sigue creciendo hasta el infinito. 00:08:45
Aunque se salga de la pantalla, el programa se sigue ejecutando. 00:08:47
Y esto se sigue haciendo cada vez más grande, aunque no podamos verlo. 00:08:50
Otra cosa que también nos va a venir bien es qué pasa si queremos hacer que se mueva, 00:08:56
pero que no nos quede el dibujo del rectángulo anterior. 00:09:01
Aquí, por ejemplo, en un lado del círculo vemos cada uno de los rectángulos que nos ha ido dibujando. 00:09:03
Y esto no nos da sensación de movimiento, lo que nos da es sensación de que se han dibujado muchos rectángulos, 00:09:10
que es lo que en realidad ocurre. 00:09:16
Pero mirad lo que pasa si yo el fondo lo corto de aquí y lo meto dentro de esta función. 00:09:18
Lo meto hacia adentro y lo coloco, aunque ya digo que esto da igual para el programa. 00:09:26
Ahora, cada vez que se dibuje un rectángulo y lo incremente, se va a volver a dibujar el fondo. 00:09:32
Entonces se va a limpiar lo que ya había y la sensación de movimiento va a ser mayor. 00:09:37
El rectángulo se dibuja, pero también se dibuja de nuevo el fondo. 00:09:41
Vale, entonces parece que el rectángulo se mueve aunque en realidad son rectángulos distintos que se están dibujando 00:09:45
Vale, yo creo que con esto ya tenéis suficiente para poder hacer que vuestras figuras se muevan 00:09:51
Subido por:
Inmaculada M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
859
Fecha:
23 de enero de 2022 - 12:10
Visibilidad:
Público
Centro:
IES PROFESOR JULIO PÉREZ
Duración:
09′ 59″
Relación de aspecto:
0.98:1
Resolución:
714x726 píxeles
Tamaño:
15.34 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid