Saltar navegación

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

Moviendo objetos complejos 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.

816 visualizaciones

Ayuda para el reto de la práctica 3 de Processing

Más información Transcripción

Descargar la transcripción

Bueno, os voy a contar cómo podéis hacer el reto de la práctica 3, que es hacer que se muevan elementos un poquito más complejos que simples figuras geométricas. 00:00:01
Pues la típica casita, el sol y la nube. 00:00:09
En este caso vamos a hacer que se mueva el sol, que está formado por dos círculos concéntricos, y también que se mueva una nube, que ahora mismo está oculta y no se dibuja, pero ahora os cuento cómo se hace. 00:00:12
Bueno, lo primero es que he hecho una lista de variables con los elementos que quiero mover o que quiero que me cambien a lo largo de la ejecución del programa. 00:00:25
Por ejemplo, los valores que van a definir el sol, su posición en x, su posición en y, que le he puesto aquí los valores iniciales, el radio, el tamaño del sol, que también le he puesto su valor inicial, 00:00:34
y los colores que definen, o sea, la cantidad de rojo y la cantidad de verde que definen el color del sol. 00:00:47
Luego estos serían variables para controlar la nube. 00:00:54
A continuación he puesto la variable setup que ya sabéis que solo se ejecuta una vez y ahí simplemente he puesto el tamaño de la pantalla. 00:00:58
Y luego la función draw en la que he ido poniendo instrucciones que van a hacer que se dibujen cada uno de los elementos. 00:01:05
Pues la primera que he puesto es el fondo en la que he elegido con el selector de colores que tiene el propio programa de processing un color así azulito para el fondo. 00:01:12
Se puede poner en código RGB, como hemos estado haciendo hasta ahora, cantidad de rojo, cantidad de verde, cantidad de azul, o podemos copiar directamente el código en hexadecimal, que por eso lleva el símbolo este del hashtag delante, porque es otra forma de definir colores, otro código que se utiliza para definir colores. 00:01:20
Entonces de ahí he cogido este carácter extraño para definir el color del fondo. 00:01:38
A continuación están las funciones que he separado para que me dibujen los elementos de una forma un poco más organizada. 00:01:43
Entonces cuando el control del programa llega a esta línea, la línea 17, lo que hace es que manda el control a la función casa y la función casa la tengo definida por aquí debajo. 00:01:50
Todas las instrucciones que me sirven para dibujar la casa las he juntado y están incluidas entre esta llave y esta llave. 00:02:00
La casa como veis no tiene variables, por tanto no se va a mover y simplemente son rectángulos y líneas que van a dibujar el objeto que yo he llamado casa. 00:02:07
Una vez que llega aquí al final de la función casa devuelve el control a la siguiente línea que sería la función sol 00:02:16
En la función sol se ejecutan estos bloques de código 00:02:24
El primero de los bloques de código dibuja el círculo que es el centro del sol 00:02:29
Y el segundo bloque de código dibuja una elipse alrededor sin relleno 00:02:34
que es como ese otro aro que he dibujado, es el círculo interior y el círculo exterior, 00:02:40
que es sin relleno, para dar esta sensación un poco más de que se parezca al sol. 00:02:45
Círculos concéntricos. 00:02:51
Si veis, para hacer círculos concéntricos, simplemente lo único que he tenido que hacer 00:02:52
es poner el mismo centro a esta elipse y a esta elipse. 00:02:56
Si les pongo las mismas variables para el centro, pues van a estar centradas. 00:02:59
Y luego lo que he hecho es el radio del interior y el radio del exterior, 00:03:04
poner el mismo y un poquito más 00:03:09
para que me salga el sol 00:03:11
el círculo un poquito más grande, el de alrededor 00:03:12
vale, y luego 00:03:15
he puesto aquí, que de momento están 00:03:17
comentadas para que lo vierais que no se mueve 00:03:19
como quiero que se mueva el sol 00:03:21
entonces voy a poner que el centro 00:03:23
del sol se mueva un poquito 00:03:25
hacia la derecha, entonces 00:03:26
incremento la posición X 00:03:29
perdón, bueno, resto un poquito la posición 00:03:30
en X para que se mueva hacia 00:03:33
la izquierda 00:03:34
luego voy a hacer que el sol baje 00:03:36
para eso la posición en Y voy a ir sumándole de 10 en 10 00:03:39
esto podéis cambiar los números según como queráis que se mueva 00:03:43
también voy a hacer que el sol se vaya haciendo cada vez un poquito más grande 00:03:45
según va bajando 00:03:51
entonces le voy a sumar 2 al radio 00:03:51
como el radio afecta a los dos círculos 00:03:53
pues los dos círculos van a ir creciendo en la misma proporción 00:03:56
y por último le voy a quitar cantidad de verde 00:04:00
y si quito cantidad de verde 00:04:03
el color inicial, que era una especie de amarillo, se va a ir convirtiendo cada vez más en rojo. 00:04:05
El amarillo es poner a tope el rojo y el verde. 00:04:13
Si le voy quitando verde, se va a ir pasando a rojo. 00:04:16
Vamos a ver cómo modifica estas líneas que he descomentado en la ejecución del programa. 00:04:19
El sol va bajando, se va desplazando un poquito hacia la izquierda y se va poniendo cada vez más rojo. 00:04:25
Mirad lo que me ha pasado. 00:04:30
¿Veis lo que ha pasado? 00:04:32
ha pasado por encima de la casa 00:04:33
en vez de poner el sol por detrás de la casa 00:04:34
se ha puesto el sol por delante de la casa 00:04:37
eso es muy fácil de solucionar 00:04:40
y eso es debido al orden que tienen aquí las funciones 00:04:43
si primero me dibuja la casa y luego me dibuja el sol 00:04:46
el sol va a quedar por encima de la casa 00:04:49
si quiero que el sol quede por detrás de la casa lo tengo que dibujar antes 00:04:51
entonces ahora es mucho más fácil porque simplemente tengo que quitar esta línea de aquí 00:04:54
y ponerla delante de la casa 00:04:58
para que primero dibuje el sol y luego encima dibuje la casa. 00:05:01
De esta manera el sol se va a dibujar por detrás de la casa y por detrás del césped 00:05:05
porque antes ya estaba detrás del césped. 00:05:09
También he añadido unas nubes para completar un poco el dibujo. 00:05:14
El césped es simplemente un rectángulo verde que está ahí en la parte inferior. 00:05:22
Ah, no, es una línea, es una línea gorda, una línea de grosor bastante grande, de 40, y las nubes que están formadas por cuatro elipses, ¿vale? Las elipses, he puesto en la instrucción elipse modo center para que me las centre, para que las dibuje a partir del centro. 00:05:26
He cogido un relleno un poquito transparente, ese es el segundo número que se pone cuando el relleno es simplemente una escala de grises. 00:05:45
Si quisiera poner transparencia en un relleno con otros números, añadiría otro número más. 00:05:57
Sin borde, que es la función no stroke, y luego dibujan las cuatro elipses. 00:06:03
como veis la posición de las nubes 00:06:08
están relacionadas entre sí 00:06:10
o sea una está un poquito más a la derecha 00:06:12
un poquito más arriba, un poquito más abajo 00:06:14
pero todas están relacionadas 00:06:15
y al modificarlas se van a mover 00:06:18
todas a la vez 00:06:20
se mueven ahí despacito 00:06:21
podría hacer que las nubes se pusieran un poco más oscuras 00:06:24
que cambiara el color del fondo 00:06:27
añadiendo variables y modificando 00:06:29
esas variables se pueden conseguir cosas 00:06:31
muy chulas 00:06:33
pues nada, ánimo con vuestro reto de la práctica 3 00:06:34
Subido por:
Inmaculada M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
816
Fecha:
23 de enero de 2022 - 12:12
Visibilidad:
Público
Centro:
IES PROFESOR JULIO PÉREZ
Duración:
06′ 40″
Relación de aspecto:
1.05:1
Resolución:
774x738 píxeles
Tamaño:
12.43 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid