point()

punto
Lo básico total: dibujemos un punto en las coordenadas 50, 50 de una ventana (partiendo de la esquina superior izquierda, 50 píxeles a la derecha y 50 píxeles abajo).

point(50,50);


Miradlo ahí, en el centro del recuadro gris que aparece abajo. Ese miserable píxel negro es el origen de todo.

Si observáis la estructura de la instrucción que hemos pasado a Processing, es esta:

función(dato, dato);

La función point() dibuja un punto en las coordenadas x e y definidas entre paréntesis.

Hay otras formas de conseguir lo mismo:

point(width/2, height/2);

Las coordenadas x e y no son dos cifras, como antes. width es una variable que contiene un dato: la anchura de la ventana donde se ejecuta nuestro programa. height hace lo mismo con la altura. Si preferimos que Processing calcule las coordenadas del punto cental en lugar de hacerlo nosotros, basta pedir que divida por dos esos datos. Esto es útil cuando no estamos seguros de cuáles serán las dimensiones finales de la ventana o para dividir el espacio en partes iguales:

point(width*0.25, height/2);
point(width*0.5, height/2);
point(width*0.75, height/2);

En este caso dibujamos tres puntos cuyas coordenadas x son, respectivamente, 1/4, 1/2 y 3/4 de la anchura de la ventana. Sus coordenadas y son, en los tres casos, la mitad de la altura.

Variables

¿No os parece que debería haber una forma de evitar tener que repetir height/2 cada vez? Pues la hay: las variables. Una variable es un lugar donde guardamos un dato. Por ejemplo, si la coordenada y de una serie de puntos va a ser height/2 podemos decir:

float y = height/2;
point(width*0.25, y);
point(width*0.5, y);
point(width*0.75, y);
  • float indica a Processing que el tipo de dato que vamos a almacenar en la variable es un número decimal.
  • y es el nombre de la variable. Puede ser cualquiera: ‘y’, ‘altura’, cualquiera que nos ayude a recordarlo más adelante
  • height/2 es el valor que vamos a almacenar en la variable y. Al definir los puntos, cuando asignamos ‘y’ a la segunda coordenada del punto, le estamos pasando en cada caso el valor ‘height/2’

Las variables serán de gran utilidad en el próximo artículo, cuando introduzcamos la animación.

Color y grosor del trazo

Aunque la función point() sólo admite como datos sus coordenadas, a cualquier elemento que dibujemos le podemos modificar el grosor del trazo, su color, su transparencia y, si lo tiene, su relleno.

//color del trazo en hexadecimal
stroke(#336699);
//grosor del trazo en píxeles
strokeWeight(5);
 
//tres puntos
point(width*0.25, height/2);
point(width*0.5, height/2);
point(width*0.75, height/2);
 
//Por cierto, todo lo que aparezca precedido por // es un comentario
//Processing no los interpreta
//Es para pasarnos notitas los humanos.

Las funciones stroke() y strokeWeight() afectan a todos los elementos definidos después de ellas, a menos que una nueva función las sobreescriba:

//grosor del trazo
strokeWeight(5);
//color
stroke(#336699);
//punto
point(width*0.25, height/2);
//otro color
stroke(#669933);
//otro punto
point(width*0.5, height/2);
//otro color
stroke(#993366);
//y otro punto
point(width*0.75, height/2);

¡En 3d!

Hasta ahora hemos hecho como si el punto sólo admitiese dos coordinadas: horizontal (x) y vertical (y). En realidad admite una tercera: la profundidad (z).

//primero indicamos que vamos a usar 3D
size(100,100,P3D)
//grosor
strokeWeight(5);
//cuatro puntos
point(width*0.25, height*0.25, 0);
point(width*0.75, height*0.25, 0);
point(width*0.25, height*0.75, 0);
point(width*0.75, height*0.75, 0);
//otros cuatro
point(width*0.25, height*0.25, -50);
point(width*0.75, height*0.25, -50);
point(width*0.25, height*0.75, -50);
point(width*0.75, height*0.75, -50);

Como se ve, la tercera coordenada de cada punto tiene un valor negativo: 50 píxeles hacia el fondo. Esos ocho puntos definirían los vértices de un cubo de 50 píxeles de arista. Además hemos introducido una nueva función: size(), que define las dimensiones de la ventana en la que se ejecutará nuestro programa (en píxeles), y permite además indicar qué renderer vamos a usar (P3D en este caso).

¿Y en movimiento?

Venga, no nos hemos metido en P5 para dibujar puntos por coordenadas. Queremos animación, interactividad y todo lo guay que vemos visto por ahí.

Pues tenéis toda la razón, pero para eso tenemos que hablar antes de la función draw(). Será en el próximo capítulo.

Documentación:

Leave a Comment.