The duration right now is muched to the last waypoint. It’s ease to fix it. I will update it as soon I finish the gradient layers.
Ok. I updated onced again the sifplayer.
Now it will play all the sif.
Also now you can play with the Linear and Radial Gradient. zigzag and loop params are not supported and there is a hight possibility to never support them.
I also updated the readme that you can see in the front page of the github.
updated -733a7a4- / [change in .hml / and player.min.js]
but … hummm … look… like… hummm… the speed is ok… but in a tinytinytinyreduced loop… 
anyway, each days it’s coming better.
see(ya!
Thanks d.y.a.y for testing and uploading. Fixed.
Beta 0.1. released.
Convert does not work. So for you animations do not convert any param value.
In the current state I believe that a big part it’s done. Of curse it is possible to get the player further.
For example one quest is the addition of convert and a way to communicate. This is likely what I am going to work right now.
Motion blurring! It looks like motion blurring it’s something that we cannot avoid. You will find out soon… And I have no idea how to do it.
So my question always remains.
Do we keep the lib separated from other libs engines as possible or we find an engine and implement somehow the sif?
Can you elaborate this question a little more please?
-G
There graphics engines for HTML5 like easeljs and kineticjs. Those libs are trying to improve the performance and gives framework to add functionalities like mouse buttons, touch and more.
They have different ways to draw vector graphics cache the non animated graphics and more.
There is a possibility to gain some performance and some extra filters. But in the end we will force the user to use an extra lib that will cost extra kb to download even if he wands to use the sifPlayer only as an Add.
My main concern are performance and motion blur. I never coded any of those and I am not sure if I can implement them in the sifPlayer. I don’t wand to leave Synfig without a good player. I started coding this for fun but now I fill that is my responsibility to make it at least good. So if I can use a lib that will help to achieve better results and suits the needs it’s better to use it than reinventing the wheel.
Motion blur in Synfig is just render the same scene in different times with different opacities and all them composited together at the same frame. If there is a native motion blur engine for html it would be better to use the native one instead of the one from synfig, even loosing the control of some of the parameters of the motion blur.
Later, once the sifplayer allows to composite layers with different opacities you can implement the motion blur as it is concepted in Synfig.
-G
haramanai>>01 Nov 2012 13:49
if i understand it’s a “reinventing the wheel” vs “performance” + “light player” vs “extra kb” question … ist’n it?
so perhaps, something like a parameter inside sifPlayer to let choose (or not) a bridge to another graphics engine?
Yes d.j.a.y. it’s something like this.
Right now sifPlayer is drawing to any given Context2d. If it’s going to be in another engine the most part of the sifPlayer is going to change to much the way the engine use data but we will lose the freedom to just render everywhere.
I started to add convert and it looks like that I will not be able to translate the data back to any other engine. So it looks like that we are stuck with the current way. Of curse fear not cause in the end we will find a way to add the SifObject to any other engine for communication ( mouse clicks on the bline and more).
Right now I am working on the 0.2 version you will not find it on the github yet. It will have the conversion of some params. Also I have to find a way to get the matrix from the Context2d and add some basic motion blur before putting it on the github.
Cause it’s been some years that I worked with segments and circles and tans… Can someone from the developers especially Genete tell me how he draws a simple bline outline in cairo?
0.2 is up and running.
Convertions are starting to work.
I haven’t done anything about the Motion blur as I promissed. Sorry.
Anyway go to the github to check it out.
I forgoted to say that you can have some access to the layers by name. Go to your SifObject etc mySif and get it this way mySif.desc[‘the name of layer’];
Also I wand to say that I am a little bit suprised that there are no posts filled with complains or errors. Is the player so good!? or just nobody use it?
P.S. I need help with the outlines. A simple example of how to get the bezierCurve values will be enought. For example to draw a bezier part for the region I come to a place that bezierCurveTo(t1.x + p1.x, t1.y + p1.y, p2.x - t2.x, p2.y - t2.y, p2.x, p2.y) let’s say that w1 is the width of p1 and w2 is the width of p2. Can someone from the devs to tell me how to get the bezier part for the outline?
Thanks
Hi haramanai,
I’m sorry for not giving you enough support on this (using the sifplayer with examples and reporting bugs if any) but my free time is extremely small and I just concentrate on continue working on Cairo render.
Your project is very important for Synfig. Please don’t stop working on it. I’ll try to do some test and promotion on the website about your works.
There is not bezier part of the width of outline. The width at a certain intermediate point in the bezier is drawn this way:
- Calculating the tangent to the curve a that point. There are maths to do that for a Bezier curve. If you need help on this please let me know.
- Given the tangent calculate the perpendicular to the curve (perpendicular to the tangent) and normalize it (length = 1.0)
- Starting a the bezier point and using the perpendicular to the curve, calculate another point that is placed at width/2 distance of that point in direction of the perpendicular vector. That gives you one side of the outline. The other side is simply calculated by using the perpendicular multiplied by -1 and using width/2 as well.
- Repeat that for many intermediate points of the bezier (from p1 to p2) and connect them with a polygon shape. It gives you the outline shape.
The value of the width at one intermediate point in the bezier between p1 and p2 is calculated by linear interpolation. Interpolation can be based on the bezier index of the position of the point or the [0,1) length on the bezier (it is called homogeneous in the Outline layer parameter)
Advanced Outline principles are similar but it has more parameters that control the width along the curve and it is not as “simple” to explain in a forum post.
Please let me know if you need more information.
I hope it helped.
Cheers!
-G
Thanks Genete. I think that I understand the concept. I will try to add the outline layer.
Wihoo!
Neither have I played with it as much as I’d like due to low on spare time…
But it is extremely cool and I do plan on using it for some kind of banner as soon as I get some spare time.
I’ve only tested it briefly with some different files and apart from different layers not working yet I haven’t found much wrong or any bugs. For a tool this early in development that is really impressive!
Keep up your great work, it is a fantastic tool you are creating here, even if you’re not getting the appreciation or feedback you’d wish for here in the forums.
I’ll spread the word about it.
Thanks rylleman.
Genete I have a little problem with the width value. It is for example 54! and my view-box is -5.333333 4.000000 5.333333 -4.000000. Can you help?
Edit: Sorry I just reallized that you had allready answered my question.
Hi Genete. Can you help me with this?
Just calculate the derivative of the cubic Bezier curve in function of t:
en.wikipedia.org/wiki/B%C3%A9zie … ier_curves
This is also interesting:
forums.cgsociety.org/archive/ind … 38392.html
And this one too:
cs.mtu.edu/~shene/COURSES/cs … r-der.html
You can find code in Synfig that already does that:
github.com/synfig/synfig/blob/m … _hermite.h
github.com/synfig/synfig/blob/m … calculus.h
-G
Thanks Genete.
In the start I thought that outlines where bezier curves. But synfig is rendering them as polygons with too many sides. Is that right?
Right
-G
This is a huge draw back. I was able to render the region layer by using the bezierCurveTo method.
As I understand it right now synfig is calculating all the necessary middle points to render a similar region, cause the mathematics behind the bezier curve are the same we got the same output.
But the outline is rendering it self with a quite different method that I cannot find something similar in the HTML5 cairo at least.
So outlines are not going to be used in sifPlayer. Of course we can have an outline with unchanged point width… Unless someone had found a method to draw outlines with the classic vector graphics methods like bezierCurveTo or quadraticCurveTo.
This must be and one of the draw backs for exporting proper svg.
If I remember things correctly the time synfig was originally developed there where two leading vector graphics libs. Anti-grain and cairo. Until the time firefox decided to use cairo for it’s rendering the battle was going on for the standard vector graphics engines ( I think this was around the same time synfig become opensource. 2004). But after that and the integration of cairo in the html5. Cairo became in a reasonable way the standard vector graphics engine. But synfig had it’s own vector graphic engine for rendering all ready. Also synfig uses many raster graphics techniques for blend methods and maybe other stuff that I am not aware of.
I wish all the good luck to the devs that are trying to implement cairo in synfig. This is very important for the future of synfig.
So I will implement outline without the width of the points but with the overall width of curse. That you can find in the params tab of the outline Outline Width. It’s almost a copy paste of the source of the region layer for me. So I will add some more conversions and the outline in the next release…