processing js

[piero40]

Ciao a tutti voi, non conosco bene la struttura dei file PD di processing js.
Ho questo script che desidererei modificare.
Attualmente attraverso questo file collegato ad altro script e database, vengono disegnati sul video dei quadratini di colore verde che al click del mouse vengono selezionati e diventano di colore giallo.
Ho bisogno di sostituire i quadratini che cambiano colore con 2 immagini di piccole dimensioni, chi di voi può aiutarmi?.
Grazie in anticipo.

int k, rows, cols;
Seat[] seats;


void setup()
{
    size(1420,400);    //dimensione del riquadro mappa locale
    frameRate(30);
        
    quanti = mappa.length;
    seats = new Seat[quanti];


    k = 0;
    
    // STALLS
    rows = 3;
    cols = 10;
    Xoff = 80;
    Yoff = 120; //distanza dal bordo superiore
    
    for(i=0; i<rows; i++)
    {
        for(j=0; j<cols; j++)
        {
            seats[k] = new Seat(Xoff+j*33, Yoff+i*33, mappa[k]); //distanza tra i tavoli
            k++;
        }
    }
    
    // GALLERY
    rows = 3;
    cols = 5;
    Xoff = 135;
    Yoff = 240; //distanza dal bordo superiore
    
    for(i=0; i<rows; i++)
    {
        for(j=0; j<cols; j++)
        {
            seats[k] = new Seat(Xoff+j*33, Yoff+i*33, mappa[k]); //distanza tra i tavoli
            k++;
        }
    }
}


void draw()
{
    background(#F2FAFB);


    // Disegno pianta locale
    stroke(255);
    fill(0);
    rect(80, 20, 630, 40);
    background(#F2FAFB);    
    fill(#000000);
//    fill(255,0,0);    
    PFont fontA = loadFont("verdana");  
    textFont(fontA, 16);
    
    string palco = '~ PIANTA DEL LOCALE ~';
    float cw = textWidth(palco);
    
    text(palco, 80+((730-cw)/1), 45);
    
    
    // display seats
    for(i=0; i<quanti; i++)
    {
        seats[i].display();
    }
    
    boolean atLeastOne = false;


    // loop che individua dove si trova il puntatore del mouse
    for(i=0; i<quanti; i++)
    {
        if(seats[i].over())
        {
            seats[i].update();
            
            atLeastOne = true;
        }
    }
    
    if(atLeastOne)
        cursor(HAND);
    else
        cursor(ARROW);
}




void mouseClicked()
{
    // loop per individuare l'elemento cliccato
    for(i=0; i<quanti; i++)
    {
        if(seats[i].over())
        {
            seats[i].press(i);
        }
    }
}




class Seat
{
    int x, y;
    int size;
    color clrFree, clrSelected, clrTaken, currentcolor;
    boolean isOver = false;
    boolean isSelected = false;
    boolean isTaken = false;
    
    HashMap config;


    Seat(int ix, int iy, HashMap iconfig) 
    {
        x = ix;
        y = iy;
        size = 30; //dimensione tavolo
        clrFree = color(0,255,0);
        clrSelected = color(255,255,0);
        clrTaken = color(255,0,0);
        
        config = iconfig;
        
        switch(config.status)
        {
            case "L":
                currentcolor = clrFree;
                break;
                
            case "O":
                currentcolor = clrTaken;
                isTaken = true;
                break;
        }
        
        if(config.selected==1)
        {
            currentcolor = clrSelected;
            isSelected = true;
        }
    }
    
    void display() 
    {
        stroke(currentcolor);
        fill(currentcolor);
        
        rect(x, y, size, size);
    }
    
    void update() 
    {
        over();
        
        // imposta il colore degli elementi selezionabili
        if(isSelected)
        {
            currentcolor = clrSelected;
        }
        else if(isTaken)
        {
            currentcolor = clrTaken;
        }
        else
        {
            currentcolor = clrFree;
        }
    }


    /**
     * imposta lo stato dell'elemento selezionato
     */
    boolean over()
    {
        if(isTaken)
        {
            isOver = false;
            return false;
        }
        if (mouseX >= x && mouseX <= x+size && 
            mouseY >= y && mouseY <= y+size)
        {
            showDetails();
            isOver = true;
            return true;
        } 
        else
        {
            isOver = false;
            return false;
        }
    }
    
    /**
     * Box informazioni che si apre sull'elemento nel quale viene posizionato il puntatore del mouse
     */
    void showDetails()
    {
        stroke(255);
        fill(#ffffff);    //colore del box informazioni elemento    
//        fill(0);
        rect(x-size-45, y-size-70, 185, 80); //dimensione del box informazioni elemento
        fill(#000000);    //colore del triangolo puntatore del box informazioni        
        triangle(x+(size/2), y,  x+(size/2)+15, y-10,  x+(size/2)-15, y-10);
        
//        stroke(0);
    


        line(x+(size/2)+14, y-10,  x+(size/2)-14, y-10);
        line(x+(size/2)+14, y-11,  x+(size/2)-14, y-11);
        
        int x1 = x-40;
        int y1 = y+size+10;
        int x2 = x+100;
        int y2 = y+size+90;




        PFont fontA = loadFont("verdana");  
        textFont(fontA, 14);
    
        int xtxt = x-size-35;
        int ytxt = y-size-45;


        fill(#000000);        
//        fill(255,0,0);
        text(config.settore+" ~ Num. "+config.fila+" ~ "+config.numero, xtxt, ytxt);


        fill(#000000);        
//        fill(255);
        text("Prezzo ~ "+config.intero+" ~ €", xtxt, ytxt+25);
        text("Tavolo da ~ "+config.ridotto+" ~ Posti", xtxt, ytxt+40);        
    }


    /**
     * Al cllck su un elemento viene controllata l'azione da effettuare
     */
    void press(int id) 
    {
        int risp;
        
        if(isOver)
        {
            if(isSelected)
            {
                risp = check("D", id);
                if(risp==1)
                {
                    isSelected = false;
                    currentcolor = clrSelected;
                }
            }
            else
            {
                risp = check("S", id);
                if(risp==1)
                {
                    isSelected = true;
                    currentcolor = clrFree;
                }
            }
        }
    }
}