Siempre creciendo, siempre aprendiendo. Cultura Maker.

Ratio: 0 / 5

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado
 

Iniciamos hoy  una nueva serie de artículos cuyo objetivo es orientar un poco a nuestros estudiantes al mundo de la programación dentro de nuestro entorno educativo, dependiente de la actual legislación española, donde se hacen muchísimas referencias mediante criterios de evaluación y estándares de aprendizaje a las capacidades que el alumno debería desarrollar, pero desde la que se dan muy pocas directrices sobre los procedimientos a seguir o los contenidos que habría que trabajar.

Lo que os vais a encontrar aquí es un conjunto de conceptos concretos relacionados con la programación informática en general, acompañados de ejemplos prácticos que os ayudarán a entender la teoría que vayáis leyendo, utilizando un lenguaje con una curva de aprendizaje muy suave, con mucho potencial visual y que además puede utilizarse en varias plataformas: Processing.

 Según su página, www.processing.org , Processing supone un entorno de programación flexible y un lenguaje orientado a aprender a programar en el contexto de las artes visuales. Yo añadiría que, como lenguaje de programación, es muy sencillo y rápido de aprender, de modo que nuestros alumnos pueden comprobar de modo inmediato el efecto de las órdenes que van tecleando, al tiempo que les anima a experimentar con sus propias modificaciones, fomentando así un ambiente de aprendizaje significativo.

Así que vamos a iniciarnos en el conjunto de conceptos teóricos que se suelen explicar en programación (declaración de funciones, variables, retorno de valores, etc...) utilizando Processing como herramienta práctica. Podéis descargaros la última versión en la página de Processing:

 

 

 

 Una vez lo hayáis descargado y extraído en una carpeta de vuestra elección, podéis ejecutarlo fácilmente.

 

Primeros pasos con Processing.

 

Cuando arranque Processing por primera vez, te encontrarás una pantalla como ésta:

processingtuto1a

 

Como puedes ver,  he señalado cuatro zonas concretas de la ventana que se te abre:

  1. La zona principal, donde escribes tu código
  2. Lo que he denominado "Modo de salida" se refiere al modo en que quieres que Processing interprete tu código. La salida por defecto es "Java", que hará que tu código se ejecute como tal, en una ventana que se abrirá en cuanto pulses "Play".
  3. El botón Play, obviamente, ejecutará tu código.
  4. Aunque puedes cerrar simplemente la ventana que se te abra al darle al Play, el botón Stop está pensado para que cierres la ventana cuando quieras terminar la ejecución del programa.

Estamos a punto de empezar a programar, pero antes tienes que saber que:

  • No debes olvidar cerrar todos los comandos que introduzcas con el punto y coma ; de lo contrario, al ejecutar la consola te dará un error.
  • Una rutina/función (después aclararemos esto) es un conjunto de instrucciones que se ejecuta en orden, una detrás de otra. Las órdenes de una rutina van entre llaves {}. En Processing debe haber, en principio, dos grandes rutinas: setup (que ejecutará UNA SOLA VEZ las instrucciones que especifiques entre sus llaves) y draw (que ejecutará en bucle las órdenes que introduzcas, esto es, cuando llegue a la orden final, volverá a empezar por la primera, y así varias veces por segundo, hasta que interrumpas el programa con stop.
  • Tanto setup como draw van precedidas de la palabra void, que viene a significar que son funciones que no van a retornar valores. También van seguida de paréntesis vacíos, ( ), lo que significa que no necesitan parámetros para ejecutarse. No te preocupes de momento, tiempo habrá de complicarse la vida.
  • Los comentarios van precedidos de //, no son ejecutados por el intérprete de comandos y se ponen, simplemente, para dar información a cualquiera que lea el programa.

¿Estás listo pues?. ¡Creemos entonces nuestro primer programa!. Para ello, teclea:

 

void setup(){
//No hago nada
}
void draw(){
//Aqui tampoco hago nada
}

Si así lo hicieres, el Dios de la Informática te lo premiare con una ventanita como ésta:

 

processingtuto1b

 

Ridículo, ¿verdad?. ¿Qué ha pasado?. Pues nada. Has introducido un código vacío (salvo los dos comentarios), así que Processing se limita a crear la mínima ventana posible, y arreando. ¿Qué querías que saliera?, ¿el Call of Duty?. Aún te queda mucho, joven Padawan.

Vamos a empezar a introducir nuestro propio código con dos comandos:

  • size(x,y): Indica el tamaño de la ventana, de x píxeles de ancho por y píxeles de alto. Por ejemplo, size(800,600); abriría una ventana de 800x600
  • background(rojo,verde,azul); indica el color de que queremos pintar el fondo de la ventana. Pondremos valores entre 0 (nada) y 255 (color a tope) para indicar la cantidad de rojo, verde y azul que participarán en el color de salida. Por ejemplo, background(255,0,0); me daría una ventana roja, mientras que background (255,0,100); me daría un bonito color rosita (rojo a tope, y algo menos de la mitad de azul).
void setup(){
size(800,600);
background(255,255,255); } void draw(){ //Aqui tampoco hago nada }

Este código, por ejemplo, te devolverá una pantalla de color totalmente blanco. Yo, personalmente, optaré por esta opción durante la mayor parte de estos artículos, más que nada por claridad de contraste.

Dibujos estáticos y animación.

Una vez que ya sabes dar un tamaño y color de fondo a la ventana, es el momento de aprender más comandos. Para dibujar, debes tener en cuenta que trabajaremos según un sistema de coordenadas x,y, donde el origen de coordenadas será el punto superior izquierdo de la ventana. De izquierda a derecha, la x irá creciendo. De arriba a abajo (contrariamente a como estamos acostumbrados en clase de Mates), es la y la que crecerá. ¡Vamos allá!.

  • line(x1,y1,x2,y2); dibuja una linea desde el punto (x1,y1) al punto (x2,y2).
  • rect (x,y,ancho,alto); toma como referencia el punto (x,y) y dibuja un rectángulo de las dimensiones que especifiquemos.
  • ellipse(x,y,dh,dy); dibuja una elipse con centro en (x,y), de diametro horizontal dh  y diámetro horizontal dy. Si queremos círculos, entonces, rx debe ser igual a ry.

Supongamos, por ejemplo, que tienes una ventana de 800x600; dibujemos las diagonales de la pantalla al mismo tiempo que un rectángulo que contenga a la elipse:

 

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
  line(0,0,800,600);
  line(0,600,800,0);
  rect(350,250,100,100);
  ellipse(400,300,100,100);
}

 

tutoProcessing1c 

 Fijaos en el detalle de que al dibujar rectángulo y círculo después de las líneas, éstas se ven tapadas por las dos últimas figuras. Eso es porque el programa está cumpliendo los comandos que le hemos dictado en orden y las figuras son, por definición, opacas. Prueba a cortar y pegar los dos comandos line después de rect y ellipse y verás que ahora las líneas aparecen enteras, por encima de las otras dos figuras.

Por si te interesa, existen dos comandos con dos subvariaciones que te permitirán establecer color de trazo (stroke) y color de rellenado de las figuras (fill), o quitar el trazo (noStroke()), o dibujar figuras huecas (noFill()). ¡Probemos las distintas variaciones en este otro código!:

 

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
  //dibujamos una elipse de trazo rojo y fondo verde
stroke(255,0,0);
fill(0,180,0);
ellipse(400,300,50,100);
//dibujamos un rectangulo de trazo azul y fondo transparente
stroke(0,0,210);
noFill();
rect(400,250,100,75);
//dibujamos un triangulo SIN TRAZO y de fondo rojo
noStroke();
fill(255,0,0);
triangle (350,300,400,300,300,200);
}

 

processingtuto1d

 

Para acabar esta sección, vamos a hablar de lo que se denominan variables de sistema. Aunque hablaremos de variables en el próximo artículo, nos referiremos aquí a ciertos valores que Processing está teniendo en cuenta durante todo su funcionamiento como entorno de programación. Prueba este código sencillito en tu ordenador:

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
 line(0,0,mouseX,mouseY);
}

 

Verás un efecto muy chulo: como draw se ejecuta en bucle varias veces por segundo, verás una serie de líneas que se van dibujando a medida que movemos el ratón. Esto es porque a cada nueva ejecución de draw, las coordenadas mouseXmouseY están cambiando, de modo que se dibujan líneas desde el origen de coordenadas (0,0), hasta la posición del ratón (mouseX,mouseY) en cada momento:

 

processingtuto1e 

Prueba este otro ejemplo y mueve el ratón por la pantalla. Yo lo llamo el ojo de Buda:

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
 ellipse(400,300,mouseX,mouseY);
}

Como ves, las posibilidades son infinitas. ¿Por qué no pruebas tú tus propios ejemplos?. ¡Seguro que obtienes efectos espectaculares!

 

processingtuto1f

 

Animaciones limpias. Background en setup() o en draw().

Para obtener animaciones limpias, recordemos el principio de los dibujos animados: cuando los vemos en una pantalla, sabemos que son una secuencia de dibujos estáticos que se van superponiendo a suficiente velocidad como para darnos la ilusión del movimiento. Es decir:

  1. Ponemos el dibujo 1 durante x décimas de segundo
  2. Quitamos el dibujo (borramos)
  3. Ponemos el dibujo 2 (muy parecido al dibujo 1) durante x décimas de segundo
  4. Quitamos el dibujo 2
  5. Etc...

En Processing, lograremos ese mismo efecto poniendo el background(rojo,verde,azul); al principio de la función draw(), en lugar de en setup(); así lograremos que al iniciar de nuevo cada bucle, vuelva a rellenar la pantalla del color de fondo especificado, borrando así lo dibujado durante el bucle anterior.

Un ejemplo: queremos dibujar un círculo de radio 50 que se mueva por pantalla siguiendo las coordenadas del ratón:

void setup(){
  //En setup especificamos solamente el size de la ventana
size(800,600); 
}
void draw(){
  //borramos todo
  background(255,255,255);
  //dibujamos el nuevo circulo
 ellipse(mouseX,mouseY,50,50);
}

¡Ojo! Si pones el background al final de draw, en lugar de al principio, verás que obtienes una pantalla vacía. Esto es así porque invertirías las órdenes: en lugar de borrar lo anterior y luego dibujar, empezarías dibujando y luego borrarías antes de iniciar el siguiente bucle.

processingtuto1g

 

¡Y eso es todo por ahora!

Por ahora, creo que cuentas con suficientes conceptos para iniciar tu propio programa en Processing y puedas crear tus propios códigos buscando distintos efectos visuales, iniciándote así mediante la experimentación práctica al razonamiento lógico que exige cualquier trabajo de programación. El próximo día trabajaremos con variables. Si te ha quedado alguna duda, puedes repasar el video-resumen que te pongo a continuación, o también me la puedes plantear en los comentarios.

¡Y eso es todo por hoy!. ¡Sed felices!. ¡Seguid creciendo!. ¡Seguid aprendiendo!. ¡Cultura maker!

 

 

Comparte este post

Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedInEnviar a Menéame

Comentarios   

0 #2 paintball 17-09-2017 15:54
I'm really inspired with your writing abilities as well as
with the structure in your weblog. Is this a paid theme or did you customize it yourself?
Either way stay up the nice quality writing, it is uncommon to peer
a great weblog like this one today..
Citar
0 #1 broderie 17-09-2017 07:31
If you desire to obtain a good deal from this post then you have to
apply such strategies to your won webpage.
Citar

Escribir un comentario


Código de seguridad
Refescar

Mientras navegas por esta web, posiblemente interactuemos con tu equipo mediante el uso de cookies. La actual legislación de la UE (European Union) me obliga a informarte de ello, caminante. We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of this site have already been set. To find out more about the cookies we use and how to delete them, see our privacy policy.

  I accept cookies from this site.
EU Cookie Directive Module Information