This is just a simplify code to represent this problem.I would like to creat a app to draw something with a thumb.
function setup()
lineCapMode(PROJECT)
drawbook=image(1024,768)
x2=0
y2=0
end
function draw()
if CurrentTouch.state==MOVING or BEGAN then
x1=CurrentTouch.x
y1=CurrentTouch.y
if x2==0 then
x2=x1
y2=y1
else
setContext(drawbook)
line(x1,y1,x2,y2)
setContext()
sprite(drawbook,512,384)
x2=CurrentTouch.x
y2=CurrentTouch.y
end
end
if CurrentTouch.state==ENDED then
x2=0
y2=0
end
thumb=drawbook:copy(0,0,1024,768)
sprite(thumb,128,96)
strokeWidth(5)
end
I cleaned up your code a little. I add a few lines and removed others that I wasn’t sure what you were doing with it.
displayMode(FULLSCREEN)
function setup()
lineCapMode(PROJECT)
backingMode(RETAINED)
drawbook=image(1024,768)
setContext(drawbook)
x2=0
y2=0
end
function draw()
--background(40,40,50)
if CurrentTouch.state==MOVING or BEGAN then
x1=CurrentTouch.x
y1=CurrentTouch.y
if x2==0 then
x2=x1
y2=y1
else
line(x1,y1,x2,y2)
--setContext()
sprite(drawbook,512,384)
x2=CurrentTouch.x
y2=CurrentTouch.y
end
end
if CurrentTouch.state==ENDED then
x2=0
y2=0
end
--thumb=drawbook:copy(0,0,1024,768)
--sprite(thumb,128,96)
strokeWidth(5)
end
I changed your code a little to use a RETAINED background, and to be a bit faster
function setup()
lineCapMode(PROJECT)
--drawbook=image(1024,768)
x2=0
y2=0
backingMode(RETAINED) -- doesnt clear the screen each frame
background(0, 0, 0, 255) -- black background
end
function draw()
strokeWidth(5)
if CurrentTouch.state==MOVING or CurrentTouch.state == BEGAN then
x1=CurrentTouch.x
y1=CurrentTouch.y
if x2==0 then
x2=x1
y2=y1
else
--setContext(drawbook)
line(x1,y1,x2,y2)
--setContext()
--sprite(drawbook,512,384)
x2=CurrentTouch.x
y2=CurrentTouch.y
end
end
if CurrentTouch.state==ENDED then
x2=0
y2=0
end
--thumb=drawbook:copy()
--sprite(thumb,128,96)
--strokeWidth(5)
end
function setup()
lineCapMode(PROJECT)
drawbook = image(WIDTH, HEIGHT)
-- Fill drawbook with opaque black
setContext(drawbook)
background(0)
setContext()
strokeWidth(5)
end
function draw()
sprite(drawbook, WIDTH/2, HEIGHT/2)
-- Draw thumbnail in bottom left corner
sprite(drawbook, WIDTH/16, HEIGHT/16, WIDTH/8, HEIGHT/8)
end
function touched(touch)
local state = touch.state
if state == BEGAN then
p1st = vec2(touch.x, touch.y)
elseif state == MOVING then
p2nd = vec2(touch.x, touch.y)
setContext(drawbook)
line(p1st.x, p1st.y, p2nd.x, p2nd.y)
setContext()
p1st = p2nd
end
end
If you are seeking to draw a thumbnail of an image, you can use the sprite function to scale the image to a specific width and height.
I suggest you give your canvas image an opaque black background when you create it.
@mpilgrem (Could anyone tell me how to@ correctly?)
Thanks ,this really helps.
But this new method suffer a delay when drawing,which almost realtime in my previous.
Could u help improve it? thanks
displayMode(FULLSCREEN)
function setup()
lineCapMode(PROJECT)
drawbook=image(WIDTH,HEIGHT)
x1=0;y1=0
x2=0;y2=0
end
function draw()
background(0,0,0)
stroke(255)
strokeWidth(5)
setContext(drawbook)
if x2>0 and y2>0 then
line(x1,y1,x2,y2)
end
x2=x1
y2=y1
setContext()
sprite(drawbook,WIDTH/2,HEIGHT/2) -- draw full screen
sprite(drawbook,128,96,WIDTH/4) -- draw smaller version
end
function touched(t)
if t.state==BEGAN or t.state==MOVING then
x1=t.x
y1=t.y
elseif t.state==ENDED then
x2=0;y2=0
x1=0;y1=0
end
end
Here’s the above program that doesn’t use sprites.
displayMode(FULLSCREEN)
function setup()
lineCapMode(ROUND)
x1=0;y1=0
x2=0;y2=0
backingMode(RETAINED)
end
function draw()
stroke(255)
strokeWidth(5)
if x2>0 and y2>0 then
line(x1,y1,x2,y2)
strokeWidth(3)
line(x1/8,y1/8,x2/8,y2/8)
end
x2=x1
y2=y1
end
function touched(t)
if t.state==BEGAN or t.state==MOVING then
x1=t.x
y1=t.y
elseif t.state==ENDED then
x2=0;y2=0
x1=0;y1=0
end
end
Hello @Syeswr. You are using @ correctly, but the forum does not render it as a link when it is the very first thing in a comment.
I do not understand why your drawing does not appear until the touch is ended. The logic of my example code updates the drawing when the touch moves, up to 60 times a second.
I’m having the same problem with your code above also. It won’t draw the line until I stop moving my finger. Here is your code that I chopped up to show what I think is happening. This code shows a counter that increments every time the draw function is called. When I start dragging my finger around the screen, the counter stops, meaning the draw function isn’t being called while my finger is moving. When I stop, the counter starts incrementing again. Since draw() isn’t being called, the updated sprite in the above program isn’t being shown until I stop moving my finger.
@Simeon Can you explain what’s happening.
function setup()
drawbook = image(WIDTH, HEIGHT)
c=0
end
function draw()
background(0)
fill(255)
text("count "..c,WIDTH/2,HEIGHT/2)
c = c + 1
end
function touched(touch)
local state = touch.state
if state == BEGAN then
p1st = vec2(touch.x, touch.y)
elseif state == MOVING then
p2nd = vec2(touch.x, touch.y)
setContext(drawbook)
line(p1st.x, p1st.y, p2nd.x, p2nd.y)
setContext()
p1st = p2nd
end
end
I made a minor change to your program @mpilgrem to make it work. I added a variable d so that when setContext() is called, it can’t be called again until draw() is called.
function setup()
lineCapMode(PROJECT)
drawbook = image(WIDTH, HEIGHT)
-- Fill drawbook with opaque black
setContext(drawbook)
background(0)
setContext()
strokeWidth(5)
end
function draw()
sprite(drawbook, WIDTH/2, HEIGHT/2)
-- Draw thumbnail in bottom left corner
sprite(drawbook, WIDTH/16, HEIGHT/16, WIDTH/8, HEIGHT/8)
d=0
end
function touched(touch)
local state = touch.state
if state == BEGAN then
p1st = vec2(touch.x, touch.y)
elseif state == MOVING then
if d==0 then
p2nd = vec2(touch.x, touch.y)
setContext(drawbook)
line(p1st.x, p1st.y, p2nd.x, p2nd.y)
setContext()
d=1
p1st = p2nd
end
end
end