1
00:00:00,750 --> 00:00:07,669
Hola, muy buenas. En este videotutorial haremos una introducción a la programación en Java con Processing.

2
00:00:07,990 --> 00:00:15,830
Java, o Java en inglés, es un lenguaje de programación de alto nivel, profesional y textual.

3
00:00:16,730 --> 00:00:19,750
Esto quiere decir que vamos a tener que escribir el código.

4
00:00:20,550 --> 00:00:28,050
Y Processing es un entorno de programación orientado a la realización de aplicaciones gráficas.

5
00:00:28,050 --> 00:00:37,829
Para empezar vamos a abrirnos una pantalla, una pestaña del navegador y vamos a irnos a la página web de Processing

6
00:00:37,829 --> 00:00:43,090
Para ello escribiremos processing.org en la barra de direcciones

7
00:00:43,090 --> 00:00:47,429
Le damos a intro y accedemos a la página web

8
00:00:47,429 --> 00:00:57,969
Ya sabéis que podéis descargaros el entorno de programación e instalarlo en vuestro ordenador que es totalmente gratuito

9
00:00:57,969 --> 00:01:16,870
Y muy recomendable, por cierto. Bueno, dentro de la página podemos encontrarnos un enlace a la referencia. En la referencia tenemos todo el API disponible de Processing, es decir, el conjunto de funciones que yo voy a poder utilizar en mi lenguaje.

10
00:01:16,870 --> 00:01:26,890
Bueno, vamos a abrirnos la aplicación que yo ya tengo instalada y vamos a empezar a hacer nuestros primeros programas

11
00:01:26,890 --> 00:01:41,689
En esta parte de aquí será el lugar donde podemos escribir nuestro código

12
00:01:41,689 --> 00:01:46,349
Yo antes de escribir nada le voy a dar a ejecutar el programa

13
00:01:46,349 --> 00:01:54,409
En el momento que lo hago se abre la pantalla que vería el usuario de la aplicación

14
00:01:54,409 --> 00:01:57,689
Es decir, sin escribir nada ya se me abre una ventana

15
00:01:57,689 --> 00:02:02,450
Esto en otros entornos de programación o con otros lenguajes de programación

16
00:02:02,450 --> 00:02:08,330
Conseguir esto implicaría el tener que escribir unas cuantas líneas de código

17
00:02:08,330 --> 00:02:13,189
Pero Processing hemos dicho que está orientado a la realización de aplicaciones gráficas

18
00:02:13,189 --> 00:02:16,750
Con lo cual me va a facilitar la vida en muchas ocasiones

19
00:02:16,750 --> 00:02:20,689
Bueno, vemos que es una ventana pequeñita

20
00:02:20,689 --> 00:02:27,849
Vamos a ver si podemos conseguir abrir una ventana que sea un poco más grande

21
00:02:27,849 --> 00:02:33,530
Para ello vamos a volver a la página de la referencia del lenguaje

22
00:02:33,530 --> 00:02:36,909
Que por cierto, vemos que hay mucho contenido en inglés

23
00:02:36,909 --> 00:02:41,550
Y que procuraremos no traducir automáticamente

24
00:02:41,550 --> 00:02:46,330
Es decir, configuraremos nuestro navegador para que no lo traduzca el castellano de forma automática

25
00:02:46,330 --> 00:02:50,090
Porque las funciones que vamos a utilizar en el lenguaje de programación

26
00:02:50,090 --> 00:02:56,849
en el entorno de programación, van a ser en inglés. Si las traducimos aquí, luego no nos funcionarán cuando las copiemos.

27
00:02:57,250 --> 00:03:06,389
Así que lo ponemos en la versión original tal y como aparece. Si necesitamos traducir algo, podemos abrirnos una pestañita y buscar un traductor en internet.

28
00:03:07,530 --> 00:03:13,969
Yo aquí pondría la palabra, aquí me lo va a traducir, si hay alguna palabra o alguna frase que desconocemos su significado.

29
00:03:13,969 --> 00:03:18,229
Pero esta siempre la dejaremos en inglés, en la original

30
00:03:18,229 --> 00:03:23,229
Bueno, vamos a cambiar el tamaño de esa pantalla que se me muestra

31
00:03:23,229 --> 00:03:25,770
Tamaño en inglés es Size

32
00:03:25,770 --> 00:03:29,250
Pues vamos a ver si encontramos una función que se llama Size

33
00:03:29,250 --> 00:03:33,090
Para buscar palabras dentro de una página web

34
00:03:33,090 --> 00:03:37,189
Ya sabéis que podemos utilizar la combinación de teclas CTRL F

35
00:03:37,189 --> 00:03:41,909
Es decir, pulso CTRL y sin soltarle hago un clic en la letra F

36
00:03:41,909 --> 00:03:56,229
Aquí pondría la palabra que yo quiero buscar, en este caso size, y si existe en la página pues me va a decir las veces que lo ha encontrado, en este caso dos, y bueno, pues me mostrará la primera aparición de esa palabra.

37
00:03:56,229 --> 00:04:05,289
esta pinchamos y aquí me muestra información en esta página de todo lo relativo a esta función

38
00:04:05,289 --> 00:04:14,169
me da algunos ejemplos una descripción detallada de la función la sintaxis es decir cómo cómo vas

39
00:04:14,169 --> 00:04:20,250
se va a escribir esa función vale y lo que significa cada uno de los parámetros esta

40
00:04:20,250 --> 00:04:27,569
función vemos que tiene dos posibilidades, escribirla con el ancho y el alto o también

41
00:04:27,569 --> 00:04:32,189
escribirla con el ancho y el alto y un sistema de renderización. Nosotros vamos a utilizar

42
00:04:32,189 --> 00:04:39,649
la de arriba que tiene solo dos parámetros y lo vamos a hacer directamente copiando un

43
00:04:39,649 --> 00:04:47,189
ejemplo, este de aquí. Yo selecciono ese texto, hago control c para copiarlo y me va

44
00:04:47,189 --> 00:05:00,600
venir a mi entorno de programación donde voy a hacer control V para pegar. Se ha pegado la línea 2, puedo quitar la línea de arriba, puedo borrar todos los espacios

45
00:05:00,600 --> 00:05:08,699
en blanco. Eso es totalmente indiferente. Una de las características de este lenguaje es que yo puedo poner o quitar líneas en blanco y mi programa sigue funcionando

46
00:05:08,699 --> 00:05:17,519
igual. Eso formaría parte de lo que conocemos como la sintaxis del lenguaje, como las reglas del lenguaje. Yo voy a quitar las líneas en blanco, lo voy a dejar de esta manera

47
00:05:17,519 --> 00:05:27,519
y vamos a probar a ejecutar este programa, este código, vemos que efectivamente ahora es más ancho, acordaros que el primer parámetro está relacionado con el ancho

48
00:05:27,519 --> 00:05:41,600
y el segundo parámetro con el alto, puedo darle otro tamaño más grande, por ejemplo 800 de ancho y 100 de alto, efectivamente vemos que hace lo que esperamos

49
00:05:41,600 --> 00:05:58,800
Y en este caso voy a volver a dar otro tamaño de 800x600. Podemos poner el tamaño que nosotros queramos. Este tamaño estaría representado en píxeles, es decir, en puntitos de la pantalla. 800 puntitos a lo ancho, 600 puntitos a lo alto.

50
00:05:59,560 --> 00:06:07,500
El sistema de coordenadas de esta pantalla es que el origen de coordenadas estaría situado aquí arriba, en la esquinita superior izquierda.

51
00:06:07,699 --> 00:06:11,420
Ese sería coordenada x0, coordenada y0.

52
00:06:12,879 --> 00:06:20,279
Las x van a ir aumentando hacia la derecha y el eje de coordenadas de las y aumentaría hacia abajo.

53
00:06:20,560 --> 00:06:21,939
Vamos a verlo mejor con un ejemplo.

54
00:06:22,740 --> 00:06:26,740
Vamos a intentar pintar un cuadrado dentro de esta pantalla.

55
00:06:26,740 --> 00:06:48,079
Para ello vamos a volver a nuestra página de referencia, vamos a ir a la página principal y vamos a buscar con control F una función que se llame algo así como square, es decir cuadrado en inglés, esta de aquí.

56
00:06:48,079 --> 00:07:09,399
De nuevo me muestra información sobre esta función. Nosotros vamos a copiar este ejemplo, seleccionamos y ponemos control c. Bueno, fijaros en los parámetros, el primer parámetro, la x, donde aparece el 30 aquí en el ejemplo, sería la coordenada x de la esquinita superior izquierda del cuadrado.

57
00:07:10,300 --> 00:07:19,500
El segundo parámetro, la y, que aquí sería un 20 en el ejemplo, estaríamos hablando de la coordenada y, de la esquinita superior izquierda del cuadrado.

58
00:07:20,319 --> 00:07:27,879
Y este tercer parámetro, que aquí vale 55, sería el ancho, el lado de nuestro cuadrado.

59
00:07:28,399 --> 00:07:37,439
Bueno, nosotros nos lo llevamos a nuestro programita, lo ponemos en una línea nueva, lo pegamos con control v y probamos a ver qué pasa.

60
00:07:37,439 --> 00:07:42,420
Efectivamente se nos ha dibujado un cuadrado

61
00:07:42,420 --> 00:07:47,139
Vamos a cambiarle las coordenadas

62
00:07:47,139 --> 00:07:51,019
Por ejemplo vamos a ponerle aquí que la coordenada x valga 0

63
00:07:51,019 --> 00:07:55,000
Veremos como ese cuadrado ahora se va a dibujar a la izquierda del todo

64
00:07:55,000 --> 00:07:58,439
Si hacemos lo propio con la coordenada y

65
00:07:58,439 --> 00:08:02,019
Veremos que se nos pone arriba del todo

66
00:08:02,019 --> 00:08:12,240
Y jugando con estos valores yo voy a poder conseguir que mi cuadrado se sitúe en distintos sitios de la pantalla.

67
00:08:13,459 --> 00:08:22,639
Vamos a poner por ejemplo que se dibuje la coordenada x 200, la coordenada y 50 y ya de paso también le vamos a cambiar el tamaño.

68
00:08:22,639 --> 00:08:40,000
Vamos a decir que tenga un tamaño de 200 píxeles. Ejecutamos y efectivamente vemos que se nos ha desplazado la coordenada 200 en el eje de las X, en la coordenada 50 en el eje de las Y y que tiene un ancho de 200 píxeles.

69
00:08:40,000 --> 00:08:44,779
Bueno, en nuestros programas vamos a ir poniendo distintas funciones

70
00:08:44,779 --> 00:08:50,080
Y vamos a ir viendo como podemos ir haciendo aplicaciones cada vez más avanzadas

71
00:08:50,080 --> 00:08:54,299
Pero eso se quedará para los siguientes videotutoriales

72
00:08:54,299 --> 00:08:56,139
De momento, hasta aquí es todo