1
00:00:00,940 --> 00:00:03,779
Buenos días, bueno, vamos a comenzar con este segundo tutorial.

2
00:00:04,240 --> 00:00:17,429
El color o la función color, ahora ya la definiremos, se puede trabajar de dos maneras.

3
00:00:17,789 --> 00:00:23,629
Una con lo que sería la escala RGB, la escala que mezcla el rojo, el verde y el azul.

4
00:00:24,250 --> 00:00:29,769
Serían tres canales de color en distinta proporción, más un posible canal alfa,

5
00:00:29,929 --> 00:00:33,490
que también es interesante cuando queremos que los colores sean transparentes.

6
00:00:33,490 --> 00:00:37,950
Los colores se pueden presentar de forma opaca o pueden tener ciertas transparencias.

7
00:00:38,210 --> 00:00:39,270
Eso lo veremos luego o después.

8
00:00:40,270 --> 00:00:51,670
También hay otra manera de trabajar que sería con la escala HSB que hace alusión a la abreviatura en inglés del matiz, la saturación y el brillo.

9
00:00:51,670 --> 00:00:53,250
Todo ello lo tenemos aquí.

10
00:00:59,100 --> 00:01:17,840
Como vamos y trabajamos, yo puedo con el ratón fijar qué saturación y brillo tengo o qué mezclas de rojo, verde y anitas.

11
00:01:17,840 --> 00:01:25,840
Para este color definido tendríamos aquí ya el código hexadecimal, que no hace falta ni seleccionarlo porque directamente...

12
00:01:28,299 --> 00:01:41,939
Dicho esto, si volvemos a nuestro segundo programa, pues vamos a empezar definiendo un lienzo ya de 800x800, más simétrico, un cuadrado perfecto, lo veis.

13
00:01:41,939 --> 00:01:45,400
y ahora a continuación lo que vamos a hacer ya es

14
00:01:45,400 --> 00:01:50,879
me traigo hacia arriba lo que tenía como comentario

15
00:01:50,879 --> 00:01:54,700
y defino ya una función fill, la función de llenado

16
00:01:54,700 --> 00:02:09,139
de color, la siguiente figura que tengo a continuación

17
00:02:09,139 --> 00:02:13,319
hago notar que de las tres proporciones de color

18
00:02:13,319 --> 00:02:16,500
la verde es la más baja, por lo tanto

19
00:02:16,500 --> 00:02:20,240
será más intenso en color rojo y en azul

20
00:02:20,240 --> 00:02:25,569
esto debe quedar una especie de color rojo

21
00:02:25,569 --> 00:02:33,430
Muy bien, está bien situado en el 0,0, la longitud sería de 100 y tendríamos este color rosa.

22
00:02:33,430 --> 00:02:41,270
Si aumentáramos la proporción de verde, pues lógicamente se nos iría a la zona del naranja.

23
00:02:41,669 --> 00:02:42,669
Eso es exactamente.

24
00:02:44,030 --> 00:03:01,449
Bien, prosiguiendo, hago notar también que este cuadrado tiene un boro a función que aquí tengo definida, que es la función stroke.

25
00:03:01,449 --> 00:03:14,039
Y con esta combinación de colores, 125 y 115, pues estaría definiendo el color del borde de línea que quiero que tenga mi cuadrado.

26
00:03:14,199 --> 00:03:22,659
Vamos a ver cómo queda tan mucho, vamos a exagerarlo un poco bajando, por ejemplo, el verde.

27
00:03:23,900 --> 00:03:30,860
Aquí ya parece que se aprecia un poquito más.

28
00:03:31,300 --> 00:03:44,509
Esta también la podríamos y tendríamos, por lo tanto, la posibilidad de configurar el color del borde de nuestra figura.

29
00:03:44,509 --> 00:03:58,289
De la misma forma que tenemos el stroke para el color del contorno, podríamos definir la función noStroke, que evidentemente lo que haría es no ponerme ningún color.

30
00:04:02,280 --> 00:04:08,060
Como estoy diciendo, la función noStroke lo que haría sería eliminar el color del borde de la línea.

31
00:04:08,319 --> 00:04:09,280
Vamos a ver cómo quedaría.

32
00:04:10,219 --> 00:04:15,659
Y así que vemos que nuestro cuadrado de color naranja lo eliminamos.

33
00:04:15,659 --> 00:04:28,680
Bien, pues vamos a proseguir con nuestra programación.

34
00:04:29,259 --> 00:04:44,939
Escribo las tres líneas en un color 0, 0, 0. El color 0, 0, 0 aludiría a aquel en el cual no hay participación de los colores primarios, por lo tanto esto debe ser el color negro, y está aplicado sobre el cuadrado que está en la posición 0, 0.

35
00:04:45,480 --> 00:04:47,800
Vamos a ver el efecto como quedaría.

36
00:04:47,800 --> 00:04:53,600
Bien, si ahora activamos las siguientes líneas de comando

37
00:04:53,600 --> 00:04:56,759
Voy a llamar a un nuevo fill

38
00:04:56,759 --> 00:04:59,579
Pero me voy a ir al extremo opuesto

39
00:04:59,579 --> 00:05:01,959
Al color negro, que sería el color blanco

40
00:05:01,959 --> 00:05:04,339
252.255

41
00:05:04,339 --> 00:05:06,660
Y se lo voy a aplicar al mismo cuadrado

42
00:05:06,660 --> 00:05:09,420
A un cuadrado, perdón, distinto

43
00:05:09,420 --> 00:05:17,160
Que está desplazado 100 píxeles con respecto a ella

44
00:05:17,160 --> 00:05:18,500
De tener dos cuadrados

45
00:05:18,500 --> 00:05:22,699
Si continuáramos con nuestro razonamiento

46
00:05:22,699 --> 00:05:28,819
y definiéramos nuestra línea 8 y 9, otro cuadrado, pero desplazado a 200 píxeles en color negro,

47
00:05:29,620 --> 00:05:34,579
estaríamos ya en condiciones de ir construyendo lo que vamos buscando,

48
00:05:35,139 --> 00:05:38,360
que ya algunos seguramente se habrán dado cuenta que es nuestro tablet.

49
00:05:42,199 --> 00:05:50,019
Bien, he ido reconfigurándolo, entonces he ido incorporando la función no stroke,

50
00:05:50,139 --> 00:05:53,720
no quiero bordes para cada uno de los cuadrados.

51
00:05:53,720 --> 00:06:07,529
Lo que os propongo es que sigáis escribiendo el código correspondiente para intentar llegar a las 64 casillas del tablero de ajedrez.

52
00:06:08,209 --> 00:06:09,810
Ese sería un poco el reto.

53
00:06:10,750 --> 00:06:20,329
El objetivo es no cansaros con esto y, lógicamente, cuando lo tengáis hecho, cuando lleguéis al final,

54
00:06:20,329 --> 00:06:30,850
os vais a dar cuenta que tenemos en programación de incorporar herramientas, que las hay,

55
00:06:31,550 --> 00:06:40,610
como son los bucles, la función for, el while, que evidentemente nos deben simplificar el trabajo.

56
00:06:41,269 --> 00:06:49,339
Pero bueno, en principio vamos a intentar, por mayasín, sabremos movernos de manera cartesiana.

57
00:06:50,480 --> 00:06:50,920
Eso es todo.