Beziers and Moving Vector Graphics

[trogluddite]

Hi All,
Yes, I'm still messing about with animated vector graphics - got to a point where I really needed to understand the GraphicsPaths a bit better before I could improve my graphics path editor.
Discovered some interesting stuff - so here's another FS 'Art-Club' update - and it comes with a FREE GAME!!
(skip to the very bottom of the post if you don't fancy all the boring technical talk - it's the .fsm file called 'Vector Graphics Demo').

The first thing I found came after seeing how MyCo made a rounded rectangle path using the bezier curves (you can draw them directly, but paths don't have that shape). It turns out that the GDI graphics engine that FS uses represents all curves as beziers under the hood - and I managed to find out the maths behind describing the curves - here are a few examples (including MyCo's original shape, and a slightly improved version).

Theyre all beziers.fsm

(127.23 KiB) Downloaded 1435 times

Some of the bezier data is even visible using an undocumented Ruby method...

Code: Select all

myPath = GraphicsPath.new
myPath.addEllipse([0,0,10,10])
myPath.getPathData('?')

...it accepts one argument, but I haven't worked out what the argument is for yet - it always returns the list of points in the shape (including the bezier handles), but is missing the data that would show which refer to lines and which to beziers.

So why is that useful?
Once you have curves all in bezier form, you can move the shape around the screen, scale it, rotate it, skew it in all manner of ways by just transforming the points - no arc angles to measure, or circle diameters, just move the bezier handles in the exact same way as all the others.
So I've added some new stuff to the new GUI classes I've been writing, including a very compact and fast way to define transformations, and a 'Shape' class that can store and transform, multi-layer vector sprites, complete with colour information. Still plenty of work to do, but I am afr enough along to have something to show...

You understand, of course, that once you have vector graphics that can be animated, there's just something that every programmer of a certain age just has to do with them....

Vector Graphics Demo.fsm

(24.67 KiB) Downloaded 1517 times

My best score so far is 28,510 on level 5!!

[stw]

way beyond my skills...

simply awesome...

thanks for sharing!

[Nubeat7]

looking forward to the day i understand this, then i can call myself a programmer too i was happy to get 19900 points with the first game thanks for sharing this!

[chackl]

this Thing saved my afternoon at work
Awsome

[tektoog]

Perfect Vectrex replicat! and even better !
Brings some good old memories of endless games back...
Nice!

[philton]

... from now on i definitly think trog is a computer with VERY well programmed human skills
awesome. i have to learn that ruby stuff! damn....atm i try some things by playing around with FS and the webcam motion detection to generate some midi output. can i use ruby for that case,too??

regards,
ruby nooby

[trogluddite]

Thanks guys - I had a feeling a few people might enjoy that!

this Thing saved my afternoon at work

That sounds like a pretty good job you have!

trog is a computer with VERY well programmed human skills

He he - it's incredible what they were able to do with my 1970's vintage 8-bit circuits; there's even times I get mistaken for a real human when I'm hanging about in that weird really, really big room where you can't ever seem to see a ceiling!

Anyone up for making some sounds for it? - I just realised that adding a MIDI output would be really simple.
Each different event (e.g. explode, fire, start level etc.) could be assigned a different MIDI note; and maybe throw in a couple of controllers too for, say, the life bar level and number of asteroids. Hmmm...

looking forward to the day i understand this

Well, for much of it, the idea is that folks won't really need to understand it - in fact most of the maths for the graphics, I don't really understand myself; a lot of it is just Googled code snippets from various forums tweaked to fit the Ruby syntax.
Ideally, once I have the classes fine tuned, it will be as easy to make a little sprite as it is to use the FS built in graphics commands - that's why I've tried to follow the same naming conventions, and used the same method names where they do the same thing.
The game routines are probably not the best example in a sense - I will do some regular VST GUI controls later on using the same techniques; those would be better examples to follow that would show how the new classes work much more clearly.
The plan is that vector sprites will be easy to make using the graphics path editor, or by saving/loading .svg vector files. The new classes would then make moving and drawing the shapes as easy as a single line by just chaining methods together, e.g...

Code: Select all

myShape.scale(@size).rotate(@angle),move_to(@x,@y).draw(view).

No more head scratching over co-ordinates, vector graphics would be as easy to use and share as bitmaps are.

[pall]

This is phenomenal!
So something can be done by someone with "yoda" aptitudes - as it was called by someone.
We here below we can only gaze at it (as a calf at the new gate). But we will strive to understand what is happening there.

Anyway thank you for this game!

[trogluddite]

"yoda" aptitudes - as it was called by someone.

He he. On the floor, Yoda rolls. With funny comment and laughter, ass of Yoda away is taken!!

[Tronic]

After watching calmly, your wonderful work in creating these classes are very useful to make their life easier
in a graphical environment, it would be cool to have them separated into different modules
for inter-connect more easily with the green.
So as to better understand some of the methods to achieve them, and reuse them more easily,
without having to memorize the contents of an entire class, but having the modular visual method, which uses FS.
In fact I'm trying to figure out how to achieve a specific class that automates rendering the graphics
of the various modules that require it.
Every time without having to rewrite the code that executes always the same functions,
like: DrawBezier, etc. addCurve.
Create objects with coordinates, the type of shape, and its index of appearance, and send to render module.
But I have not yet understood, how to do easly and manageable, and if it is really possible without complicating.
However Great Trog