using touches

Questions
1

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??

2

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?

3

@se24vad

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
4

@Jordan:

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

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

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.

7

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

8

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
9

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

10

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