Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Primeros pasos con Processing - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
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, que esto es lenguaje Java, y que podríamos utilizar en todo momento.
00:00:30
Volviendo al Sketch, que sería nuestro primer programa
00:00:48
Y haciendo esta primera aproximación, pues bueno, vamos a empezar ya directamente
00:00:53
Con los dos botones posibles a ejecutar el primer programa
00:00:58
No tenemos nada escrito, pero ya fíjense o fijaros como ya aparece un primer lienzo de trabajo
00:01:03
Esto en cualquier otro lenguaje de programación, pues sin duda hubiéramos necesitado bastantes líneas de código
00:01:11
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.
00:01:18
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
00:01:35
es el tamaño en píxeles que queremos. Por ejemplo, podemos fijar el tamaño de 600 por 400.
00:01:44
Cerraríamos el paréntesis y tendríamos que poner necesariamente un punto y coma.
00:01:52
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.
00:02:34
Ya aquí rápidamente nos sale una consola en el compilador que dice que no reconoce esta función.
00:02:41
¿De acuerdo?
00:02:47
Bien, pues retomando nuestro programa, tendríamos nuestro primer programa hecho.
00:02:49
Y lo más importante es guardarlo.
00:02:57
Pues se guarda como guardamos todos los programas.
00:03:01
En archivo guardar como, simplemente tendríamos que elegir en 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:14
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
00:03:33
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:41
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
00:03:50
vértice en cuanto a la coordenada
00:03:57
y 20 y el del lado
00:03:59
del cuadrado, le vamos a poner 65
00:04:01
si ponemos el punto y coma
00:04:03
y ejecutamos el programa
00:04:06
pues estaríamos en condiciones ya de poder ver
00:04:07
nuestro primer cuadrado
00:04:09
lo que quería
00:04:11
hacer de esta forma pues para
00:04:13
indicar que el eje de las x
00:04:15
comienza donde tengo el puntero del ratón
00:04:17
y vamos de izquierda a derecha aumentando
00:04:19
desde 0 el eje positivo
00:04:21
y el eje de las y es
00:04:23
sería justo al revés
00:04:25
cuando me desplazo hacia abajo
00:04:27
en el eje de las y sería la parte positiva
00:04:30
lo vamos a ver cambiando por ejemplo
00:04:32
vamos a poner aquí el 0
00:04:35
y directamente ejecutaríamos
00:04:38
se nos pegaría el cuadrado al 0 de la x
00:04:42
o podríamos también hacer que se nos hiciera 0 en la y
00:04:47
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.
00:04:51
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.
00:05:07
Lo vamos a ver ahora mismo. Este sería nuestro cuadrado que estaría fuera del lienzo.
00:05:21
Es importante destacar que todas estas líneas de comando se puede perfectamente dejar espacios entre ellas
00:05:27
y el programa se ejecutaría sin ninguna duda.
00:05:35
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:47
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.
00:05:52
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.
00:06:12
no, un poquito más porque el cuadrado lo hemos hecho muy grande
00:06:18
le bajamos aquí y ejecutamos
00:06:22
ahí lo tendríamos, tendríamos nuestras dos primeras figuras
00:06:25
a continuación, si ahora quisiéramos que nuestro círculo no apareciera
00:06:29
una de las posibilidades que tenemos es convertir esta instrucción
00:06:35
pues en un comité de texto y esto se hace con una doble barra
00:06:39
de esta forma el programa entiende que todo lo que viene después de la doble barra
00:06:42
pues es un comentario y por lo tanto de esta forma no aparecería el círculo
00:06:47
que luego nos puede interesar que aparezca después
00:06:51
bien, para terminar este primer video tutorial
00:06:54
pues cuando instaláis Processing tenéis ejemplos
00:06:59
que podéis visualizar
00:07:03
y bueno, aquí tengo ya algunos seleccionados
00:07:08
para que podáis ver un programa
00:07:11
de lo que se puede llegar a hacer en Java
00:07:13
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
- Autor/es:
- Javier Magro Godoy
- Subido por:
- Francisco Javier M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 44
- Fecha:
- 15 de mayo de 2023 - 21:21
- Visibilidad:
- Público
- Centro:
- Sin centro asignado
- Duración:
- 07′ 34″
- Relación de aspecto:
- 2.01:1
- Resolución:
- 1354x672 píxeles
- Tamaño:
- 11.83 MBytes
