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:44,609
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,

6
00:00:44,750 --> 00:00:48,929
que esto es lenguaje Java y que podríamos utilizar en todo momento.

7
00:00:50,710 --> 00:00:56,270
Volviendo al Sketch, que sería nuestro primer programa, y haciendo esta primera aproximación,

8
00:00:56,270 --> 00:01:20,269
Pues bueno, vamos a empezar ya directamente con los dos botones posibles a ejecutar el primer programa. No tenemos nada escrito, pero ya fíjense o fijaros como ya aparece un primer lienzo de trabajo. Esto en cualquier otro lenguaje de programación, pues sin duda hubiéramos necesitado bastantes líneas de código para llegar a este primer lienzo.

9
00:01:20,269 --> 00:01:26,090
bien, volviendo a nuestro primer sketch

10
00:01:26,090 --> 00:01:30,670
vamos a empezar a escribir las diferentes líneas de programación

11
00:01:30,670 --> 00:01:35,189
según vayamos indicando

12
00:01:35,189 --> 00:01:38,930
por ejemplo, se me ocurre una primera instrucción

13
00:01:38,930 --> 00:01:42,629
como podría ser site, que nos va a dar el tamaño del lienzo de pantalla

14
00:01:42,629 --> 00:01:46,549
y lo único que tendríamos que indicar es el tamaño en píxeles que queremos

15
00:01:46,549 --> 00:01:56,590
Por ejemplo, podemos fijar el tamaño de 600 por 400. Cerraríamos el paréntesis y tendríamos que poner necesariamente un punto y coma.

16
00:01:57,530 --> 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.

17
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

18
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

19
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

20
00:02:34,629 --> 00:02:48,349
lo que no podríamos es, por ejemplo, cambiar el nombre de site poniendo la primera S con mayúscula, ya aquí rápidamente nos sale una consola en el compilador que dice que no reconoce esta función, ¿de acuerdo?

21
00:02:48,349 --> 00:03:04,530
Bien, pues retomando nuestro programa, tendríamos nuestro primer programa hecho y lo más importante es guardarlo, pues se guarda como guardamos todos los programas.

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

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

24
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.

25
00:03:30,009 --> 00:03:33,349
Le vamos a reemplazar y ya lo tendríamos.

26
00:03:34,530 --> 00:03:50,750
Bien, vamos a proseguir dentro de esta programación estática y vamos a meter ya algún tipo de figura geométrica. Por ejemplo, se me ocurre el square, podría ser la posibilidad que nos daría esta instrucción de dibujar un cuadrado.

27
00:03:50,750 --> 00:04:03,789
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 en cuanto a la coordenada I20 y el del lado del cuadrado, le vamos a poner 65.

28
00:04:04,530 --> 00:04:11,729
Si ponemos el punto y coma y ejecutamos el programa, pues estaríamos en condiciones ya de poder ver nuestro primer cuadrado.

29
00:04:13,150 --> 00:04:19,509
Lo que quería hacer de esta forma, pues para indicar que el eje de las X comienza donde tengo el puntero del ratón

30
00:04:19,509 --> 00:04:23,709
y vamos de izquierda a derecha aumentando desde cero el eje positivo.

31
00:04:24,569 --> 00:04:27,829
Y el eje de las Y sería justo al revés.

32
00:04:28,589 --> 00:04:32,850
Cuando me desplazo hacia abajo, en el eje de las Y sería la parte positiva.

33
00:04:32,850 --> 00:04:42,290
Lo vamos a ver cambiando, por ejemplo, vamos a poner aquí el 0 y directamente ejecutaríamos.

34
00:04:42,870 --> 00:04:51,910
Se nos pegaría el cuadrado al 0 de la x o podríamos también hacer que se nos hiciera 0 en la y.

35
00:04:53,290 --> 00:05:00,310
Y al ejecutar tendríamos el cuadrado justamente en la misma esquina.

36
00:05:00,310 --> 00:05:06,430
de la misma forma podríamos hacer que nuestro cuadrado fuera todo lo grande que quisiéramos aumentando el tamaño del lado

37
00:05:06,430 --> 00:05:11,689
165 al ejecutar tendríamos aquí un cuadrado más grande

38
00:05:11,689 --> 00:05:15,329
no olvidemos el tamaño del lienzo de pantalla

39
00:05:15,329 --> 00:05:21,170
si pusiéramos en vez de 165 pusiéramos un número se nos saldría del lienzo

40
00:05:21,170 --> 00:05:26,170
lo vamos a ver ahora mismo y este sería nuestro cuadrado que estaría fuera del lienzo

41
00:05:26,170 --> 00:05:39,470
¿De acuerdo? Es importante destacar que todas estas líneas de comando se puede perfectamente dejar espacios entre ellas y el programa se ejecutaría sin ninguna duda.

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

43
00:05:45,709 --> 00:05:49,269
bueno, pues hasta aquí el cuadrado

44
00:05:49,269 --> 00:05:55,649
vamos a definir otra función como podría ser el círculo

45
00:05:55,649 --> 00:06:02,189
que también necesariamente los dos primeros números atenderán a lo que es la coordenada x y del centro

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

47
00:06:07,129 --> 00:06:12,370
si ejecutamos estaríamos en condiciones ya de dibujar el círculo dentro del cuadrado

48
00:06:12,370 --> 00:06:27,529
Si lo quisiéramos fuera del cuadrado, pues simplemente tendríamos que modificar aquí. Creo que sería suficiente. Un poquito más porque el cuadrado lo hemos hecho muy grande. Le bajamos aquí y ejecutamos. Ahí lo tendríamos.

49
00:06:27,529 --> 00:06:29,629
Tendríamos nuestras dos primeras figuras.

50
00:06:30,750 --> 00:06:40,970
A continuación, si ahora quisiéramos que nuestro círculo no apareciera, una de las posibilidades que tenemos es convertir esta instrucción en un comentario de texto.

51
00:06:41,110 --> 00:06:42,850
Y esto se hace con una doble barra.

52
00:06:43,029 --> 00:06:48,610
De esta forma el programa entiende que todo lo que viene después de la doble barra es un comentario.

53
00:06:48,730 --> 00:06:54,170
Y por lo tanto, de esta forma no aparecería el círculo, que luego nos puede interesar que aparezca después.

54
00:06:54,170 --> 00:07:17,139
Bien, para terminar este primer vídeo tutorial, pues cuando instaláis Processing tenéis ejemplos que podéis visualizar y bueno, aquí tengo yo algunos seleccionados para que podáis ver un programa de lo que se puede llegar a hacer en Java.

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

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

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

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

59
00:07:30,560 --> 00:07:33,980
Bueno, pues eso es todo de este primer videotutorial