Typing on the canvas

Processing Project Guidance
1

I’m new to processing and I need assistance with something. I need an example with explanation on how to type in a set of boxes created with loop by clicking on each cell.

2

sorry to say, but for a beginner that is the worst example you could pick to start with,
still see

editgrid

starting from an existing CSV file and allow in cell edit see here

but later i abandoned that approach and used G4P, see this

1 Like
3

I am really new to processing, i am trying to learn all i can before next semester because I will be taking the processing course next semester. I am really sorry but find it hard to understand what is on that page.

4

he was referring to this : http://kll.engineering-news.org/kllfusion01/downloads/editgrid.pde.txt

You wrote:

I need an example with explanation on how to type in a set of boxes created with loop by clicking on each cell.

We don’t have enough context. What kind of boxes are they? Do they have content…?

Please post your entire code.

1 Like
5

Eg when you have an OOP sketch with a class Cell:

When the mouse is clicked (use void mousePressed() ) on a cell, set it to selected=true. Set all other cells selected =false. When they’re in an array store the index of the selected cell in an int selectedIndex that you declare before setup ().

void mousePressed(){
int i=0;
for(Cell c : listCells) {
if(c.over()) {
listIndex=i;
}
i++;
}

}

over() is a boolean function in the class that tells you whether the mouse is over the cell
return mouseX>x&&mouseX<x+w&&mouseY>y&&...;

Now when something is typed say something like

void keyPressed() {

listCells[selectedIndex].cellText += key;

}

cellText Is a string within the class

When you display the cells use text() command to show cellText

1 Like
6

Thanks for your help but I still have error. This is what I could do for now:

int gridX=125;
int gridY=225;

String gridText="";

final String clues[] ={"Easily done","The most common medium of exchange", "Extremely tall person", "Rough or violent", "Evidence", "Source of illumination", "Portable light", "World laegeset's mammal"};
final String answers[]={"basic", "money", "giant", "tough", "proof", "light", "torch", "Whale"};
final int GRID_SIZE=50;
int NUM_GRID;

boolean cellSelected=false;
int rando = int(random(clues.length));

void setup(){
  size(500, 500);
  
}

void draw(){
  background(180);
  NUM_GRID=5;
  
  drawGrid();
  drawClue();
}


void drawGrid(){
  for(int i=0; i < NUM_GRID; i++){
    noFill();
    rect(gridX+((GRID_SIZE)*i), gridY, GRID_SIZE, GRID_SIZE);
    
    textSize(18);
    textAlign(CENTER);
    text(gridText + key, gridX+((GRID_SIZE)*i),gridY); 
  }
  
  
}

void drawClue(){
  //for( int i = 0; i < clues.length; i++ ){
    textSize(26);
    fill(0, 0, 255);
    text("Clue:" + clues[rando], 50, 150);
  //}
  textSize(19);
  fill(0, 255, 0);
  text("Response 1 Across", 165, 305);
}

boolean over(){
  
return (mouseX>gridX && mouseX<gridX + GRID_SIZE && mouseY > gridY && mouseY < gridY + GRID_SIZE);

}

void mousePressed(){
  cellSelected=true;
     for(int i=0; i < NUM_GRID; i++){
       if(NUM_GRID .over()){
         
       
       }
       
    }
    
  }


void keyPressed(){
  NUM_GRID[selectedIndex].gridText += key;
  
  
}
7

In my suggestion I assumed you have an OOP sketch with a class Cell

This is not the case.

It might be worthwhile to read the tutorial about arrays and then about two dimensional arrays

Your grid could hold Strings in a 2D array

Basically you can add the key to the String in the active position of the 2D array

Show the content of the 2D array using text

Which String in the array is active? You would determine this in

say over(i)

in the Function over (int i) calculate the Position of the Cell (like where you draw the rect) and check if the mouse is inside

Then set one or two index for the 2D array to true

1 Like
8

Does it work now?

Chrisir

9

Yes it does. Thanks

Peter

1 Like