Abro aquí una breve serie de entradas sobre una herramienta muy sencilla para mapear proyecciones sobre superficies poligonales. Evidentemente no se trata de nada que intente emular las herramientas profesionales que existen, sino más bien un juguetillo que nos permita moldear la forma de una o varias pantallas para ajustarse a la de la superficie sobre la que se proyecta.
La idea es usar clips de vídeo o programas de Processing como texturas que se aplicarán a un polígono cuyas esquinas puedan cambiar de posición al arrastrarlas con el ratón.
Empecemos por crear el polígono editable, al que llamaremos ‘pantalla’.
Aquí va el código (NOTA: Processing 3.0 se publicó justo después de que escribiera los programas de este tutorial. Están realizados para 2.2.1. Donde es necesario indico qué cambios hay que hacer para que funcione en la versión 3):
//VARIABLES
//Vértices de la pantalla
//Definimos las coordenadas de cada vértice
PVector v1 = new PVector(10,10);
PVector v2 = new PVector(390,10);
PVector v3 = new PVector(390,390);
PVector v4 = new PVector(10,390);
//¿Arrastrar y soltar?
/*Creamos estas 4 variables para indicar
si hay que mover los vértices*/
boolean _v1, _v2, _v3, _v4 = false;
//SETUP
/*Descomentar el bloque siguiente
si estás usando la versión 3.0 */
/* Processing 3.0
void settings(){
size(600, 600, P2D);
}
*/
void setup() {
//Comentar la línea siguiente sii usas 3.0
size(400, 400, P2D);
//
background(0);
stroke(255);
}
void draw() {
background(0);
fill(0);
/*Insertamos la función 'pantalla',
que definiremos luego*/
pantalla();
fill(255);
text("Arrastra las esquinas", 20, 40);
}
/*Esta función crea un cuadrilátero
que toma sus coordenadas de las variable PVector
que definimos al principio*/
void pantalla(){
// Cuadrilátero
beginShape(QUADS);
vertex(v1.x,v1.y);
vertex(v2.x,v2.y);
vertex(v3.x,v3.y);
vertex(v4.x,v4.y);
endShape();
testMouseOver();
}
/*Esta función comprueba si el cursor está
sobre una esquina del cuadrilátero*/
void testMouseOver(){
//Si está cerca de la primera esquina...
if (mouseX>v1.x-5 && mouseX<v1.x+5 && mouseY>v1.y-5 && mouseY<v1.y+5) { //... cambia el cursor... cursor(HAND); //... dibuja un círculo... ellipse(v1.x, v1.y, 5, 5); //... y avisa de que está. _v1 = true; } //Igual para la segunda esquina else if (mouseX>v2.x-5 && mouseX<v2.x+5 && mouseY>v2.y-5 && mouseY<v2.y+5) { cursor(HAND); ellipse(v2.x, v2.y, 5, 5); _v2 = true; } //Igual para la tercera else if (mouseX>v3.x-5 && mouseX<v3.x+5 && mouseY>v3.y-5 && mouseY<v3.y+5) { cursor(HAND); ellipse(v3.x, v3.y, 5, 5); _v3 = true; } //Igual para la cuarta else if (mouseX>v4.x-5 && mouseX<v4.x+5 && mouseY>v4.y-5 && mouseY<v4.y+5) {
cursor(HAND);
ellipse(v4.x, v4.y, 5, 5);
_v4 = true;
}
//Si no está sobre las esquinas...
else {
//... el cursor es una flecha...
cursor(ARROW);
//... y avisa.
_v1 = false;
_v2 = false;
_v3 = false;
_v4 = false;
}
}
/*Esta función mueve cada esquina del cuadrilátero
si se hace clic sobre ellas*/
void mouseDragged(){
if (_v1 == true) {
v1.x = mouseX;
v1.y = mouseY;
}
else if (_v2 == true) {
v2.x = mouseX;
v2.y = mouseY;
}
else if (_v3 == true) {
v3.x = mouseX;
v3.y = mouseY;
}
else if (_v4 == true) {
v4.x = mouseX;
v4.y = mouseY;
}
}
En el próximo capítulo de este tutorial incorporaremos una textura animada al cuadrilátero.
