Cartoon ! (Vector drawing and animation)

Applications, Games, Tools, User libs and useful stuff coded in PureBasic
User avatar
[blendman]
Enthusiast
Enthusiast
Posts: 297
Joined: Thu Apr 07, 2011 1:14 pm
Location: 3 arks
Contact:

Cartoon ! (Vector drawing and animation)

Post by [blendman] »

Hi

I'm developping a little application to create vector drawing (and animate it in a futur version).
It's still wip, but we can already make some great things ^^.

Update : 21 march 2021 Version : 0.18


Licence
This software is free and open-source, under the MIT licence ;).


Features :
- create Object (= layers) and add shapes (box, ellipse, line, curves, complexe shape, image, text) on layers.
- load, save, export as png ((export only the selected layer or all the complete scene)
- modify the shape : position, scale, rotation, move the points of the shape (made with addcurvepath), color, alpha...
- add FX and set the parameters of the fx to get stroke border, shadow (external, internal) or other cool fx.


Todolist (For version 0.5 to 1.0):
- add timeline, and keyframe feature
- animation features : follow path, transformation (scale, rotation, position, alpha)
- bone system


More informations on the sourceforge page for this project :
[url]https://github.com/blendman/CartoonAnimation


Screenshots :

version 0.15 (13 april 2016)
Image
Image

version 0.12
Image
Image

version 0.10
Image
Image

Version 0.08
Image
Image



Download
Please note this a very wip / beta version, so it can have still bugs and some features aren't finished at all ^^.

https://github.com/blendman/CartoonAnim ... on0.15.zip


Thanks
- Fred for Purebasic :)
- Freak (& team) for the lib vector drawing and his help
- Purelust : for th IK system, which I hope to add in this software
- Rashad for his help with vector drawing
- Stargate for his help with sprite rotation (not used here, but used in another appli ^^)
- Danilo, Demivec and other great guys for their help
Last edited by [blendman] on Mon Mar 22, 2021 11:27 am, edited 7 times in total.
PureLust
Enthusiast
Enthusiast
Posts: 477
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: Cartoon ! (Vector drawing and animation)

Post by PureLust »

@[blendman]: Thats amazing ...(again). :D

I'm impressed by your work, your creativity and your art since I've discovered it first time. Image

[Edit] What about an export of processed PB-Commands, so one could use it as a creation tool for 'own verctordraw icons'?
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Cartoon ! (Vector drawing and animation)

Post by davido »

@[blendman]
Excellent!
I am amazed what you have done with AddPathCurve, I find it rather difficult to tame.

A question: Can one have layers?
PureLust wrote: What about an export of processed PB-Commands, so one could use it as a creation tool for verctordraw icons'?
+1
DE AA EB
User avatar
Keya
Addict
Addict
Posts: 1891
Joined: Thu Jun 04, 2015 7:10 am

Re: Cartoon ! (Vector drawing and animation)

Post by Keya »

WHOA!!! that looks super awesome! :) :) :)
User avatar
Andre
PureBasic Team
PureBasic Team
Posts: 2056
Joined: Fri Apr 25, 2003 6:14 pm
Location: Germany (Saxony, Deutscheinsiedel)
Contact:

Re: Cartoon ! (Vector drawing and animation)

Post by Andre »

Looks very impressive! :D
Bye,
...André
(PureBasicTeam::Docs & Support - PureArea.net | Order:: PureBasic | PureVisionXP)
User avatar
Kukulkan
Addict
Addict
Posts: 1352
Joined: Mon Jun 06, 2005 2:35 pm
Location: germany
Contact:

Re: Cartoon ! (Vector drawing and animation)

Post by Kukulkan »

Very good looking! :D
User avatar
[blendman]
Enthusiast
Enthusiast
Posts: 297
Joined: Thu Apr 07, 2011 1:14 pm
Location: 3 arks
Contact:

Re: Cartoon ! (Vector drawing and animation)

Post by [blendman] »

Hi Thanks a lot :)

Here is a new version :
Image
Image


New :
- Panel Object (=layer) has new UI : add, delete, hide, lock, layer name, layer position (up, down)
- Snap, grid
- export option : camera x,y,w,h
- files -> export scene (this export the scene with camera spec)
- bug fixes


Download :
http://blendman.free.fr/dev/pb/spritean ... on0.10.zip


What about an export of processed PB-Commands
For the moment, I don't know how to add that , but it's on my todolist ;).
Can one have layers?
Yes, the "Object" = a layer, so the panel Object has the Layer UI.
This new version (0.10), has a new Ui layer panel, with some cool feature (position of layer (depth), hide layer...).
Last edited by [blendman] on Mon Mar 22, 2021 10:54 am, edited 1 time in total.
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Cartoon ! (Vector drawing and animation)

Post by davido »

@[blendman],

Thank you for the new version, and answers to previous questions.
Looking forward to trying it out.
Will it eventually be cross-platform?
DE AA EB
User avatar
[blendman]
Enthusiast
Enthusiast
Posts: 297
Joined: Thu Apr 07, 2011 1:14 pm
Location: 3 arks
Contact:

Re: Cartoon ! (Vector drawing and animation)

Post by [blendman] »

Will it eventually be cross-platform?
I don't use any api, so it should be cross-platform ^^.
PureLust
Enthusiast
Enthusiast
Posts: 477
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: Cartoon ! (Vector drawing and animation)

Post by PureLust »

[blendman] wrote:
What about an export of processed PB-Commands
For the moment, I don't know how to add that , but it's on my todolist ;).
Hi [blendman],

I assume that you store your drawing-commands in a LinkedList and have a Render-Routine where you go through the List and execute all the necessary Drawing commands (with Select, Case, ...).

If so, here is a litte example how you easily could create such an Export-File within your Render-Routine:

Code: Select all

Procedure	RenderDrawing(CreatePBExport = #False)			; If CreatePBExport = #True, then create an Export-String and save it
	
	Protected	PB_Out.s
	Protected	Out  = CreatePBExport		; Just to get a shorter Name to check for
	
	VectorSourceColor(color)
	
	If Out : PB_Out.s = "Zoom.f = 1"+#CR$	: EndIf		; If Export is wanted, start creating the Export-String
																		; Include a 'Zoom' into the Export to allow easy zooming of the exported Path
	
	ForEach	CommandList()
		
		Select CommandList()\Command
				
			Case #MovePathCursor
				
				MovePathCursor(CommandList()\X, CommandList()\Y, CommandList()\Flags)
				
				; --- Add the actual Command to the Export-String (add a '*Zoom' to all values to allow easy zooming later on)
				
				If Out : PB_Out.s + "MovePathCursor("+Str(CommandList()\X)+"*Zoom, "+Str(CommandList()\Y)+"*Zoom, "+CommandList()\Flags"+)"+#CR$	: EndIf
				
			Case #AddPathLine
				
				AddPathLine   (CommandList()\X, CommandList()\Y, CommandList()\Flags)
				
				; --- Add the actual Command to the Export-String (add a '*Zoom' to all values to allow easy zooming later on)
				
				If Out : PB_Out.s + "AddPathLine("+Str(CommandList()\X)+"*Zoom, "+Str(CommandList()\Y)+"*Zoom, "+CommandList()\Flags"+)"+#CR$	: EndIf
				
			Case #ClosePath
				...
			Case #...
				...
			Case #StrokePath
				
				StrokePath(CommandList()\width, CommandList()\Flags)
				
				; --- Add the actual Command to the Export-String (add a '*Zoom' to all values to allow easy zooming later on)
				
				If Out : PB_Out.s + "StrokePath("+Str(CommandList()\Width)+"*Zoom, "+CommandList()\Flags"+)"+#CR$	: EndIf
				
			Case #...
				...
		EndSelect
	Next
	
	StopVectorDrawing()
	
	If Out										; Write created PB-Vectordrawing-Output to Export-File
		OpenFile(99,"VectorExport.pb")
		WriteString(99, PB_Out)
		CloseFile(99)
	EndIf
 
EndProcedure
The created export code should then look like this:

Code: Select all

Zoom.f = 1
MovePathCursor(43*Zoom, 57*Zoom, 1)
AddPathLine(52*Zoom, 62*Zoom, 0)
StrokePath(98*Zoom, 64)
....
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
Bo Marchais
User
User
Posts: 61
Joined: Sun Apr 03, 2016 12:03 am

Re: Cartoon ! (Vector drawing and animation)

Post by Bo Marchais »

Wow! Purelust's post was very topical - I was just looking for a way to preserve a similar list.

Blendman, I'm doing some things for generating illustrated tutorials, and this is very inspiring!

I want to share some applications that might be inspirational for you...especially if you start
doing animation. Check out spriter by brashmonkey - these tools are very useful and fun to
play with. Oh, and also digicel dot net. There are a dozen others, but some good ideas.

Sometimes it seems like users are more inspired by commercial looking examples than
by the ability of the tools, but skeleton frameworks are useful. I have seen some new
inverse kinematics code here in the forums lately that can help with such animations.

Also, consider letting your application be driven by network text strings. It isn't important
to allow remote control at first, but you will REALLY want such features later. If you do this
people can run many instances of your software and make a render farm for speed.
Or even just import/export commands as PureLust suggests - all programs become cooler
when they can be invoked by other programs.

It's really neat, good luck!
User avatar
[blendman]
Enthusiast
Enthusiast
Posts: 297
Joined: Thu Apr 07, 2011 1:14 pm
Location: 3 arks
Contact:

Re: Cartoon ! (Vector drawing and animation)

Post by [blendman] »

Hi

Here is a new version :)
A lot of bugs fixes and some interesting new features (Some new features are still in wip).
Image
Image

With he most wanted feature : "Export in purebasic" command (in menu\files\export in purebasic) yes guys :D !!


It's not finished, but it produce this code :

Code: Select all

; Made with Cartoon ! 0.12
; Date : 08/04/2016
; Pb Version : 5.42 + 

Global Zoom.f = 1.0

Procedure defaut(x,y,ScaleX.f=1,ScaleY.f=1,font=-1,txt$="")

    Protected Z.f
    Z = Zoom
    MovePathCursor(141*Z, 107*Z)
    AddPathCurve((168)*Z, (98)*Z, (188)*Z, (154)*Z, (151)*Z, (161)*Z)
    AddPathCurve((123)*Z, (163)*Z, (112)*Z, (118)*Z, (141)*Z, (107)*Z)
    VectorSourceColor(-2491416)
    FillPath()

    MovePathCursor(144*Z, 117*Z)
    AddPathCurve((159)*Z, (112)*Z, (183)*Z, (142)*Z, (153)*Z, (148)*Z)
    AddPathCurve((137)*Z, (152)*Z, (126)*Z, (123)*Z, (144)*Z, (117)*Z)
    VectorSourceColor(-16760254)
    FillPath()

    MovePathCursor(225*Z, 290*Z)
    AddPathCurve((397)*Z, (263)*Z, (181)*Z, (342)*Z, (82)*Z, (347)*Z)
    AddPathCurve((40)*Z, (352)*Z, (170)*Z, (222)*Z, (78)*Z, (190)*Z)
    AddPathCurve((-11)*Z, (166)*Z, (0)*Z, (0)*Z, (143)*Z, (103)*Z)
    AddPathCurve((146)*Z, (196)*Z, (449)*Z, (235)*Z, (219)*Z, (263)*Z)
    AddPathCurve((173)*Z, (265)*Z, (193)*Z, (297)*Z, (225)*Z, (290)*Z)
    VectorSourceColor(-16079976)
    FillPath()

    MovePathCursor(109*Z, 115*Z)
    AddPathCurve((136)*Z, (106)*Z, (156)*Z, (162)*Z, (119)*Z, (169)*Z)
    AddPathCurve((91)*Z, (171)*Z, (80)*Z, (126)*Z, (109)*Z, (115)*Z)
    VectorSourceColor(-2491416)
    FillPath()

    MovePathCursor(115*Z, 130*Z)
    AddPathCurve((130)*Z, (125)*Z, (154)*Z, (155)*Z, (124)*Z, (161)*Z)
    AddPathCurve((108)*Z, (165)*Z, (97)*Z, (136)*Z, (115)*Z, (130)*Z)
    VectorSourceColor(-16760254)
    FillPath()

EndProcedure 
For download, please see the first message.


Changelog :

V 0.13 (09/04/2016)
// New
- Load Preset Fx
- Object-Layer : now, shape position use the position of the Object-Layer (x,y in "object" panel)
- Object-Layer : size of the layer (w,h) can be changed. Be carefull, for the moment, it's not fine if the view isn't 0,0
- File> save, load : shape image ok
- Options > Change bg color
- Options > BG checker
// Fixes
- the depth of the shape is ok now
- when add a complex shape, it erase the old shape
- when open a file, the layer isn't used as active
- sometimes, add a new shape erase the name of the layer
- when multiselect, selection for complexe shape hasn't the good position
- deselect all > didn't deselect the current shapeId
- various little bugfixes


V 0.12
// New
- Add ExportPbCommand() : export circle, box, complex shape
- we can close or open the path (checkbox "close")
Not finished :
- Point (in panel shape) : button menu -> Clic open a popup menu (for point/shape) : only deletepoint is ok for the moment
// Changes
- save & load : add the x & y for the shape
// Fixes
- scale didn't work with box, ellipse, image, text
- move : now, I use the x & y of the shape, et doesn't change the position of all the points
- creation of shape : now I use the mouseX/mousey for x/y, for shape box,ellipse,text,image,roundbox
- move : the image didn't move with the move tool
- fixe a bug with the down buton for shape depth
- the selected shape wasn't drawn with dashpath
- when line, the 3 points were moved when selecting a point
- when creation shape complexe : it erase the shape0 of the current object

V 0.11
// New
- Shape : link -> to know if the path is "closed" after the previous shape
- Shape : hide, lock
// Fixes
- when we add a new complexe shape, and another one was selected, the other is scaled if we increase the size of the new .
- fixe a crash when select an object without shape
- when delete a shape if the layer was empty, it deleted the shape of the previous layer
- when mouse over a shape, it select the shape even if the shape wasn't on the selected object



Purelust :
Thanks for your example. I don't use that technic, but I think it's almost similar at mine.
What is CommandList() in your example ?



Bo Marchais :
Thanks for your comments ;).
I know Spriter and use it for my 2D games ^^. It's a great soft, but I find it a few bugged (I use the Free version). So, in March 2016, I have decided to create my own sprite animation, with the features I would like to have :D (and that I'll be able to dev by my-self). I have simply named this application : "SpriteAnimation" ^^.

A screenshot of spriteanimation :
Image
Image

As you can see, for the moment, it's similar to spriter (we can make transformation on sprite, but the bone system isn't finished).

When developping, I would like to add a little tool to draw our sprites directly in SpriteAnimation. So I have integrated some functions to create vector drawing, directly in spriteAnimation. But, after reflexion, I have found that it will be better to have a standalone application too. So I have named this standalone version "Cartoon ! ", and release it, even if it's not finished at all :).

In the past, I have dev 2 little applications to create bitmap animation :
- Animatoon (software to draw, but in one version I have some animation tools to test ^^)
- spriteSheetmaker (this appli has just a little tool to draw on several frames, oignon skinning...)

In Animation, I think we have 3 technics at least :
- Bitmap animation (like pencil, photoshop, clip paint studio...). It's like traditionnal, you have to create a new drawing each new frame. It's a lot of works :). I have made some little cartoons like that, but it's too much works for me ^^.
- Vector animation : like Flash or Synfig. You can use curves, line, shape (box, circle...) to draw. For animation, you can move the "object" or move his points. It's great, because you can use interpolations, and you don't have to create a new drawing each new frame. But it's a few more complexe to developp (it's not like a "simple" bitmap animation tool ^^).
- Sprite animation (like "spriter", even in "blender" we can make sprite animation if we use planes for sprite) : A software like that use bitmap (for sprite), and interpolation. So, you don't have to create a new drawing each new frame, it's a little like vector animation, but you can only change some parameters of each sprite (not the drawing of the object like in vector animation or bitmap animation).
With sprite animation or vector animation, we can add bones + IK/ FK system. Ik is complexe, but I hope to add that in my softwares ^^.

With purebasic, each technic is different :
- For sprite Animation, I have used the screen and the sprites (but we can use engine3D or openGl canvas if you prefer). But I think screen and sprite are simplier ^^.
- for vector animation, I use the vector drawing lib (you can do the vector operations by your-self, but it's not simple^^). this lib is great and amazing :). But it's a lot of works to create a vector application, even with this lib ^^.
- for bitmap animation, I have used the canvas/image and/or the vectordrawing lib too. The most difficult part is the Stroke drawing if you use canvas/image normal, and the optimisation for very big image (>2000*2000 for example). For animatoon, I use a mimx between sprite (for display) and image to draw.

I hope thoses informations can be helpfull for you ;). And thanks for your comments !
Last edited by [blendman] on Mon Mar 22, 2021 11:02 am, edited 1 time in total.
User avatar
[blendman]
Enthusiast
Enthusiast
Posts: 297
Joined: Thu Apr 07, 2011 1:14 pm
Location: 3 arks
Contact:

Re: Cartoon ! (Vector drawing and animation)

Post by [blendman] »

Hi

Here is a new version of Cartoon :
Cartoon 0.15

More informations about cartoon ! (animation) on Github (download, wiki...) :
https://github.com/blendman/CartoonAnimation

Image
Image


In this version : A lotof bugs fixes and some improvements.


Version 0.15 (13/04/2016)

New (0.13.5, 0.14 & 0.15):
- View : Zoom 500%
- View : view center
- Zoom is no more limited to 250%
- Option : Show camera Cache
- Option : camera Cache alpha
- Now, at start, Cartoon Check For update.
- point : multi-select & move (line, curve, complexe shape)
- Point : set soft
- Point : set hard
- Help : wiki
- Help : update
- Image : change image
- Shape : set shape to origin
- Shape : set origin to shape
- Shape : set shape to bottom
- Shape : set shape to top
- Object-layer : alpha
- add animation system (not finished) : draw only fps and some informations (debug)
- animation UI (button, spin gadget..) : play, fps, startframe, endframe, currentframe
- Add a StatusBar (for info, zoom...)
- (not finished) Image shape : X,Y,W,H,Repeat

Changes :
- when pt selected: we can see a red circle for this point
- when pt selected: SpinGadget pt X /Y is now updated

Fixes :
- when create a new shape, it was a bug with the view (line, curve, circle, box...)
- when add points, it was a bug with view (line, curve, complexe shape)
- numerous bugs with add pt fixed
- Fixe a bug with delete key : work only if the active gadget = main canvas (to not erase our shape by mystake)
- Fixe a bug with position X & Y object-layer and ShapeFx
- Fixe a bug when create new doc, object-layer alpha, & size was 0
- fixe a bug for Spingadget point X & Y (doesn't work with the last point)
- fixe some bugs in the export for purebasic
- fixe a bug with Add fx : fx isn't added to the shape
- fixe a bug with color if load old file (because object\alpha = 0 with file < 0.14)
- fixe a bug if load old file (object width & height was 0)
- Some minor bugs fixes

(edit 2021 : add new image link seems to not work)
Last edited by [blendman] on Mon Mar 22, 2021 11:05 am, edited 1 time in total.
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Cartoon ! (Vector drawing and animation)

Post by davido »

@[blendman],
At the rate you are going version 1.0 is going to be incredible.

Thank you for adding the ability to save a shape as PureBasic code. :D
Would it be possible to output the vector colour in hex? It is easier to understand that way. :)

I am assuming that you will, at some time in the future, be offering this as a commercial utility.
If this is so, can you give any details?
Do you intend it to be cross-platform?
DE AA EB
Joris
Addict
Addict
Posts: 885
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Cartoon ! (Vector drawing and animation)

Post by Joris »

@[blendman] great job.

Thanks.
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
Post Reply