setContext too slow, any ideas?

Questions
1

http://youtu.be/RmCWP_1-n9Q

I would like to create a simple sketching app with an infinite canvas. The main idea was to use tiles, to boost things up, But there is a problem: as I swap tiles, on which to draw, with setContext, there is an interruption in the line. It seems like the setContext is a slow operation. Any ideas of how to solve this issue?

I can not get my head wrapped around this. My only thought is to use a hidden image(WIDTH, HEIGHT) and then chop it into tiles and update the previous tiles by the content of the new ones. But I do not like this idea…

Here is some code that demonstrates the tile swapping issue with setContext.

function setup()
    size  = 256
    tile1 = {image = image(size, size), x = 0,    y = 0}
    tile2 = {image = image(size, size), x = size, y = 0}
end

function draw()
    background(151, 150, 131, 255)
    
    spriteMode(CORNER)
    sprite(tile1.image, tile1.x, tile1.y)
    sprite(tile2.image, tile2.x, tile2.y)
    
    noFill()
    strokeWidth(1)
    rect(tile1.x, tile1.y, size)
    rect(tile2.x, tile2.y, size)
end

function touched(touch)
    if touch.state ~= ENDED then
        local target = tile1
        
        if touch.x < size*2 and touch.x > size then
            target = tile2
        end
        
        local offset = vec2(target.x, target.y)
        local prev   = vec2(touch.prevX, touch.prevY) - offset
        local curr   = vec2(touch.x, touch.y) - offset
        
        setContext(target.image)
        line(curr.x, curr.y, prev.x, prev.y)
    else
        setContext()
    end
end
2

The simplest way I can think of is to cache the calls to the image creation stuff and only execute them when the user is not actively drawing. The user won’t notice the slow-down at such times.

There’s an example of this buried in the Harmony code, but probably buried too deep to be useful.

3

I thought of having a hidden, big, image and draw stuff onto it. then, when no use input occurs, chop it into tiles and save them out, by using coroutines. But the problem is, as the whole canvas can get moved, I might need a number of such big hidden images to overlay over each other. and when the user frequently pans the the memory will rise to fast and it will take ages to recursevly save everything. If one would close the app before the app done its work, progress gets lost… :frowning:

Here is my app code, for everyone who want to mess around with it. https://gist.githubusercontent.com/anonymous/4d3cfce8eff9aa325553/raw/6b144871cb0c30d5e66f391cc9cafa43d66276cc/Main.lua

4

interesting problem @se24vad. As Andrew, I would suggest to live draw with line() until touch.state==ENDED and then draw in the tiles. This should avoid the glitch while the user is drawing. i’ve worked on the concept of a hand drawing project with maximum number of points captured and this does work (at 60 hz max speed for touch capture)

5

thanks guys - your suggestions were helpful

6

@ se24vad - From your example code, I think the line interruption came from the fact that you don’t draw the line part which is inside the previous context. I mean suppose the previous touch is inside the tile1, and the actual touch is inside the tile2, from here the drawing context is set to tile2 and a line is draw from touch.prevPos to touch.actualPos, but touch.prevPos was inside the tile1. To be verified. No, setContext, could’nt be so slow…?