1
00:00:00,690 --> 00:00:07,950
Bueno, aquí tenemos un programa de processing similar a los que hemos visto hasta ahora, con instrucciones que ya debemos conocer.

2
00:00:08,470 --> 00:00:14,689
Por ejemplo, la instrucción size, que lo que nos hace es crear una ventana, en este caso de 500x500 píxeles cuadrada.

3
00:00:15,330 --> 00:00:24,390
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.

4
00:00:24,390 --> 00:00:29,829
la función fill que lo que hace es definir el color de relleno de las figuras que haya a continuación

5
00:00:29,829 --> 00:00:32,450
en este caso vamos a elegir un color de relleno rojo

6
00:00:32,450 --> 00:00:39,490
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

7
00:00:39,490 --> 00:00:43,109
en este caso hemos cogido un tamaño de línea de 5 píxeles

8
00:00:43,109 --> 00:00:48,770
la función stroke que lo que hace es definir el color de la línea o de los bordes de las figuras

9
00:00:48,770 --> 00:00:53,750
en este caso es un color verde porque tenemos el canal verde que es el segundo número a tope

10
00:00:53,750 --> 00:00:56,630
y a continuación he puesto dos instrucciones

11
00:00:56,630 --> 00:00:57,789
que ya también conocemos

12
00:00:57,789 --> 00:00:59,710
de cómo dibujar un rectángulo

13
00:00:59,710 --> 00:01:01,710
en este caso sería un rectángulo

14
00:01:01,710 --> 00:01:04,109
que va a estar su esquina superior izquierda

15
00:01:04,109 --> 00:01:05,569
en el punto 10, 50

16
00:01:05,569 --> 00:01:09,150
más o menos cerca de la esquina superior izquierda

17
00:01:09,150 --> 00:01:13,349
mientras no cambiemos el modo de dibujar los rectángulos

18
00:01:13,349 --> 00:01:15,430
la referencia la va a tener ahí

19
00:01:15,430 --> 00:01:16,689
en la esquina superior izquierda

20
00:01:16,689 --> 00:01:19,150
y luego el tamaño de 100 por 50

21
00:01:19,150 --> 00:01:20,969
100 en horizontal, 50 en vertical

22
00:01:20,969 --> 00:01:23,030
y después una elipse

23
00:01:23,030 --> 00:01:28,930
cuyas dos primeras coordenadas van a definir el centro, que justo va a coincidir con el centro de la pantalla en este caso,

24
00:01:29,609 --> 00:01:32,590
y las dos siguientes, el radio en horizontal y el vertical.

25
00:01:32,969 --> 00:01:34,989
Como he puesto el mismo número, pues será un círculo.

26
00:01:36,530 --> 00:01:41,950
Esto ya lo controlamos más o menos, nos dibuja ese cuadrado con la esquina superior izquierda en el punto 10, 50,

27
00:01:42,709 --> 00:01:45,689
tamaño 100, en horizontal y 50 en vertical.

28
00:01:45,689 --> 00:01:51,689
Y la elipse, como hemos dicho, con el centro en 250, 250 y de tamaño 100%.

29
00:01:51,689 --> 00:01:55,829
Bien, vale, ahora vamos a ver cómo hacemos que estos dos elementos se muevan.

30
00:01:56,790 --> 00:02:02,069
Para hacer que estos elementos se muevan vamos a incorporar a nuestros programas dos funciones.

31
00:02:02,890 --> 00:02:09,069
La primera de las funciones que hay que poner es la función setup, vale, se le pone delante la palabra reservada void,

32
00:02:09,069 --> 00:02:13,870
que quiere decir que no va a devolver ningún valor, tampoco hace falta entender mucho más.

33
00:02:14,550 --> 00:02:20,189
Y una función es un conjunto de instrucciones que se van a ejecutar cada vez que yo llamo a esa función,

34
00:02:20,189 --> 00:02:23,009
o que la llama la ejecución del programa.

35
00:02:23,689 --> 00:02:28,009
Entonces la función setup solo se va a ejecutar una vez en el programa

36
00:02:28,009 --> 00:02:32,689
y en este caso nos va a hacer las instrucciones de dibujar la pantalla y poner el fondo.

37
00:02:34,069 --> 00:02:41,150
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

38
00:02:41,150 --> 00:02:47,650
que es la función drawDibuja y que nos va a dibujar, primero nos va a elegir los colores

39
00:02:47,650 --> 00:02:53,490
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

40
00:02:53,490 --> 00:03:02,030
y es conveniente, aunque no imprescindible, que indexemos, que metamos hacia adentro las líneas para que nosotros veamos más claro

41
00:03:02,030 --> 00:03:10,490
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

42
00:03:10,490 --> 00:03:16,990
aunque en realidad lo que está ocurriendo es que este dibujo se está haciendo continuamente, vale, se está redibujando

43
00:03:16,990 --> 00:03:22,449
Lo que pasa es que se está redibujando tan rápido que nosotros no somos capaces de apreciarlo.

44
00:03:23,969 --> 00:03:27,810
Vamos a ver ahora cómo podemos hacer que alguno de estos elementos se mueva por la pantalla.

45
00:03:28,750 --> 00:03:32,409
Vamos a hacer primero que el rectángulo se mueva, por ejemplo, hacia la derecha.

46
00:03:33,050 --> 00:03:35,310
Entonces lo primero que vamos a hacer es declarar una variable.

47
00:03:35,530 --> 00:03:39,569
Una variable es como reservar un sitio en la memoria al que hay que poner un nombre.

48
00:03:40,389 --> 00:03:44,389
Le voy a poner posición del rectángulo X.

49
00:03:44,389 --> 00:03:50,610
El nombre da lo mismo el que pongamos, pero es conveniente que sea uno que nos permita interpretar lo que vamos a hacer.

50
00:03:51,069 --> 00:03:58,069
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.

51
00:03:58,629 --> 00:04:04,289
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.

52
00:04:05,189 --> 00:04:13,150
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.

53
00:04:13,150 --> 00:04:15,250
vale, posición de rectángulo

54
00:04:15,250 --> 00:04:16,509
en x

55
00:04:16,509 --> 00:04:18,649
el nombre que le he asignado a la variable

56
00:04:18,649 --> 00:04:20,709
todavía no he ejecutado nada

57
00:04:20,709 --> 00:04:22,410
y lo único que he hecho es cambiar

58
00:04:22,410 --> 00:04:24,709
ese 10 lo he llamado posición de rectángulo

59
00:04:24,709 --> 00:04:27,129
y lo he puesto aquí, o sea que este valor sigue siendo 10

60
00:04:27,129 --> 00:04:29,129
pero ahora lo que voy a hacer

61
00:04:29,129 --> 00:04:30,730
es que cada vez que se ejecute el programa

62
00:04:30,730 --> 00:04:33,189
la posición del rectángulo

63
00:04:33,189 --> 00:04:34,949
la voy a incrementar

64
00:04:34,949 --> 00:04:36,670
en

65
00:04:36,670 --> 00:04:38,490
no sé, por ejemplo

66
00:04:38,490 --> 00:04:39,629
50 píxeles

67
00:04:39,629 --> 00:04:43,290
hay que volver a poner el nombre

68
00:04:43,290 --> 00:04:45,009
esta instrucción que estoy escribiendo

69
00:04:45,009 --> 00:04:46,949
quiere decir que la posición del rectángulo

70
00:04:46,949 --> 00:04:49,470
va a ser igual a la posición del rectángulo

71
00:04:49,470 --> 00:04:50,329
que tenía antes

72
00:04:50,329 --> 00:04:52,810
más el número que ponga a continuación

73
00:04:52,810 --> 00:04:54,410
es lo que se va a incrementar el valor

74
00:04:54,410 --> 00:04:56,250
o sea lo que se va a mover hacia la derecha

75
00:04:56,250 --> 00:04:58,410
hemos dicho 50 píxeles, pues 50

76
00:04:58,410 --> 00:05:00,310
vale

77
00:05:00,310 --> 00:05:02,209
si le doy ahora al play

78
00:05:02,209 --> 00:05:03,990
mirad lo que va a pasar

79
00:05:03,990 --> 00:05:06,110
y es que se va a dibujar tan rápido

80
00:05:06,110 --> 00:05:07,810
casi que no hemos dado tiempo a verlo

81
00:05:07,810 --> 00:05:19,470
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,

82
00:05:19,470 --> 00:05:23,470
y lo que va a hacer es ralentizar la ejecución del programa para que nosotros podamos verlo.

83
00:05:26,319 --> 00:05:36,339
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.

84
00:05:36,339 --> 00:05:50,930
Vale, es conveniente lo que dijimos el otro día de poner comentarios para irnos aclarando de lo que hace cada instrucción.

85
00:05:52,029 --> 00:05:55,750
Vale, vamos a hacer ahora, como estoy separando las líneas también para que se vea más claro,

86
00:05:56,470 --> 00:05:59,370
¿cómo haríamos que la elipse, por ejemplo, se moviera hacia arriba?

87
00:05:59,370 --> 00:06:19,089
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.

88
00:06:19,089 --> 00:06:27,189
Y inicialmente era 250, así que voy a poner 250 como su valor inicial, ¿vale?

89
00:06:27,230 --> 00:06:35,689
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?

90
00:06:35,730 --> 00:06:39,170
Porque no he variado la coordenada, solamente le he cambiado el nombre.

91
00:06:39,170 --> 00:07:00,970
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.

92
00:07:00,970 --> 00:07:17,139
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?

93
00:07:17,139 --> 00:07:22,279
si quisiera

94
00:07:22,279 --> 00:07:23,779
que también pueda hacer por ejemplo

95
00:07:23,779 --> 00:07:25,139
en lugar de que se

96
00:07:25,139 --> 00:07:27,560
voy a comentarla para que no ocurra

97
00:07:27,560 --> 00:07:29,379
para que no se ejecute esa función

98
00:07:29,379 --> 00:07:30,720
si le pongo un comentario delante

99
00:07:30,720 --> 00:07:32,319
el programa no le va a hacer caso

100
00:07:32,319 --> 00:07:35,220
si quisiera incrementar el tamaño del círculo

101
00:07:35,220 --> 00:07:36,319
¿vale? por ejemplo

102
00:07:36,319 --> 00:07:38,480
voy a poner otra variable

103
00:07:38,480 --> 00:07:40,399
que sea el radio del círculo

104
00:07:40,399 --> 00:07:42,620
que inicialmente era 100

105
00:07:42,620 --> 00:07:44,639
como lo había definido yo

106
00:07:44,639 --> 00:07:45,699
al principio

107
00:07:45,699 --> 00:07:50,800
Y ahora aquí, en vez de estos 100, voy a poner la variable radio.

108
00:07:56,629 --> 00:07:57,889
¿Qué creéis que va a pasar ahora?

109
00:08:02,000 --> 00:08:03,500
Me dice que he puesto esto mal.

110
00:08:05,959 --> 00:08:08,500
Pues no va a pasar nada porque no he variado el radio.

111
00:08:09,800 --> 00:08:11,720
Entonces sigue dibujando lo mismo de antes.

112
00:08:12,259 --> 00:08:19,810
Si quiero que crezca cada vez que el círculo se dibuje, lo que tengo que hacer...

113
00:08:19,810 --> 00:08:23,209
Esta línea en realidad la puedo poner en cualquier sitio.

114
00:08:23,209 --> 00:08:29,649
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í.

115
00:08:30,209 --> 00:08:35,850
El radio lo voy a incrementar en 10 píxeles cada vez que se dibuja.

116
00:08:36,929 --> 00:08:40,990
Y ahora vamos a ver cómo el círculo se va a dibujar cada vez un poquito más grande.

117
00:08:42,710 --> 00:08:44,549
Vamos a ver cómo el círculo crece.

118
00:08:45,730 --> 00:08:47,289
Y sigue creciendo hasta el infinito.

119
00:08:47,289 --> 00:08:50,669
Aunque se salga de la pantalla, el programa se sigue ejecutando.

120
00:08:50,669 --> 00:08:53,889
Y esto se sigue haciendo cada vez más grande, aunque no podamos verlo.

121
00:08:56,610 --> 00:09:01,009
Otra cosa que también nos va a venir bien es qué pasa si queremos hacer que se mueva,

122
00:09:01,269 --> 00:09:03,549
pero que no nos quede el dibujo del rectángulo anterior.

123
00:09:03,990 --> 00:09:09,570
Aquí, por ejemplo, en un lado del círculo vemos cada uno de los rectángulos que nos ha ido dibujando.

124
00:09:10,450 --> 00:09:16,409
Y esto no nos da sensación de movimiento, lo que nos da es sensación de que se han dibujado muchos rectángulos,

125
00:09:16,509 --> 00:09:17,889
que es lo que en realidad ocurre.

126
00:09:18,690 --> 00:09:24,570
Pero mirad lo que pasa si yo el fondo lo corto de aquí y lo meto dentro de esta función.

127
00:09:26,389 --> 00:09:29,789
Lo meto hacia adentro y lo coloco, aunque ya digo que esto da igual para el programa.

128
00:09:32,370 --> 00:09:37,309
Ahora, cada vez que se dibuje un rectángulo y lo incremente, se va a volver a dibujar el fondo.

129
00:09:37,309 --> 00:09:41,289
Entonces se va a limpiar lo que ya había y la sensación de movimiento va a ser mayor.

130
00:09:41,950 --> 00:09:45,350
El rectángulo se dibuja, pero también se dibuja de nuevo el fondo.

131
00:09:45,350 --> 00:09:51,549
Vale, entonces parece que el rectángulo se mueve aunque en realidad son rectángulos distintos que se están dibujando

132
00:09:51,549 --> 00:09:57,570
Vale, yo creo que con esto ya tenéis suficiente para poder hacer que vuestras figuras se muevan