Diagrama de temas

  • Serpiente Roja


    • En este miniproyecto vas a aprender a programar un objeto que se mueve en la pantalla y va dejando rastro del movimiento del ratón. Iremos escribiendo el código paso por paso, añadiendo nuevas funcionalidades en cada uno.

      1. Dibuja un círculo

        Empezaremos dibujando un círculo rojo.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        /*
* _01_Red_Snake
* 
* How to program a moving object leaving traces of the mouse movement on the screen. 
*       
* (c) 2013-2016 Arduino LLC.
*/
 
void setup() {
  size(400, 400);
}

void draw() {
  noStroke();                // Draw borderless shapes
  fill(255, 0, 0);           // Fill shapes with pure red color
  ellipse(100, 100, 30, 30); // Circle of 30 pixels diameter
}
        source: http://verkstad.cc/urler/ctc-g-b1-p-1-1

        Resultado

        Se dibuja un círculo en las misma posición una y otra vez mientras el programa esté ejecutándose.

        Comandos

        • noStroke(): Se emplea para no dibujar el contorno de las siguientes figuras.
        • fill(red, green, blue): Establece el color utilizado para rellenar las siguientes figuras. Cada color (red, green, blue) puede ser un color entre 0 y 255.

        Comandos relacionados:

        • size(ancho, alto): Establece el tamaño de la ventana del programa en píxeles.
        • ellipse(x, y, diametroX, diametroY): Dibuja un elipse con centro en x,y. El tamaño se establece con diametroX y diametroY. Cuando estos dos parámetros son iguales, el resultado es un círculo.

        Cómo funciona

        • Se establece el tamaño de la ventana a 400 x 400 píxeles en la función setup().
        • En la función draw(), se llama a la función noStroke() para dibujar las figuras sin contorno.
        • Se configura el color para rellenar las figuras a rojo.
        • Se dibuja un circulo en las coordenadas (100, 100) con un diámetro x e y de 30 píxeles. Debido a la configuración anterior, el círculo será rojo y sin contorno.
        • Repite la función draw() y como no hay ningún cambio en ningún parámetro el programa se comporta de forma estática.

      2. Haz que el círculo se mueva

        En este paso haremos que el círculo se mueva con el ratón, dejando un rastro en la pantalla.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        /*
* _01_Red_Snake
* 
* How to program a moving object leaving traces of the mouse movement on the screen. 
*       
* (c) 2013-2016 Arduino LLC.
*/
 
void setup() {
  size(400, 400);
}

void draw() {
  noStroke();             
  fill(255, 0, 0);          
  ellipse(mouseX, mouseY, 30, 30); // Circle's placement following the mouse pointer
}
        source: http://verkstad.cc/urler/ctc-g-b1-p-1-2

        Resultado

        En este paso lo que hemos hecho ha sido reemplazar las coordenadas del círculo por mouseX y mouseY. El punto rojo sigue ahora al ratón, haciendo que el programa se comporte como una aplicación de dibujo cualquiera.

        Cómo funciona

        • Cada vez que se ejecuta la función draw(), las coordenadas de la elipse se sitúan en mouseX y mouseY haciendo que el círculo siga el puntero del ratón.
        • Como el fondo no se pinta de nuevo en cada iteración, cada círculo permanece en la pantalla dejando su trazo.

      3. Cambia gradualmente el color

        En este paso haremos que el color cambie mientras se ejecuta el programa, y para hacerlo, emplearemos una variable para el color en lugar de un número constante.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        /*
* _01_Red_Snake
* 
* How to program a moving object leaving traces of the mouse movement on the screen. 
*       
* (c) 2013-2016 Arduino LLC.
*/

int red = 255;
 
void setup() {
  size(400, 400);
}

void draw() {
  noStroke();             
  fill(red, 0, 0);          
  ellipse(mouseX, mouseY, 30, 30); // Circle according to the mouse coordinates
}
        source: http://verkstad.cc/urler/ctc-g-b1-p-1-3

        Resultado

        Como ves, este programa produce el mismo resultado que el programa del paso anterior solo que está vez empleamos una variable para definir el color.

        Cómo funciona

        • Antes de la función setup(), se declara una variable tipo integer (red) y se inicializa a 255.
        • Cuando configuramos el color en la función draw(), empleamos la variable red en lugar del número 255.

      4. Cambia gradualmente el color II

        El cambio de color puede hacerse de diferentes maneras. El color puede cambiar entre 0 y 255 (negro y rojo respectivamente). En este paso se muestra como reducir la cantidad de rojo cada vez que se ejecuta la función draw().

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        /*
* _01_Red_Snake
* 
* How to program a moving object leaving traces of the mouse movement on the screen. 
*       
* (c) 2013-2016 Arduino LLC.
*/
 
int red = 255;
 
void setup() {
  size(400, 400);
}

void draw() {
  red = red - 1;            // Make the red a little darker
  if (red < 0){
    red = 255;                 // Once it reaches black, make it light red again
  }
  
  noStroke();             
  fill(red, 0, 0);          
  ellipse(mouseX, mouseY, 30, 30); 
}
        source: http://verkstad.cc/urler/ctc-g-b1-p-1-4

        Resultado

        Como ves, esta vez el color del círculo varía mientras se ejecuta el programa.

        Comandos

        • if( test ){ statements }: Comprueba si la condición (test) es cierta. Si lo es, se ejecuta el código entre llaves. Si no lo es, el programa salta y el ejecuta el código después de las llaves.En este ejemplo, si rojo es menor que 0. Si es así, los statements entre llaves son ejecutados. En este ejemplo, establece red a 255 de nuevo. Si por el contrario, test es falso, el programa procede a ejecutar el código después de las llaves. Utilizando declaraciones "if" te permite decir al programa que código ejecutar

        Cómo funciona

        • En la función draw() se resta una unidad a la variable red, red = red-1. La primera vez que la función draw() se ejecuta, la variable red valdrá 254.
        • Empleando el símbolo < o "menor que", la sentencia if comprueba si red es menor que 0. La primera vez que la función draw() se ejecuta, esto será falso.
        • El color para rellenar las figuras se configura con la variable red, esta vez un poco más oscuro que en el paso anterior, fill(254, 0, 0).
        • Con cada iteración de la función draw(), red estará más cerca de valer 0, haciendo el color cada vez más oscuro.
        • En la iteración 255, al restar 1 a la variable red, esta valdrá 0.
        • La condición sigue siendo falsa ya que 0 no es menor que cero.
        • Se configura el color de relleno a negro, fill(0, 0, 0).
        • En la iteración 256 de la función draw(), al restar 1 de la variable red esta valdrá -1.
        • La sentencia if es cierta, -1 es menor que 0.
        • Se ejecuta el código entre llaves, haciendo que la variable red valga 255 de nuevo.
        • Se configura el color de relleno a rojo, fill(255, 0, 0).

      5. Usa la función sin()

        En el paso anterior, el color cambia bruscamente de negro a rojo. Para cambiar los colores gradualmente, utilizaremos una función sinusoidal que oscile continuamente entre negro y rojo.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        /*
* _01_Red_Snake
* 
* How to program a moving object leaving traces of the mouse movement on the screen. 
*       
* (c) 2013-2016 Arduino LLC.
*/

int red = 255;
int time = 0;
 
void setup() {
  size(400, 400);
}

void draw() {
  time = time + 1;  // Increase time in one unit
  red = int(128 * (1 + sin(time * 2 * PI / frameRate / 20)));  // Change the color red, repeat every 20s
  
  noStroke();             
  fill(red, 0, 0);          
  ellipse(mouseX, mouseY, 30, 30); 
}
        source: http://verkstad.cc/urler/ctc-g-b1-p-1-5

        Resultado

        El color de la serpiente cambia gradualmente entre negro y rojo continuamente. Esto se debe a que el color se establece con una función senoidal dependiendo de la frecuencia de ejecución del programa (framerate) y la variable time que cuenta las veces que draw() se ha ejecutado.

        Comandos

        • int(data): Convierte diferente tipos de datos a enteros. int( 2.545 ) devuelve 2, int( 233.9999 ) devuelve 233, etc..
        • frameRate: Es una variable que da el framerate (frecuencia de ejecución) del programa. Es decir, cuantas veces por segundo se ejecuta.
        • PI: Es una variable constante que contiene el valor del número π (3.14).
        • sin( angle ): Esta función se utiliza para calcular el seno de un ángulo. El parámetro angle está en radianes y por tanto puede ser un valor de 0 a 2π (6.28). El valor que esta función devuelve oscila gradualmente entre -1 y 1 con la variación del ángulo como se muestra a continuación:
          • sin( 0 ) = 0
          • sin( π/2 ) = 1
          • sin( π ) = 0
          • sin( π + π/2 ) = -1
          • sin( 2π ) = 0
          • sin( 2π + π/2 ) = 1

        Cómo funciona

        • Se calcula en valor de la variable red con esta línea de código: red = int(128 * (1 + sin(time * 2 * PI / frameRate / 20)))
        • Esto es lo que sabes por ahora: La variable para el color (red) debe ser un número entre 0 y 255. La función sin( angle ) devuelve un valor entre -1 y 1 dependiendo del parámetro angle.
        • Necesitarás: 1, el resultado final del calculo en un rango de 0 a 255; y 2, el valor para pasarle a la función sin(). El ángulo tiene que aumentar una cantidad que se adapte a las necesidades del ejercicio.
        • Se declara la variable entera time al principio del programa.
        • Cada vez que la función draw() se ejecuta, la variable time se incrementa 1. De esta forma, puedes emplear esta variable en la función sin().
        • Veamos el calculo de la variable red más en detalle:
          • El valor que devuelve la función sin(time) oscila entre -1 y 1, pero oscila demasiado rápido.
          • En cambio, sin( time * 2 * PI / frameRate / 20) oscila con un intervalo de 20 segundos.
          • 1 + sin( time * 2 * PI / frameRate / 20) proporciona un valor que oscila entre 0 y 2.
          • 128 * ( 1 + sin( time * 2 * PI / frameRate / 20) ) proporciona un valor que oscila entre 0 y 255 (128*0 = 0 and 128*2 = 255).
          • El resultado es un número decimal, por tanto se convierte a entero con int(). int( 128 * ( 1 + sin( time * 2 * PI / frameRate / 20) ) )
        • Igual que antes, red se emplea para configurar el color de relleno.

      6. Cambiando de forma

        El este paso cambiarás la forma de la serpiente. Esto se consigue fácilmente cambiando el tamaño del círculo, utilizando también una función senoidal.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        /*
* _01_Red_Snake
* 
* How to program a moving object leaving traces of the mouse movement on the screen. 
*       
* (c) 2013-2016 Arduino LLC.
*/
 
int red = 255;
int time = 0;
int diameter = 50;
 
void setup() {
  size(400, 400);
}

void draw() {
  time = time + 1;     
  red = int(128 * (1 + sin(time * 2 * PI / frameRate / 20))); 
  diameter = int(50 * (1 + sin( time * 2 * PI / frameRate / 5))); // Change the circle's diameter with the time
  
  noStroke();             
  fill(red, 0, 0, 50);  // Add a 50% transparency to the color
  ellipse(mouseX, mouseY, diameter, diameter); 
}
        source: http://verkstad.cc/urler/ctc-g-b1-p-1-6

        Resultado

        La serpiente cambia ahora su tamaño y color continuamente. Calculamos el tamaño con una nueva variable, diameter cada vez que draw() se ejecuta.

        Comandos

        • fill(red, green, blue, alpha): añadimos un cuarto parámetro (alpha) a la función fill(). Esto establece la transparencia del color. Su rango va de 0 a 255.

        Cómo funciona

        • Se declara la variable entera diameter.
        • En la función draw(), se calcula el valor de la variable diameter con esta línea de código: int(50 * (1 + sin( time* 2 * PI / frameRate / 5))) lo que hace que oscile entre 0 y 100 en intervalos de 5 segundos.
        • Se configura el color de la serpiente con una transparencia de 50.
        • El diámetro se configura con la función diameter.

      ¡Sigue experimentando!


      • La modificación más sencilla que puedes hacer es cambiar el color de la serpiente. Puede ser tan fácil como mover la variable red al segundo o tercer parámetro de la función fill().
      • Puedes también añadir otras variables para cambiar los otros parámetros del color de forma independiente.