//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;
    }
}