# using touches

Hello everybody! I have a “dumb” question:

• I have filled the entire screen with rect’s (looks like a tileset or a chess board). I’ve done this with two for loops. One for HEIGHT and one for WIDTH. This were done in a class “Floor”.
• Now I want EACH rect to change its color when I’m touching it. So each rectangle should receive touchevents.

When I try it, only the first rect at (0,0) - not where the touch accured - changes its color just for a millisecond. Where to start now??

Can you post your code? Sounds like you are overwriting your variable to manage the colour in the draw frame, and only changing it when touch.state == BEGAN. And also how are you using the x and y values of touch?

This should give you an idea of what to do. It’s kind of sloppy, but I only had 10 minutes to write and post this before I had to leave.

``````
function setup()
rowx={}
rowy={}
col={}
for z=1,64 do
col[z]=0
end
end

function draw()
background(40, 40, 50)
checker()
end

function checker()
square = 0
for x=1,8 do
for y=1,8 do
square = square + 1
fill(255)
if col[square]==1 then
fill(255,0,0)
end
rect(x*50,y*50,45,45)
rowx[square]=x*50
rowy[square]=y*50
end
end
end

function touched(t)
if t.state==BEGAN then
for square=1,64 do
if CurrentTouch.x>rowx[square] and CurrentTouch.x<rowx[square]+50 and
CurrentTouch.y>rowy[square] and CurrentTouch.y<rowy[square]+50 then
col[square]=1
end
end
end
end

``````

Main

```function setup()
supportedOrientations(ANY)

Floor:init()
end

function draw()
background(40, 38, 45, 255)
Floor:draw()
end

function touched(touch)
Floor:touched(touch)
end
```

Floor
Floor = class()

function Floor:init()
self.tilesize  = { 65,65 }
self.tilecount = {
horizontal  = WIDTH  / self.tilesize[1],
vertical    = HEIGHT / self.tilesize[2]
}
end

function Floor:draw()
local w,h = 0,0
for i=1, self.tilecount.vertical do
for ii=1, self.tilecount.horizontal do
rect(w,h, self.tilesize[1], self.tilesize[2])
fill(67, 95, 80, 255)
stroke(67, 95, 80, 255)
strokeWidth(4)
w = w + self.tilesize[1]
end
w = 0
h = h + self.tilesize[2]
end
end

function Floor:touched(touch)
if  touch.state == ENDED then
fill(68, 149, 75, 255)
end
``````

(for those without moderator powers who wonder how on earth that was achieved, I had a look - since I was unaware of this - and it appears that if you put your code in `

``` …
`` instead of in fences then you get nice syntax highlighting.  It's done by javascript so you don't see it on the preview.)````

To answer your question, when the touch is ended then you set the colour for the `fill` command. Then in the draw loop, you reset it after drawing the first rectangle. So for the first rectangle, the rectangle gets the colour set by the touch but after that, each subsequent one gets its original colour.

Now looking at it, it is a similar case to this thread, try looking over that code

And here is the code to solve your problems!

``````
Floor = class()

function Floor:init()
self.tilesize  = { 65,65 }
self.tilecount = {
horizontal  = WIDTH  / self.tilesize[1],
vertical    = HEIGHT / self.tilesize[2]
}
self.fills = {}
for i=1, self.tilecount.vertical do
self.fills[i] = {}
for ii=1, self.tilecount.horizontal do
self.fills[i][ii] = color(67, 95, 80)
end
end
end

function Floor:draw()
local w,h = 0,0
for i=1, self.tilecount.vertical do
for ii=1, self.tilecount.horizontal do
fill(self.fills[i][ii])
stroke(67, 95, 80, 255)
strokeWidth(4)
rect(w,h, self.tilesize[1], self.tilesize[2])
w = w + self.tilesize[1]
end
w = 0
h = h + self.tilesize[2]
end
end

function Floor:touched(touch)
if  touch.state == ENDED and touch.y < math.floor(HEIGHT / 65) * 65 then
self.fills[math.ceil(touch.y / 65)][math.ceil(touch.x / 65)] = color(255, 255, 255, 255)
end
end
``````

I’ll analyze the code, to understand how this fits together. But thank you for the kind help! This actually works as needed

Great! If you have any questions, feel free to ask me!