1
00:00:00,690 --> 00:00:07,650
Buenas tardes, vamos a empezar este pequeño videotutorial relacionado con Processing.

2
00:00:07,830 --> 00:00:13,429
Yo lo he instalado, en concreto he instalado la versión 4.2, que es la más reciente.

3
00:00:14,630 --> 00:00:22,149
He dejado referenciado la página de Processing.org, donde eligiendo la plataforma uno se lo puede instalar en su equipo.

4
00:00:23,149 --> 00:00:28,329
Y la API que estáis viendo, pues evidentemente recoge todo lo que vamos a necesitar.

5
00:00:30,690 --> 00:00:48,929
Aquí en la ayuda tendríamos el acceso a la referencia, donde tendríamos toda la documentación con todas las palabras que vamos a utilizar, que esto es lenguaje Java, y que podríamos utilizar en todo momento.

6
00:00:48,929 --> 00:00:53,509
Volviendo al Sketch, que sería nuestro primer programa

7
00:00:53,509 --> 00:00:58,210
Y haciendo esta primera aproximación, pues bueno, vamos a empezar ya directamente

8
00:00:58,210 --> 00:01:03,850
Con los dos botones posibles a ejecutar el primer programa

9
00:01:03,850 --> 00:01:11,590
No tenemos nada escrito, pero ya fíjense o fijaros como ya aparece un primer lienzo de trabajo

10
00:01:11,590 --> 00:01:18,790
Esto en cualquier otro lenguaje de programación, pues sin duda hubiéramos necesitado bastantes líneas de código

11
00:01:18,790 --> 00:01:35,189
para llegar a este primer lienzo. Bien, volviendo a nuestro primer sketch, vamos a empezar a escribir las diferentes líneas de programación según vayamos indicando.

12
00:01:35,370 --> 00:01:44,849
Por ejemplo, se me ocurre una primera instrucción, como podría ser site, que nos va a dar el tamaño del lienzo de pantalla y lo único que tendríamos que indicar

13
00:01:44,849 --> 00:01:51,310
es el tamaño en píxeles que queremos. Por ejemplo, podemos fijar el tamaño de 600 por 400.

14
00:01:52,189 --> 00:01:56,590
Cerraríamos el paréntesis y tendríamos que poner necesariamente un punto y coma.

15
00:01:57,609 --> 00:02:06,269
Solamente tendríamos ya que ejecutarlo y tendríamos ya nuestro primer programa, que sería el tamaño de esta pantalla.

16
00:02:06,269 --> 00:02:18,689
La ventaja que tiene Processing y Java es que, bueno, es un lenguaje de alto nivel, es textual y es totalmente profesional

17
00:02:18,689 --> 00:02:26,810
y perfectamente aquí podríamos, bueno, podríamos haber puesto esto en otra línea y perfectamente se hubiera podido ejecutar

18
00:02:26,810 --> 00:02:34,629
podríamos haber puesto el punto y coma después y también se podría haber ejecutado, no habría ningún problema

19
00:02:34,629 --> 00:02:41,629
Lo que no podríamos es, por ejemplo, cambiar el nombre de site poniendo la primera S con mayúscula.

20
00:02:41,770 --> 00:02:47,509
Ya aquí rápidamente nos sale una consola en el compilador que dice que no reconoce esta función.

21
00:02:47,949 --> 00:02:48,349
¿De acuerdo?

22
00:02:49,330 --> 00:02:56,229
Bien, pues retomando nuestro programa, tendríamos nuestro primer programa hecho.

23
00:02:57,430 --> 00:03:01,129
Y lo más importante es guardarlo.

24
00:03:01,129 --> 00:03:04,530
Pues se guarda como guardamos todos los programas.

25
00:03:04,629 --> 00:03:12,229
En archivo guardar como, simplemente tendríamos que elegir en la carpeta donde querríamos guardarlo.

26
00:03:14,069 --> 00:03:19,370
Por defecto, trae una carpeta que es el Sketch Boot, pero todo esto es totalmente configurable.

27
00:03:19,990 --> 00:03:30,009
Y si hemos creado una primera carpeta que se llame nuestro primer programa, lo podríamos guardar ahí con el nombre de mi primer programa y con la extensión pd.

28
00:03:30,789 --> 00:03:33,270
Le vamos a reemplazar y ya lo tendríamos.

29
00:03:33,270 --> 00:03:41,889
Bien, vamos a proseguir dentro de esta programación estática y vamos a meter ya algún tipo de figura geométrica

30
00:03:41,889 --> 00:03:50,770
Por ejemplo, se me ocurre el square, podría ser la posibilidad que nos daría esta instrucción de dibujar un cuadrado

31
00:03:50,770 --> 00:03:57,770
Para ello tendríamos que fijar la posición del primer vértice, vamos a fijarla por ejemplo en la posición 20 del segundo vértice

32
00:03:57,770 --> 00:03:59,969
vértice en cuanto a la coordenada

33
00:03:59,969 --> 00:04:01,830
y 20 y el del lado

34
00:04:01,830 --> 00:04:03,789
del cuadrado, le vamos a poner 65

35
00:04:03,789 --> 00:04:06,090
si ponemos el punto y coma

36
00:04:06,090 --> 00:04:07,770
y ejecutamos el programa

37
00:04:07,770 --> 00:04:09,889
pues estaríamos en condiciones ya de poder ver

38
00:04:09,889 --> 00:04:11,990
nuestro primer cuadrado

39
00:04:11,990 --> 00:04:13,889
lo que quería

40
00:04:13,889 --> 00:04:15,270
hacer de esta forma pues para

41
00:04:15,270 --> 00:04:17,649
indicar que el eje de las x

42
00:04:17,649 --> 00:04:19,509
comienza donde tengo el puntero del ratón

43
00:04:19,509 --> 00:04:21,970
y vamos de izquierda a derecha aumentando

44
00:04:21,970 --> 00:04:23,730
desde 0 el eje positivo

45
00:04:23,730 --> 00:04:25,610
y el eje de las y es

46
00:04:25,610 --> 00:04:27,829
sería justo al revés

47
00:04:27,829 --> 00:04:30,029
cuando me desplazo hacia abajo

48
00:04:30,029 --> 00:04:32,889
en el eje de las y sería la parte positiva

49
00:04:32,889 --> 00:04:35,149
lo vamos a ver cambiando por ejemplo

50
00:04:35,149 --> 00:04:38,649
vamos a poner aquí el 0

51
00:04:38,649 --> 00:04:42,290
y directamente ejecutaríamos

52
00:04:42,290 --> 00:04:47,149
se nos pegaría el cuadrado al 0 de la x

53
00:04:47,149 --> 00:04:51,930
o podríamos también hacer que se nos hiciera 0 en la y

54
00:04:51,930 --> 00:05:06,430
Y al ejecutar tendríamos el cuadrado justamente en la misma esquina. De la misma forma podríamos hacer que nuestro cuadrado fuera todo lo grande que quisiéramos aumentando el tamaño del lado.

55
00:05:07,350 --> 00:05:21,149
165. Al ejecutar tendríamos aquí un cuadrado más grande. No olvidemos el tamaño del lienzo de pantalla. Si pusiéramos en vez de 165 pusiéramos un número se nos saldría del lienzo.

56
00:05:21,149 --> 00:05:26,170
Lo vamos a ver ahora mismo. Este sería nuestro cuadrado que estaría fuera del lienzo.

57
00:05:27,329 --> 00:05:35,149
Es importante destacar que todas estas líneas de comando se puede perfectamente dejar espacios entre ellas

58
00:05:35,149 --> 00:05:39,470
y el programa se ejecutaría sin ninguna duda.

59
00:05:39,649 --> 00:05:45,709
Vamos a bajar ya el tamaño para dejarlo dentro de lo que sería nuestro primer programa.

60
00:05:47,310 --> 00:05:49,230
Bueno, pues hasta aquí el cuadrado.

61
00:05:52,129 --> 00:06:02,189
Vamos a definir otra función, como podría ser el círculo, que también necesariamente los dos primeros números atenderán a lo que es la coordenada x y del centro.

62
00:06:02,910 --> 00:06:07,129
Y el tercer parámetro, en este caso 45, que nos daría el radio de ese círculo.

63
00:06:07,670 --> 00:06:12,370
Si ejecutamos, estaríamos en condiciones ya de dibujar el círculo dentro del cuadrado.

64
00:06:12,889 --> 00:06:18,009
Si lo quisiéramos fuera del cuadrado, pues simplemente tendríamos que modificar aquí, creo que sería suficiente.

65
00:06:18,009 --> 00:06:22,930
no, un poquito más porque el cuadrado lo hemos hecho muy grande

66
00:06:22,930 --> 00:06:25,769
le bajamos aquí y ejecutamos

67
00:06:25,769 --> 00:06:29,629
ahí lo tendríamos, tendríamos nuestras dos primeras figuras

68
00:06:29,629 --> 00:06:35,329
a continuación, si ahora quisiéramos que nuestro círculo no apareciera

69
00:06:35,329 --> 00:06:39,069
una de las posibilidades que tenemos es convertir esta instrucción

70
00:06:39,069 --> 00:06:42,870
pues en un comité de texto y esto se hace con una doble barra

71
00:06:42,870 --> 00:06:47,110
de esta forma el programa entiende que todo lo que viene después de la doble barra

72
00:06:47,110 --> 00:06:51,870
pues es un comentario y por lo tanto de esta forma no aparecería el círculo

73
00:06:51,870 --> 00:06:54,230
que luego nos puede interesar que aparezca después

74
00:06:54,230 --> 00:06:59,300
bien, para terminar este primer video tutorial

75
00:06:59,300 --> 00:07:03,879
pues cuando instaláis Processing tenéis ejemplos

76
00:07:03,879 --> 00:07:08,839
que podéis visualizar

77
00:07:08,839 --> 00:07:11,579
y bueno, aquí tengo ya algunos seleccionados

78
00:07:11,579 --> 00:07:13,720
para que podáis ver un programa

79
00:07:13,720 --> 00:07:17,139
de lo que se puede llegar a hacer en Java

80
00:07:17,139 --> 00:07:19,660
Esto poco a poco iremos aprendiendo

81
00:07:19,660 --> 00:07:25,019
Al ejecutar estaríamos en condiciones de ver figuras

82
00:07:25,019 --> 00:07:27,420
En este caso una aplicación gráfica de este tipo

83
00:07:27,420 --> 00:07:30,560
Son múltiples ejemplos los que vienen

84
00:07:30,560 --> 00:07:34,000
Bueno, pues eso es todo de este primer videotutorial