Efficient scalable grid example?

I’m trying to make a visible grid that scales with a pinch and moves with a swipe.
Each cell will contain a table (which will either be or include an object)… So they have to be created dynamically.

I have the grid and the cell-system worked out but I’m just trying to figure out the most efficient way to do the rest. If anyone has any input or code to share for examination, I’d truly appreciate it. :slight_smile:

what do you miss? the scale and move? if you post some code it would be easier to help you.

@Jmv38 I suppose @jwelliver means scale and move, unfortunately i’ve only been able to achieve movement

-- Scaling Grid
displayMode(FULLSCREEN)

function setup()
    tt = {} -- Touch Table
    posX = WIDTH/2
    posY = HEIGHT/2
end

function draw()
    background(104, 209, 147, 255)
    fill(216, 214, 214, 255)
    strokeWidth(5)
    translate(posX, posY)

    for x = -3000, 3000, 100 do
        pushStyle()
        line(x, -3000, x, 3000)
        fontSize(30)
        fill(203, 127, 127, 255)
        text(x, x, 0)
        popStyle()
    end

    for y = -3000, 3000, 100 do
        pushStyle()
        line(-3000, y, 3000, y)
        fontSize(30)
        fill(203, 127, 127, 255)
        text(y, 0, y)
        popStyle()
    end
end

function touched(t)
    if t.state == BEGAN then
        tt[#tt+1] = t
    end
    if t.state == MOVING then
        tt[#tt] = t
        posY = posY + tt[#tt].y - tt[#tt].prevY
        posX = posX + tt[#tt].x - tt[#tt].prevX
    end

This is probably an inefficient way to do it but hey, it works.
As for scale i couldn’t figure out how to achieve but incase anyone wants to know i thought it would work with something along the lines of
-- Calculate distance between two touches using (where v1 and v2 are touches) distance = v1:dist(v2)
--Increase scales amount using the distance e.g. scaleAmount = scaleAmount + distance

@Dalorbi Scale is quite easy, it’s the position of the scale relative to translation that can be hard. What you put forward is correct but you will want to make an odistance variable which is the previous distance. In t.state BEGAN you set the odistance to v1:dist(v2) then in move distance = v1:dist(v2)-odistance odistance = v1:dist(v2)

@Luatee @jwelliver
Spent so much time on this i nearly forgot to finish my assignment

-- Scaling Grid
displayMode(FULLSCREEN)

function setup()
    tt = {}
    s = 1
    posX = WIDTH/2
    posY = HEIGHT/2
end

function draw()
    background(104, 209, 147, 255)
    fill(216, 214, 214, 255)
    strokeWidth(5)
    scale(s)
    translate(posX, posY)
    for x = -3000, 3000, 100 do
        pushStyle()
        line(x, -3000, x, 3000)
        fontSize(30)
        fill(203, 127, 127, 255)
        text(x, x, 0)
        popStyle()
    end
    for y = -3000, 3000, 100 do
        pushStyle()
        line(-3000, y, 3000, y)
        fontSize(30)
        fill(203, 127, 127, 255)
        text(y, 0, y)
        popStyle()
    end
end

function touched(t)
    if t.state == BEGAN then
        tt[#tt+1] = t
        touchesActive = #tt
        if touchesActive == 2 then
            oDist = calculateDistance(tt)
        end
    end
    if t.state == MOVING and touchesActive < 2 then
        tt[#tt] = t
        posY = posY + tt[#tt].y - tt[#tt].prevY
        posX = posX + tt[#tt].x - tt[#tt].prevX
    elseif t.state == MOVING and touchesActive == 2  then
        tt[#tt] = t
        dist = calculateDistance(tt)
        s = s + (dist - oDist) * 0.0005
        oDist = calculateDistance(tt)
    end
    if t.state == ENDED then
        for i, v in pairs(tt) do
            if t.id == v.id then
                tt[i] = nil
            end
        end
    end
end

function calculateDistance(table)
    for i, v in pairs(table) do
        if i == 1 then
            v1 = vec2(v.x, v.y)
        elseif i == 2 then
            v2 = vec2(v.x, v.y)
        end
    end
    dist = v1:dist(v2)
    return dist
end

It works but it’s buggy and occasionally moves spasmodically

@Dalorbi @Luatee

Thanks very much! I will give these a shot ASAP.