我正在组合重新激活和处理，我希望有一个网格显示（有点像国际象棋游戏）可以放置基准点，然后识别它们在哪个位置（A3，B9等） 我是这一切的新手，我在做这件事时遇到了一些麻烦
我有这个代码创建一个带处理的网格，但是如何实现它在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);
}
}
}
答案 0 :(得分：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();
}
}