How to improve Fps while drawing

I made a line drawing code but its Fps decreases alot when there are alot of lines on the screen, any suggestions? Here’s the code:

function setup()
    
    p = {}
    time = 0
    id = 2
    cd = 0
    c = {}
end

function touched(t)
    local tpos = vec2(t.x,t.y)
    if t.state == BEGAN and #p == 0 then
        print(tpos)
        cd = cd + 1
        p[1] = tpos
    end
    if t.state == MOVING and #p >= 1 then
        time = time + 0.1
        p[id] = tpos

        if (p[id]-p[id-1]):len() > 25 then
            id = id + 1 
        end
        c[cd] = p
    end
    if t.state == ENDED and #p > 2 then
        c[cd] = p
        p = {}
        id = 2
    end
end

function draw()
    
    background(40,40,40,255)
    strokeWidth(5)
    smooth()
    for i = 1,#c do
        for n = 1,#c[i] do
            if n > 1 then
                line(c[i][n-1].x,c[i][n-1].y,c[i][n].x,c[i][n].y)
            end
        end
    end
    text(1/DeltaTime,400,400)
    
end

Try a vec4() to hold the starting and ending x,y values so you’re not going thru multiple table dimension. Don’t know if that will help, but you could try it.

That could possibly half it if I did it right theoretically but even that will slow down quite a bit if i draw enough lines, is it possible to make like a mesh or something?

I havent tried it yet, but what happens if you draw to an image and just show the image instead of putting the values in a table or using retained mode.

I agree with @dave1707 - try using

    backingMode(RETAINED)

The handling touches example has an explanation of it

You have to make changes to this to make it work better, but it’s a start.

EDIT: made changes to the original code.


function setup()
    backingMode(RETAINED)
    x1=0
    y1=0    
    parameter.watch("fps")
end

function touched(t)
    if t.state==BEGAN then
        x=t.x
        y=t.y
    elseif t.state==MOVING then
        x1=x
        y1=y
        x=t.x
        y=t.y
    elseif t.state==ENDED then
        x1=0
        y1=0
    end
end

function draw()
    strokeWidth(2)
    smooth()
    if x1>0 then
        line(x1,y1,x,y)
    end
    fps=math.floor(1/DeltaTime)
end

If I try to draw a continuous line all over the screen at a fast pace, I get small gaps in the line that seem to appear at regulat intervals. Not sure what the cause is yet.

.@dave1707 I have seen similar in a finger painting app I did, I think it’s sometimes missing touches, or perhaps taking 2 touches between a draw call or something.

.@Luatee the retain background for this simple scenario works, also I’ve noticed line drawing performance to be a little poor, if you change smooth() to noSmooth() it’s uglier but performs quite a bit better. As well as retaining background, another approach is to every so often persist out the current drawing to an image and just sprite that in so the dynamically drawn section is smaller. I use this approach in http://twolivesleft.com/Codea/Talk/discussion/2077/drop-2000-squares-into-a-pile-at-30-fps#Item_1 where once the drawn cubes become static I move them into a background image rather than drawing each frame.

Hey @spacemonkey, brilliant idea I’m kicking myself for not have thinking so simple, I decided prior to your post to use meshes, which has turned out quite well. Here’s how I did it, is there any better way to do it? –

function setup()
    backingMode(RETAINED)
    p = {}
    o = {}
    time = 0
    id = 1
    cd = 0
    c = {}
    ml = {}
    bodies = {}
end

function touched(t)
    local tpos = vec2(t.x,t.y)
    local tdelta = vec2(t.deltaX,t.deltaY):normalize()
    if t.state == BEGAN and #p == 0 then
        print(tpos)
        cd = cd + 1
        ml[cd] = mesh()
        ml[cd]:setColors(255,255,255,255)
        p[0] = tpos
        o[0] = tpos
    end
    if t.state == MOVING and #p >= 0 then
        time = time + 0.1
        
        p[id] = tpos+(tdelta):rotate(90):normalize()*20
        o[id] = tpos+(tdelta):rotate(90):normalize()*-20
        local tbl1 = p
        local tbl2 = o
        
        
        
        local tbl = {}
        local ntbl = {}
        --print(id)
        for n = 1, id do 
            table.insert(tbl,triangulate({p[n],o[n],o[n-1],p[n-1]}))
        end
        --c[cd] = triangulate(p)
        for a=1, #tbl do
            for b=1, #tbl[a] do
                table.insert(ntbl,tbl[a][b])
            end
        end
        ml[cd].vertices = ntbl
        
        if (p[id]-p[id-1]):len() > 25 or (o[id]-o[id-1]):len() > 25 then
            id = id + 1
        end
        
    end
    if t.state == ENDED and #p > 1 then
        p[id] = tpos
        o[id] = tpos
        
        local tbl = {}
        local ntbl = {}
        print(id)
        for n = 1, id do 
            table.insert(tbl,triangulate({p[n],o[n],o[n-1],p[n-1]}))
        end
        --c[cd] = triangulate(p)
        for a=1, #tbl do
            for b=1, #tbl[a] do
                table.insert(ntbl,tbl[a][b])
            end
        end
        ml[cd].vertices = ntbl

        
        p = {}
        o = {}
        id = 1
    end
end

function draw()
    
    background(40,40,40,255)
    strokeWidth(5)
    smooth()
    for i = 1,#ml do
        ml[i]:draw()
    end
    text(1/DeltaTime,400,400)
    
end