Draw Bezier - type "soft"

[Eckstein1 0 Likes (Newbie)]

Hi,

 

I'm creating a bezier curve of the type "soft". It works perfectly as it should. I want to draw the bezier path it's following.

If I use all other available types I'm able to draw the bezier path, but I found no way to draw one of the type "soft".

 

For the different types I'm using the following methods:

1. cubic: graphics.cubicCurveTo() method of Flash

2. quadratic: graphics.curveTo() method of Flash

3. thru: BezierPlugin.bezierThrough() method of Greensock and graphics.curveTo() method of Flash (attribute basic=false)

4. thruBasic: BezierPlugin.bezierThrough() method of Greensock and graphics.curveTo() method of Flash (attribute basic=true)

5. soft: ?

 

Thanks for the great tool and your help

Uli

[Carl 9,066 Likes (Superhero)]

Thanks for the kind works. 

 

I'm not so sure we are exposing the path data of "soft" in a way that is accessible or easy to translate back to the AS3 drawing API. Will have to escalate this issue and dig a little deeper. 

[GreenSock 8,117 Likes (Superhero)]

If I remember correctly, "soft" treats the first and last points as anchors, and then everything inbetween as control points, bisecting them to fabricate anchors inbetween the control points. 

[Eckstein1 0 Likes (Newbie)]

Hi,

 

thanks for your reply.

How can I calculate the anchors inbetween to be able to use the AS3 drawing API?

[GreenSock 8,117 Likes (Superhero)]

Loop through your points and make the adjustments I mentioned above, and feed the results as Quadratic Beziers. Remember, just bisect (plot the midpoint) between the control points you're feeding in, and use the result as the anchors along the way. 

[Eckstein1 0 Likes (Newbie)]

Hi,

thanks again for your answer. Now I got you. Look what I tried:

import com.greensock.*;
import com.greensock.easing.*; 
import com.greensock.plugins.*; 

// movieclip for bezier
var m1:MovieClip;
m1 = new MovieClip();
m1.graphics.lineStyle(1, 0xff0000, 1);

// bezier
var a1:Array = [{x:0,y:300},{x:90,y:10},{x:280,y:200},{x:330,y:480},{x:580,y:190},{x:780,y:680},{x:800,y:400}];

// draw soft bezier
m1.graphics.moveTo(a1[0].x, a1[0].y);
m1.graphics.curveTo(a1[1].x, a1[1].y, a1[1].x+((a1[2].x-a1[1].x)/2), a1[1].y+((a1[2].y-a1[1].y)/2));
for (var u1:uint=2; u1<a1.length-2; u1++) {
	m1.graphics.curveTo(a1[u1].x, a1[u1].y, a1[u1].x+((a1[u1+1].x-a1[u1].x)/2), a1[u1].y+((a1[u1+1].y-a1[u1].y)/2));
}
m1.graphics.curveTo(a1[u1].x, a1[u1].y, a1[u1+1].x, a1[u1+1].y);

// circle
var m2:MovieClip;
m2 = new MovieClip();
m2.graphics.beginFill(0xffcc00, 1);
m2.graphics.lineStyle(1, 0xffcc00, 1);
m2.graphics.drawCircle(0, 0, 10);

// tween circle along bezier
m2.x=a1[0].x, m2.y=a1[0].y;
var t1:TweenMax = TweenMax.to(m2, 5, {bezier:{autoRotate:false, timeResolution:6, type:"soft", values:a1}, ease:Linear, repeat:-1});

// add to display list
addChild(m1), addChild(m2);

This works perfect for all points except the first Segment. The circle moves above the ploted line. 

 

I don't understand what I'm doing wrong. The first one is quite simple it uses the first anchor and control point. I just have to calculate the second anchor (which is used as anchor for the next point, too).

 

What am I doing wrong? Thanks in advance.

Kind Regards,

Uli

[GreenSock 8,117 Likes (Superhero)]

Unfortunately this is a bit beyond what we normally provide here for free support. I wish we had the time to dig into issues like this an analyze our customers' custom code to troubleshoot it, but with the success of GSAP and all the features we're working on, we just don't have the time. Feel free to analyze our source code to see what the "soft" bezier does and adjust your code accordingly. 

[Eckstein1 0 Likes (Newbie)]

Hi,

at BezierPlugin.as I did deactivate the following lines and it works as it should:

/** @private parses the bezier data passed into the tween and organizes it into the appropriate format with an array for each property. **/
public static function _parseBezierData(values:Array, type:String, prepend:Object=null):Object {
	type = type || "soft";
	var obj:Object = {},
		inc:int = (type === "cubic") ? 3 : 2,
		soft:Boolean = (type === "soft"),
		a:Number, b:Number, c:Number, d:Number, cur:Array, props:Array, i:int, j:int, l:int, p:String, cnt:int, tmp:Object;
//	if (soft && prepend) {
//		values = [prepend].concat(values);
//	}

Unfortunatelly I have no idea what these lines are for.

Kind regards,

Uli

[Eckstein1 0 Likes (Newbie)]

Hi,

after double checking the code I did the following mod:

/** @private **/
override public function _onInitTween(target:Object, value:*, tween:TweenLite):Boolean {
...
//k	this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate || "x,y,z", prepend) : _parseBezierData(values, vars.type, first);
/*k*/	this._beziers = (vars.type !== "cubic" && vars.type !== "quadratic" && vars.type !== "soft") ? bezierThrough(values, isNaN(vars.curviness) ? 1 : vars.curviness, false, (vars.type === "thruBasic"), vars.correlate || "x,y,z", prepend) : _parseBezierData(values, vars.type, prepend);
...

Is this mod better than the previous. Please recomment.

Thanks.