Diagrama de temas

  • Setup y draw

    • Los programas que hemos hecho hasta ahora son llamados programas estáticos. Esto significa que nunca cambian. Se ejecutan una única vez y cuando llegan a la última línea de código, se paran. Si queremos que un programa sea interactivo, tenemos que habilitar la entrada de datos continuamente mientras el programa se ejecuta. Esto sólo es posible si la ejecución es continua.

      Con Processing, puedes crear programas que se ejecuten continuamente utilizando la función draw(). Esta función repetirá el bloque de código una y otra vez hasta que el programa se pare. Sin embargo, no todo el código escrito necesita ser repetido continuamente. Para el código que sólo necesita ser ejecutado una única vez, debes usar la función llamada setup().


      Ejemplo 1.5


      En este ejemplo, dibujarás una línea como ya hiciste en el ejemplo 1.1 pero esta vez empleando las funciones setup() y draw().

      Instrucciones

      1. Escribe y ejecuta el siguiente programa:
        2. 1
        2
        3
        4
        5
        6
        7
        8
        void setup() {
  size(300, 300);
}
 
void draw() {
  line(0 ,0, width, height);
}
        source: http://verkstad.cc/urler/ctc-g-b1-c-5

      Resultado

      Realmente no podemos ver que la línea se está dibujando una y otra vez ya que está exactamente en la misma posición todo el tiempo.

      Comandos

      • void: Se emplea cuando se declara una función que no devuelve nada.
      • void setup() { code }: El código entre llaves se ejecuta una única vez cuando el programa empieza.
      • void draw(){ code }: El código entre llaves se ejecuta una y otra vez. Se ejecuta línea por línea, de arriba a abajo hasta la última línea, donde vuelve a empezar desde el principio de la función draw().

      Comandos

      • Se establece el tamaño de la ventana a 300 x 300 píxeles. Sólo se hace una vez, al principio del programa, por ello está en la función setup().
      • Se dibuja una línea en la función draw(), de esquina a esquina de la ventana.
      • Se ejecuta de nuevo la función draw(), dibujando otra línea exactamente en el mismo sitio.
      • Repite la función draw(), dibujando una línea en cada iteración.

      Ejemplo 1.6


      En este ejemplo, aprenderás las funciones mouseX y mouseY, y entenderás mejor la función draw().

      Instrucciones

      1. Escribe y ejecuta el siguiente programa:
        2. 1
        2
        3
        4
        5
        6
        7
        8
        void setup() {
  size(300,300);
}

void draw() {
  line(0, 0, mouseX, mouseY);
}
        source: http://verkstad.cc/urler/ctc-g-b1-c-6

      Resultado

      Este programa te permite interactuar con la pantalla. Si mueves el puntero del ratón en la ventana del programa, verás que dibuja diferentes líneas. Si te fijas, se deja un rastro de líneas por donde vas moviendo el ratón, esto se debe a qué cada línea que el programa dibuja, nunca se borra.

      Comandos

      • mouseX: Devuelve la coordenada X del puntero del ratón.
      • mouseY: Devuelve la coordenada Y del puntero del ratón.

      Cómo funciona

      • Se establece el tamaño de la ventana a 300 x 300 píxeles en la función setup().
      • Se dibuja una línea en la función draw() desde las coordenadas (0, 0) hasta (mouseX, mouseY). El fin de la línea depende de dónde se encuentra el puntero del ratón.
      • Se ejecuta de nuevo la función draw(), dibujando otra línea desde (0, 0) hasta (mouseX, mouseY). Si has movido un poco el puntero del ratón, verás que está línea es diferente a la primera.
      • Repite la función draw(), dibujando una línea en cada iteración.

      Ejemplo 1.7


      En este ejemplo, vas a modificar ligeramente el ejemplo anterior. ¿Qué ocurre cuando ejecutas el nuevo programa?

      Instrucciones

      1. Escribe y ejecuta el siguiente programa:
        2. 1
        2
        3
        4
        5
        6
        7
        8
        9
        void setup() {
  size(300,300);
}

void draw() {
  background(255);
  line(0, 0, mouseX, mouseY);
}
        source: http://verkstad.cc/urler/ctc-g-b1-c-7

      Resultado

      En este caso, el rastro de líneas desaparece quedando una única línea.

      Cómo funciona

      • Se establece el tamaño de la ventana a 300 x 300 píxeles en la función setup().
      • En la función draw() se configura el color del fondo blanco.
      • Se dibuja una línea en la función draw() desde las coordenadas (0, 0) hasta (mouseX, mouseY).
      • Se ejecuta de nuevo la función draw(), pintando de nuevo el fondo de blanco. Esto reescribe cualquier cosa que hubiese en la ventana de programa, haciendo que la línea desaparezca.
      • Se dibuja otra línea desde las coordenadas (0, 0) hasta (mouseX, mouseY). Si mueves un poco el cursor del ratón, la línea nueva aparece en una posición diferente.
      • Repite la función draw(), coloreando el fondo y dibujando una línea en cada iteración.

      ¡Sigue experimentando!


      • Dibuja una elipse y modifica su diámetro con el movimiento del puntero del ratón.
      • Cambia el color del fondo según mueves el puntero del ratón.
      • Para seguir practicando, puedes ver la referencia con los Ejercicios de Processing.
      • Si quieres aprender más sobre programación y Processing, echa un vistazo al Bloque 5.