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.
-
Dibuja un círculo
Empezaremos dibujando un círculo rojo.
Código: 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.
-
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.
Código: 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.
-
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.
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.
-
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().
Código: 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).
-
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.
Código: 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.
-
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.
Código: 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.