# Typing on the canvas

**URL:** <https://discourse.processing.org/t/typing-on-the-canvas/12990>\
**Category:** Project Guidance\
**Created:** [July 26, 2019, 2:24am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990 "2019-07-26T02:24:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Codex](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@Codex](https://discourse.processing.org/u/Codex)\
**Post date:** [July 26, 2019, 2:24am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/1 "2019-07-26T02:24:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 26, 2019, 7:06am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/2 "2019-07-26T07:06:25Z")

</div>

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](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here17)

but later i abandoned that approach and used G4P, see [this](http://kll.engineering-news.org/kllfusion01/downloads/editgrid.zip)

---

<div class="post-metadata">

**Author:** ![Codex](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@Codex](https://discourse.processing.org/u/Codex)\
**Post date:** [July 26, 2019, 10:17am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/3 "2019-07-26T10:17:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 26, 2019, 10:30am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/4 "2019-07-26T10:30:13Z")

</div>

he was referring to this : [http://kll.engineering-news.org/kllfusion01/downloads/editgrid.pde.txt](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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 26, 2019, 11:52am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/5 "2019-07-26T11:52:50Z")

</div>

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 ().

```auto
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

```auto
void keyPressed() {

listCells[selectedIndex].cellText += key;

}

```

cellText Is a string within the class

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

---

<div class="post-metadata">

**Author:** ![Codex](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@Codex](https://discourse.processing.org/u/Codex)\
**Post date:** [July 26, 2019, 2:13pm UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/6 "2019-07-26T14:13:07Z")

</div>

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

```auto
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;
  
  
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 26, 2019, 10:22pm UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/7 "2019-07-26T22:22:13Z")

</div>

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

> [@Codex](#):
>
> if(NUM\_GRID .over()){

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 6, 2019, 11:30am UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/8 "2019-08-06T11:30:51Z")

</div>

Does it work now?

Chrisir

---

<div class="post-metadata">

**Author:** ![Codex](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@Codex](https://discourse.processing.org/u/Codex)\
**Post date:** [August 6, 2019, 1:36pm UTC](https://discourse.processing.org/t/typing-on-the-canvas/12990/9 "2019-08-06T13:36:02Z")

</div>

Yes it does. Thanks

Peter