1
00:00:01,280 --> 00:00:09,500
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.

2
00:00:09,980 --> 00:00:12,419
Pues la típica casita, el sol y la nube.

3
00:00:12,960 --> 00:00:24,980
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.

4
00:00:25,940 --> 00:00:34,579
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.

5
00:00:34,579 --> 00:00:46,479
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,

6
00:00:47,100 --> 00:00:53,880
y los colores que definen, o sea, la cantidad de rojo y la cantidad de verde que definen el color del sol.

7
00:00:54,840 --> 00:00:56,979
Luego estos serían variables para controlar la nube.

8
00:00:58,079 --> 00:01:04,040
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.

9
00:01:05,180 --> 00:01:12,180
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.

10
00:01:12,180 --> 00:01:20,340
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.

11
00:01:20,340 --> 00:01:36,579
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.

12
00:01:38,200 --> 00:01:42,579
Entonces de ahí he cogido este carácter extraño para definir el color del fondo.

13
00:01:43,219 --> 00:01:49,579
A continuación están las funciones que he separado para que me dibujen los elementos de una forma un poco más organizada.

14
00:01:50,340 --> 00:01:59,920
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.

15
00:02:00,640 --> 00:02:06,579
Todas las instrucciones que me sirven para dibujar la casa las he juntado y están incluidas entre esta llave y esta llave.

16
00:02:07,620 --> 00:02:16,680
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.

17
00:02:16,680 --> 00:02:24,439
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

18
00:02:24,439 --> 00:02:29,319
En la función sol se ejecutan estos bloques de código

19
00:02:29,319 --> 00:02:34,319
El primero de los bloques de código dibuja el círculo que es el centro del sol

20
00:02:34,319 --> 00:02:40,319
Y el segundo bloque de código dibuja una elipse alrededor sin relleno

21
00:02:40,319 --> 00:02:45,680
que es como ese otro aro que he dibujado, es el círculo interior y el círculo exterior,

22
00:02:45,819 --> 00:02:50,479
que es sin relleno, para dar esta sensación un poco más de que se parezca al sol.

23
00:02:51,120 --> 00:02:52,240
Círculos concéntricos.

24
00:02:52,719 --> 00:02:56,099
Si veis, para hacer círculos concéntricos, simplemente lo único que he tenido que hacer

25
00:02:56,099 --> 00:02:59,280
es poner el mismo centro a esta elipse y a esta elipse.

26
00:02:59,719 --> 00:03:03,979
Si les pongo las mismas variables para el centro, pues van a estar centradas.

27
00:03:04,979 --> 00:03:09,379
Y luego lo que he hecho es el radio del interior y el radio del exterior,

28
00:03:09,379 --> 00:03:11,240
poner el mismo y un poquito más

29
00:03:11,240 --> 00:03:12,900
para que me salga el sol

30
00:03:12,900 --> 00:03:15,460
el círculo un poquito más grande, el de alrededor

31
00:03:15,460 --> 00:03:17,240
vale, y luego

32
00:03:17,240 --> 00:03:19,259
he puesto aquí, que de momento están

33
00:03:19,259 --> 00:03:21,319
comentadas para que lo vierais que no se mueve

34
00:03:21,319 --> 00:03:23,199
como quiero que se mueva el sol

35
00:03:23,199 --> 00:03:25,319
entonces voy a poner que el centro

36
00:03:25,319 --> 00:03:26,560
del sol se mueva un poquito

37
00:03:26,560 --> 00:03:29,180
hacia la derecha, entonces

38
00:03:29,180 --> 00:03:30,659
incremento la posición X

39
00:03:30,659 --> 00:03:33,360
perdón, bueno, resto un poquito la posición

40
00:03:33,360 --> 00:03:34,620
en X para que se mueva hacia

41
00:03:34,620 --> 00:03:36,699
la izquierda

42
00:03:36,699 --> 00:03:39,860
luego voy a hacer que el sol baje

43
00:03:39,860 --> 00:03:43,060
para eso la posición en Y voy a ir sumándole de 10 en 10

44
00:03:43,060 --> 00:03:45,939
esto podéis cambiar los números según como queráis que se mueva

45
00:03:45,939 --> 00:03:51,039
también voy a hacer que el sol se vaya haciendo cada vez un poquito más grande

46
00:03:51,039 --> 00:03:51,939
según va bajando

47
00:03:51,939 --> 00:03:53,879
entonces le voy a sumar 2 al radio

48
00:03:53,879 --> 00:03:56,620
como el radio afecta a los dos círculos

49
00:03:56,620 --> 00:04:00,139
pues los dos círculos van a ir creciendo en la misma proporción

50
00:04:00,139 --> 00:04:03,599
y por último le voy a quitar cantidad de verde

51
00:04:03,599 --> 00:04:05,879
y si quito cantidad de verde

52
00:04:05,879 --> 00:04:12,759
el color inicial, que era una especie de amarillo, se va a ir convirtiendo cada vez más en rojo.

53
00:04:13,319 --> 00:04:15,620
El amarillo es poner a tope el rojo y el verde.

54
00:04:16,079 --> 00:04:18,620
Si le voy quitando verde, se va a ir pasando a rojo.

55
00:04:19,620 --> 00:04:24,279
Vamos a ver cómo modifica estas líneas que he descomentado en la ejecución del programa.

56
00:04:25,660 --> 00:04:30,300
El sol va bajando, se va desplazando un poquito hacia la izquierda y se va poniendo cada vez más rojo.

57
00:04:30,600 --> 00:04:31,540
Mirad lo que me ha pasado.

58
00:04:32,319 --> 00:04:33,100
¿Veis lo que ha pasado?

59
00:04:33,100 --> 00:04:34,660
ha pasado por encima de la casa

60
00:04:34,660 --> 00:04:37,399
en vez de poner el sol por detrás de la casa

61
00:04:37,399 --> 00:04:40,120
se ha puesto el sol por delante de la casa

62
00:04:40,120 --> 00:04:43,399
eso es muy fácil de solucionar

63
00:04:43,399 --> 00:04:46,699
y eso es debido al orden que tienen aquí las funciones

64
00:04:46,699 --> 00:04:49,800
si primero me dibuja la casa y luego me dibuja el sol

65
00:04:49,800 --> 00:04:51,560
el sol va a quedar por encima de la casa

66
00:04:51,560 --> 00:04:54,939
si quiero que el sol quede por detrás de la casa lo tengo que dibujar antes

67
00:04:54,939 --> 00:04:58,319
entonces ahora es mucho más fácil porque simplemente tengo que quitar esta línea de aquí

68
00:04:58,319 --> 00:05:01,579
y ponerla delante de la casa

69
00:05:01,579 --> 00:05:04,699
para que primero dibuje el sol y luego encima dibuje la casa.

70
00:05:05,459 --> 00:05:09,600
De esta manera el sol se va a dibujar por detrás de la casa y por detrás del césped

71
00:05:09,600 --> 00:05:12,660
porque antes ya estaba detrás del césped.

72
00:05:14,180 --> 00:05:21,139
También he añadido unas nubes para completar un poco el dibujo.

73
00:05:22,040 --> 00:05:26,699
El césped es simplemente un rectángulo verde que está ahí en la parte inferior.

74
00:05:26,699 --> 00:05:45,040
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.

75
00:05:45,040 --> 00:05:57,019
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.

76
00:05:57,420 --> 00:06:01,519
Si quisiera poner transparencia en un relleno con otros números, añadiría otro número más.

77
00:06:03,139 --> 00:06:08,459
Sin borde, que es la función no stroke, y luego dibujan las cuatro elipses.

78
00:06:08,459 --> 00:06:10,379
como veis la posición de las nubes

79
00:06:10,379 --> 00:06:12,600
están relacionadas entre sí

80
00:06:12,600 --> 00:06:14,360
o sea una está un poquito más a la derecha

81
00:06:14,360 --> 00:06:15,860
un poquito más arriba, un poquito más abajo

82
00:06:15,860 --> 00:06:18,620
pero todas están relacionadas

83
00:06:18,620 --> 00:06:20,420
y al modificarlas se van a mover

84
00:06:20,420 --> 00:06:21,160
todas a la vez

85
00:06:21,160 --> 00:06:24,990
se mueven ahí despacito

86
00:06:24,990 --> 00:06:27,769
podría hacer que las nubes se pusieran un poco más oscuras

87
00:06:27,769 --> 00:06:29,050
que cambiara el color del fondo

88
00:06:29,050 --> 00:06:31,709
añadiendo variables y modificando

89
00:06:31,709 --> 00:06:33,550
esas variables se pueden conseguir cosas

90
00:06:33,550 --> 00:06:34,889
muy chulas

91
00:06:34,889 --> 00:06:37,990
pues nada, ánimo con vuestro reto de la práctica 3