Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Primeros pasos con Processing - Contenido educativo

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 2 de julio de 2024 por Francisco Javier M.

52 visualizaciones

Buenas tardes, vamos a empezar este pequeño videotutorial relacionado con Processing. 00:00:00

Yo lo he instalado, en concreto he instalado la versión 4.2, que es la más reciente. 00:00:07

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

Y la API que estáis viendo, pues evidentemente recoge todo lo que vamos a necesitar. 00:00:23

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, 00:00:30

que esto es lenguaje Java y que podríamos utilizar en todo momento. 00:00:44

Volviendo al Sketch, que sería nuestro primer programa, y haciendo esta primera aproximación, 00:00:50

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. 00:00:56

bien, volviendo a nuestro primer sketch 00:01:20

vamos a empezar a escribir las diferentes líneas de programación 00:01:26

según vayamos indicando 00:01:30

por ejemplo, se me ocurre una primera instrucción 00:01:35

como podría ser site, que nos va a dar el tamaño del lienzo de pantalla 00:01:38

y lo único que tendríamos que indicar es el tamaño en píxeles que queremos 00:01:42

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. 00:01:46

Solamente tendríamos ya que ejecutarlo y tendríamos ya nuestro primer programa, que sería el tamaño de esta pantalla. 00:01:57

La ventaja que tiene Processing y Java es que, bueno, es un lenguaje de alto nivel, es textual y es totalmente profesional 00:02:06

Y perfectamente aquí podríamos, bueno, podríamos haber puesto esto en otra línea y perfectamente se hubiera podido ejecutar 00:02:18

Podríamos haber puesto el punto y coma después y también se podría haber ejecutado, no habría ningún problema 00:02:26

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? 00:02:34

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. 00:02:48

En archivo guardar como, simplemente tendríamos que elegir la carpeta donde querríamos guardarlo. 00:03:04

Por defecto, trae una carpeta que es el Sketch Boot, pero todo esto es totalmente configurable. 00:03:13

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. 00:03:19

Le vamos a reemplazar y ya lo tendríamos. 00:03:30

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. 00:03:34

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. 00:03:50

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

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 00:04:13

y vamos de izquierda a derecha aumentando desde cero el eje positivo. 00:04:19

Y el eje de las Y sería justo al revés. 00:04:24

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

Lo vamos a ver cambiando, por ejemplo, vamos a poner aquí el 0 y directamente ejecutaríamos. 00:04:32

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. 00:04:42

Y al ejecutar tendríamos el cuadrado justamente en la misma esquina. 00:04:53

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

165 al ejecutar tendríamos aquí un cuadrado más grande 00:05:06

no olvidemos el tamaño del lienzo de pantalla 00:05:11

si pusiéramos en vez de 165 pusiéramos un número se nos saldría del lienzo 00:05:15

lo vamos a ver ahora mismo y este sería nuestro cuadrado que estaría fuera del lienzo 00:05:21

¿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. 00:05:26

Vamos a bajar ya el tamaño para dejarlo dentro de lo que sería nuestro primer programa. 00:05:39

bueno, pues hasta aquí el cuadrado 00:05:45

vamos a definir otra función como podría ser el círculo 00:05:49

que también necesariamente los dos primeros números atenderán a lo que es la coordenada x y del centro 00:05:55

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

si ejecutamos estaríamos en condiciones ya de dibujar el círculo dentro del cuadrado 00:06:07

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. 00:06:12

Tendríamos nuestras dos primeras figuras. 00:06:27

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. 00:06:30

Y esto se hace con una doble barra. 00:06:41

De esta forma el programa entiende que todo lo que viene después de la doble barra es un comentario. 00:06:43

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

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. 00:06:54

Esto poco a poco iremos aprendiendo 00:07:17

Al ejecutar estaríamos en condiciones de ver figuras 00:07:19

En este caso una aplicación gráfica de este tipo 00:07:25

Son múltiples ejemplos los que vienen 00:07:27

Bueno, pues eso es todo de este primer videotutorial 00:07:30