Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Stylus/Doodling

Author
Message
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 5th Jun 2017 00:57
Link
Does anyone have any experience/code to implement a drawing style proggy. I would like the user to use a stylus to make notes over an image.
My primary concern is the amount of data (x,y points) that would be generated.
Anyway i thought someone might have some preshrunk code for that sort of thing
Thanks in advance
Back to top
Profile PM
Kevin Cross
20
Years of Service
User Offline
Joined: 15th Nov 2003
Location: London, UK
Posted: 5th Jun 2017 10:10 Edited at: 5th Jun 2017 10:10
Link
You may be able to get something from my scratch card example I posted a little while ago. It uses Memblocks and sets each pixel a sprite collides with to transparent (to give the scratching out effect). It could be modified to use a small round sprite for a brush that follows the mouse/stylus (like the coin in the example) and instead of changing pixels to transparent you change them to a desired colour and set them to visible.

https://forum.thegamecreators.com/thread/219503

I never tried this on a large/full screen image so I don't know how slow it will be the bigger the Memblock data it has to loop through.
Back to top
Profile PM Email
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 5th Jun 2017 23:26
Link
Thanks Kev. I'll check it out
Back to top
Profile PM
basicFanatic
6
Years of Service
User Offline
Joined: 7th Jun 2017
Location:
Posted: 7th Jun 2017 14:01
Link
I remember trying to draw on the screen using a Windows Wacom stylus. The stroke acted up somehow. I think it tried to execute some touch flick gestures or something! Might work better in non-windows environments.
Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 18th Jun 2017 04:55 Edited at: 18th Jun 2017 05:04
Link
I did a little work on this. My solution, which i think is a bit crude because you cannot adjust the size of the nib, is to save the touch co-ordinates in an array and use the DrawLine() function to draw. (I've asked if a nib size could be added to the DrawLine() function which would be super cool).

To try to minimize the size of the co-ordinate array i "burn" the stroke into the background image every time the pointer is lifted.

One interesting thing, and i would appreciate any info anyone could give me on this, is that i found i could use any old image to render too. Is that ok and if so why is there a CreateRenderImage() function?

As you can see i'm giving Leonardo a run for his money as far as my artistic skills are concerned.



Attachments

Login to view attachments
Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 20th Jun 2017 06:50
Link
Modified it to do the scratchy thing using a mask
NOTE: The doco says it's not good to set a mask EVERY frame (Which i do). But i have the crappiest phone on the planet and while it's a little slow it's not too bad
NOTEB: The "silver" image that has the mask applied to it MUST have SOME alpha (transparency) which is a bug i think

Attachments

Login to view attachments
Back to top
Profile PM
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 20th Jun 2017 07:19
Link
Tried it using SetImageTransparentColor() rather than a mask but i get artifacts on my phone (works ok on my PC because the resolution matches the images). Prolly because AppGameKit has to resize my dot image that i use to round out the sharp edges.
I'm sure there's something i could do about that but i've already spent enough time on it today

Attachments

Login to view attachments
Back to top
Profile PM
Blendman
10
Years of Service
User Offline
Joined: 17th Feb 2014
Location: Arkeos
Posted: 20th Jun 2017 09:28
Link
Hi

I think you should use some shader for eraser

In 2014, I have made a little painting application, and I use some shader for paint/erase the stroke.

The shaders :
https://forum.thegamecreators.com/thread/212671

My painting application (animatoon, agk version) :
https://forum.thegamecreators.com/thread/212680



Note : I have a lot of version for this application (game maker, purebasic, agk...)
AGK2 tier1 - http://www.dracaena-studio.com
Back to top
Profile PM Website
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 20th Jun 2017 10:36 Edited at: 20th Jun 2017 10:37
Link
Thanks Blendo. I will check it out
Edit : Download links don't work
Back to top
Profile PM
Blendman
10
Years of Service
User Offline
Joined: 17th Feb 2014
Location: Arkeos
Posted: 20th Jun 2017 12:52
Link
Sorry, it's fixed
AGK2 tier1 - http://www.dracaena-studio.com
Back to top
Profile PM Website
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 20th Jun 2017 23:46 Edited at: 20th Jun 2017 23:57
Link
Thanks Blendo!
Ok i put a demo together (With my brush). How do i make it draw lines rather than just plot dots?
Back to top
Profile PM
Blendman
10
Years of Service
User Offline
Joined: 17th Feb 2014
Location: Arkeos
Posted: 21st Jun 2017 13:41
Link
Hi Blinko

You need to :
- keep the point in an array
- calculate the distance between each points/dots
- draw the sprites for this distance likethat :


distance = 200 pixels (between dot[1] and dot[2])
your brush size = 20 px (width of the image)

so, you need to draw :
Number of dot = distance/brushsize
200 / 20 = 10 (for distance between dot[1]-dot[2])

You can add a paramater like "Spacing" (spacing in photoshop) to get a better stroke :

Number of dot = (distance / brushsize) * Spacing

(like the exemple on the image attached.)



Some functions which help :

- To knwo the distance between 2 points :

Function GetDistance(x,y,x1,y1)
dist = sqrt((x1-x)^2 + (y1-y)^2)
EndFunction dist

- the direction of the sprite between dot[1] and dot[2], like that (angle between 2 points) :
function GetAngle(x1#, y1#, x2#, y2#)
result# = ATanFull(x1# - x2#, y1# - y2#)
endfunction result#


I hope this help .




AGK2 tier1 - http://www.dracaena-studio.com

Attachments

Login to view attachments
Back to top
Profile PM Website
blink0k
Moderator
11
Years of Service
User Offline
Joined: 22nd Feb 2013
Location: the land of oz
Posted: 22nd Jun 2017 00:45
Link
Thanks blendo! I was doing something similar. I thought it might be doing something in the shader
Back to top
Profile PM
Back to top

Login to post a reply

Server time is: 2024-04-20 09:28:19
Your offset time is: 2024-04-20 09:28:19