Создайте сетку, чтобы разместить фидуциалы

Question

Я совмещаю реакцию и обработку, и я хотел бы показать сетку (вроде шахматной игры), где можно разместить фидуциалы, а затем узнать, в каком месте они находятся (A3, В9 и т.д.) Я новичок на все это, и у меня есть некоторые проблемы делают это

у меня есть этот код, который создает сетку с обработкой, но как я могу emplement его работать в TuioDemo

// Number of columns and rows in our system 
int cols, rows; 

void setup() { 
    size(640,480); 

    // Initialize columns and rows 
    cols = width/videoScale; 
    rows = height/videoScale; 
} 

void draw() { 

    // Begin loop for columns 
    for (int i = 0; i < cols; i++) { 
    // Begin loop for rows 
    for (int j = 0; j < rows; j++) { 

     // Scaling up to draw a rectangle at (x,y) 
     int x = i*videoScale; 
     int y = j*videoScale; 
     fill(255); 
     stroke(0); 
     // For every column and row, a rectangle is drawn at an (x,y) location scaled and sized by videoScale. 
     rect(x,y,videoScale,videoScale); 
    } 
    } 
} 

Answer 1

Должно быть проверено, находятся ли заданные координаты x, y в пределах поля сетки. Вот простой пример, используя координаты мыши, но это может легко быть вашим фидуциальные координаты:

int cols = 4, rows = 4; 
boolean[][] states = new boolean[cols][rows]; 
int videoScale = 100; 

void setup(){ 
    size(400,400); 

} 
void draw(){ 
    // Begin loop for columns 
    for (int i = 0; i < cols; i++) { 
    // Begin loop for rows 
    for (int j = 0; j < rows; j++) { 

     // Scaling up to draw a rectangle at (x,y) 
     int x = i*videoScale; 
     int y = j*videoScale; 

     fill(255); 
     stroke(0); 
     //check if coordinates are within a box (these are mouse x,y but could be fiducial x,y) 
     //simply look for bounds (left,right,top,bottom) 
     if((mouseX >= x && mouseX <= x + videoScale) && //check horzontal 
      (mouseY >= y && mouseY <= y + videoScale)){ 
     //coordinates are within a box, do something about it 
     fill(0); 
     stroke(255); 
     //you can keep track of the boxes states (contains x,y or not) 
     states[i][j] = true; 

     if(mousePressed) println(i+"/"+j); 

     }else{ 

     states[i][j] = false; 

     } 


     rect(x,y,videoScale,videoScale); 
    } 
    } 
} 

Вы можете фактически запустить демо сильфона :)

var cols = 4, rows = 4; 
 
var states; 
 
var videoScale = 100; 
 

 
function setup(){ 
 
    createCanvas(400,400); 
 
    states = new Array(rows); 
 
    for (var i = 0 ; i < rows; i++) states[i] = new Array(cols); 
 
} 
 
function draw(){ 
 
    // Begin loop for columns 
 
    for (var i = 0; i < cols; i++) { 
 
    // Begin loop for rows 
 
    for (var j = 0; j < rows; j++) { 
 

 
     // Scaling up to draw a rectangle at (x,y) 
 
     var x = i*videoScale; 
 
     var y = j*videoScale; 
 
     
 
     fill(255); 
 
     stroke(0); 
 
     //check if coordinates are within a box (these are mouse x,y but could be fiducial x,y) 
 
     //simply look for bounds (left,right,top,bottom) 
 
     if((mouseX >= x && mouseX <= x + videoScale) && //check horzontal 
 
      (mouseY >= y && mouseY <= y + videoScale)){ 
 
     //coordinates are within a box, do something about it 
 
     fill(0); 
 
     stroke(255); 
 
     //you can keep track of the boxes states (contains x,y or not) 
 
     states[i][j] = true; 
 
     
 
     }else{ 
 
     
 
     states[i][j] = false; 
 
     
 
     } 
 
     
 
     
 
     rect(x,y,videoScale,videoScale); 
 
    } 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/p5.min.js"></script>

Если вы хотите отслеживать каждый фидуциальный внутри элемента сетки, каждый элемент сетки должен иметь собственный (динамический) список фидуциарных элементов, обновляемый по мере перемещения объектов и из них.

К сожалению, это не то, что я могу проверить, но вот доказательство концепции, основанной на вашем существующем коде. Пожалуйста, обратите внимание на комментарии.

import TUIO.*; 
TuioProcessing tuioClient; 

// Grid 

int cols = 10, rows = 10; 
GridElement[][] gridData = new GridElement[cols][rows]; 
int videoScale = 50; 

// these are some helper variables which are used 
// to create scalable graphical feedback 
//int x, y, i, j; 
float cursor_size = 15; 
float object_size = 60; 
float table_size = 760; 
float scale_factor = 1; 
PFont font; 

boolean verbose = false; // print console debug messages 
boolean callback = true; // updates only after callbacks 


void setup(){ 
    size(500,500); 
    noCursor(); 
    noStroke(); 
    fill(0); 

    // periodic updates 
    if (!callback) { 
    frameRate(60); //<>// 
    loop(); 
    } else noLoop(); // or callback updates 

    font = createFont("Arial", 18); 
    scale_factor = height/table_size; 

    // finally we create an instance of the TuioProcessing client 
    // since we add "this" class as an argument the TuioProcessing class expects 
    // an implementation of the TUIO callback methods in this class (see below) 
    tuioClient = new TuioProcessing(this); 

    //initialize gridData 
    for(int y = 0; y < rows; y++){ 
    for(int x = 0; x < cols; x++){ 
     gridData[x][y] = new GridElement(); 
     gridData[x][y].xIndex = x; 
     gridData[x][y].yIndex = y; 
     gridData[x][y].x = x * videoScale; 
     gridData[x][y].y = y * videoScale; 
     gridData[x][y].w = videoScale; 
     gridData[x][y].h = videoScale; 
    } 
    } 
} 

void draw() 
{ 
    textFont(font,18*scale_factor); 
    float obj_size = object_size*scale_factor; 
    float cur_size = cursor_size*scale_factor; 

    ArrayList<TuioObject> tuioObjectList = tuioClient.getTuioObjectList(); 
    for (int i=0;i<tuioObjectList.size();i++) { 
    TuioObject tobj = tuioObjectList.get(i); 
    stroke(0); 
    fill(0,0,0); 
    pushMatrix(); 
    translate(tobj.getScreenX(width),tobj.getScreenY(height)); 
    rotate(tobj.getAngle()); 
    rect(40, 84, 16, 50); 
    popMatrix(); 
    fill(255); 
    text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height)); 
    } 

    ArrayList<TuioCursor> tuioCursorList = tuioClient.getTuioCursorList(); 
    for (int i=0;i<tuioCursorList.size();i++) { 
     TuioCursor tcur = tuioCursorList.get(i); 
     ArrayList<TuioPoint> pointList = tcur.getPath(); 

     if (pointList.size()>0) { 
     stroke(0,0,255); 
     TuioPoint start_point = pointList.get(0); 
     for (int j=0;j<pointList.size();j++) { 
      TuioPoint end_point = pointList.get(j); 
      line(start_point.getScreenX(width),start_point.getScreenY(height),end_point.getScreenX(width),end_point.getScreenY(height)); 
      start_point = end_point; 
     } 

     stroke(192,192,192); 
     fill(192,192,192); 
     ellipse(tcur.getScreenX(width), tcur.getScreenY(height),cur_size,cur_size); 
     fill(0); 
     text(""+ tcur.getCursorID(), tcur.getScreenX(width)-5, tcur.getScreenY(height)+5); 
     } 
    } 

    ArrayList<TuioBlob> tuioBlobList = tuioClient.getTuioBlobList(); 
    for (int i=0;i<tuioBlobList.size();i++) { 
    TuioBlob tblb = tuioBlobList.get(i); 
    stroke(0); 
    fill(0); 
    pushMatrix(); 
    translate(tblb.getScreenX(width),tblb.getScreenY(height)); 
    rotate(tblb.getAngle()); 
    ellipse(-1*tblb.getScreenWidth(width)/2,-1*tblb.getScreenHeight(height)/2, tblb.getScreenWidth(width), tblb.getScreenWidth(width)); 
    popMatrix(); 
    fill(255); 
    text(""+tblb.getBlobID(), tblb.getScreenX(width), tblb.getScreenX(width)); 
    } 

    //draw grid at the end so it is on top of previously drawn objects 
    drawGrid(); 
} 

// -------------------------------------------------------------- 
// these callback methods are called whenever a TUIO event occurs 
// there are three callbacks for add/set/del events for each object/cursor/blob type 
// the final refresh callback marks the end of each TUIO frame 

// called when an object is added to the scene 
void addTuioObject(TuioObject tobj) { 
    if (verbose) println("add obj "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle()); 
    //update grid on TuioObject events 
    updateGrid(tobj); 

} 

// called when an object is moved 
void updateTuioObject (TuioObject tobj) { 
    if (verbose) println("set obj "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()); 
    //update grid on TuioObject events 
    updateGrid(tobj); 
} 

// called when an object is removed from the scene 
void removeTuioObject(TuioObject tobj) { 
    if (verbose) println("del obj "+tobj.getSymbolID()+" ("+tobj.getSessionID()+")"); 
    //update grid on TuioObject events 
    updateGrid(tobj); 
} 

// -------------------------------------------------------------- 
// called when a cursor is added to the scene 
void addTuioCursor(TuioCursor tcur) { 
    if (verbose) println("add cur "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY()); 
    //redraw(); 
} 

// called when a cursor is moved 
void updateTuioCursor (TuioCursor tcur) { 
    if (verbose) println("set cur "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY() 
      +" "+tcur.getMotionSpeed()+" "+tcur.getMotionAccel()); 
    //redraw(); 
} 

// called when a cursor is removed from the scene 
void removeTuioCursor(TuioCursor tcur) { 
    if (verbose) println("del cur "+tcur.getCursorID()+" ("+tcur.getSessionID()+")"); 
    //redraw() 
} 

// -------------------------------------------------------------- 
// called when a blob is added to the scene 
void addTuioBlob(TuioBlob tblb) { 
    if (verbose) println("add blb "+tblb.getBlobID()+" ("+tblb.getSessionID()+") "+tblb.getX()+" "+tblb.getY()+" "+tblb.getAngle()+" "+tblb.getWidth()+" "+tblb.getHeight()+" "+tblb.getArea()); 
    //redraw(); 
} 

// called when a blob is moved 
void updateTuioBlob (TuioBlob tblb) { 
    if (verbose) println("set blb "+tblb.getBlobID()+" ("+tblb.getSessionID()+") "+tblb.getX()+" "+tblb.getY()+" "+tblb.getAngle()+" "+tblb.getWidth()+" "+tblb.getHeight()+" "+tblb.getArea() 
      +" "+tblb.getMotionSpeed()+" "+tblb.getRotationSpeed()+" "+tblb.getMotionAccel()+" "+tblb.getRotationAccel()); 
    //redraw() 
} 

// called when a blob is removed from the scene 
void removeTuioBlob(TuioBlob tblb) { 
    if (verbose) println("del blb "+tblb.getBlobID()+" ("+tblb.getSessionID()+")"); 
    //redraw() 
} 

// -------------------------------------------------------------- 
// called at the end of each TUIO frame 
void refresh(TuioTime frameTime) { 
    if (verbose) println("frame #"+frameTime.getFrameID()+" ("+frameTime.getTotalMilliseconds()+")"); 
    if (callback) redraw(); 
} 
//update all grid elements based on a given TuioObject 
void updateGrid(TuioObject tobj){ 
    for(int y = 0; y < rows; y++){ 
    for(int x = 0; x < cols; x++){ 
     gridData[x][y] = new GridElement(); 
     gridData[x][y].update(tobj); 
    } 
    } 
} 
//draw the grid 
void drawGrid(){ 
    for(int y = 0; y < rows; y++){ 
    for(int x = 0; x < cols; x++){ 
     gridData[x][y].draw(); 
    } 
    } 
} 

class GridElement{ 
    //a dynamic list of tuioObjects - each element will keep track of what objects are within it's bounds 
    ArrayList<TuioObject> tuioObjects = new ArrayList<TuioObject>(); 
    //coordinates to check bounds and draw 
    int x,y,w,h; 
    //2D array indices, if needed 
    int xIndex, yIndex; 

    //check if a gven TuioObject is within the bounds of this element 
    void update(TuioObject tobj){ 
    double fx = tobj.getX(); 
    double fy = tobj.getY(); 

    if((fx >= x && fx <= x + w) && (fy >= y && fy <= y + h)){ 
     //if it is, add it to the list 
     add(tobj); 

    }else{ 
     //otherwise remove it 
     remove(tobj); 

    } 


    } 
    //easy to access functions to add/remove objects from the list, checking for duplicates 
    //a HashMap may be more suitable than an ArrayList, as you index objects by keys, not indices (like arrays) and will automatically avoid duplicates 
    void add(TuioObject tobj){ 
    if (!tuioObjects.contains(tobj)){ 
     tuioObjects.add(tobj); 
    } 
    } 

    void remove(TuioObject tobj){ 
    if (tuioObjects.contains(tobj)){ 
     tuioObjects.remove(tobj); 
    } 
    } 

    void draw(){ 
    pushStyle();//isolate drawing styles from the rest of the sketch 
    //draw the border only 
    noFill(); 
    stroke(0); 
    rect(x,y,w,h); 
    //draw text on top 
    fill(127); 
    //loop through each tuioObjects present in the current element and draw it one after the other (vertically) 
    for(int i = 0; i < tuioObjects.size(); i++){ 
     TuioObject tobj = tuioObjects.get(i); 
     text(tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY(),x,y+10+(i*12)); 
    } 
    popStyle(); 
    } 

}