Question

I have an application that is very “connection-based”, i.e. multiple inputs/outputs.

The UI concept of a “cable” is exactly what I’m looking for to make the concept clear to the user. Propellerhead took a similar approach in their Reason software for audio components, illustrated in this YouTube video (fast forward to 2m:50s).

I can make this concept work in GDI by painting a spline from point A to point B, there’s got to be a more elegant way to use Paths or something in WPF for this, but where do you start? Is there a good way to simulate the animation of the cable swing when you grab it and shake it?

I’m also open to control libraries (commercial or open source) if this wheel has already been invented for WPF.

Update: Thanks to the links in the answers so far, I’m almost there.

I’ve created a BezierCurve programmatically, with Point 1 being (0, 0), Point 2 being the bottom “hang” point, and Point 3 being wherever the mouse cursor is. I’ve created a PointAnimation for Point 2 with an ElasticEase easing function applied to it to give the “Swinging” effect (i.e., bouncing the middle point around a bit).

Only problem is, the animation seems to run a little late. I’m starting the Storyboard each time the mouse moves, is there a better way to do this animation? My solution so far is located here:

Bezier Curve Playground

Code:

private Path _path = null;
private BezierSegment _bs = null;
private PathFigure _pFigure = null;
private Storyboard _sb = null;
private PointAnimation _paPoint2 = null;
ElasticEase _eEase = null;

private void cvCanvas_MouseMove(object sender, MouseEventArgs e)
{
    var position = e.GetPosition(cvCanvas);
    AdjustPath(position.X, position.Y);
}

// basic idea: when mouse moves, call AdjustPath and draw line from (0,0) to mouse position with a "hang" in the middle
private void AdjustPath(double x, double y)
{
    if (_path == null)
    {
        _path = new Path();
        _path.Stroke = new SolidColorBrush(Colors.Blue);
        _path.StrokeThickness = 2;
        cvCanvas.Children.Add(_path);

        _bs = new BezierSegment(new Point(0, 0), new Point(0, 0), new Point(0, 0), true);

        PathSegmentCollection psCollection = new PathSegmentCollection();
        psCollection.Add(_bs);

        _pFigure = new PathFigure();
        _pFigure.Segments = psCollection;
        _pFigure.StartPoint = new Point(0, 0);


        PathFigureCollection pfCollection = new PathFigureCollection();
        pfCollection.Add(_pFigure);

        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures = pfCollection;

        _path.Data = pathGeometry;
    }

    double bottomOfCurveX = ((x / 2));
    double bottomOfCurveY = (y + (x * 1.25));

    _bs.Point3 = new Point(x, y);

    if (_sb == null)
    {
        _paPoint2 = new PointAnimation();

        _paPoint2.From = _bs.Point2;
        _paPoint2.To = new Point(bottomOfCurveX, bottomOfCurveY);
        _paPoint2.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
        _eEase = new ElasticEase();

        _paPoint2.EasingFunction = _eEase;
        _sb = new Storyboard();

        Storyboard.SetTarget(_paPoint2, _path);
        Storyboard.SetTargetProperty(_paPoint2, new PropertyPath("Data.Figures[0].Segments[0].Point2"));

        _sb.Children.Add(_paPoint2);
        _sb.Begin(this);                
    }

    _paPoint2.From = _bs.Point2;
    _paPoint2.To = new Point(bottomOfCurveX, bottomOfCurveY);

    _sb.Begin(this);
}

Answer 1

If you want true dynamic motion (ie, when you “shake” the mouse pointer you can create waves that travel along the cord), you will need to use finite element techniques. However if you are ok with static behavior you can simply use Bezier curves.

First I’ll briefly describe the finite element approach, then go into more detail on the static approach.

Dynamic approach

Divide your “cord” into a large number (1000 or so) “elements”, each with a position and velocity Vector. Use the CompositionTarget.Rendering event to compute each element position as follows:

• Compute the pull on each element along the “cord” from adjacent elements, which is proportional to the distance between elements. Assume the cord itself is massless.

• Compute the net force vector on each “element” which consists of the pull from each adjacent element along the cord, plus the constant force of gravity.

• Use a mass constant to convert the force vector to accelaration, and update the position and velocity using the equations of motion.

• Draw the line using a StreamGeometry build with a BeginFigure followed by a PolyLineTo. With so many points there is little reason to do the extra computations to create a cubic bezier approximation.

Static approach

Divide your cord into perhaps 30 segments, each of which is a cubic bezier approximation to the catenary y = a cosh(x/a). Your end control points should be on the catenary curve, the parallels should tangent to the catenaries, and the control line lengths set based on the second derivative of the catenary.

In this case you will probably also want to render a StreamGeometry, using BeginFigure and PolyBezierTo to build it.

I would implement this as a custom Shape subclass “Catenary” similar to Rectangle and Ellipse. In that case, all you have to override the DefiningGeometry property. For efficiency I would also override CacheDefiningGeometry, GetDefiningGeometryBounds, and GetNaturalSize.

You would first decide how to parameterize your catenary, then add DependencyProperties for all your parameters. Make sure you set the AffectsMeasure and AffectsRender flags in your FrameworkPropertyMetadata.

One possible parameterization would be XOffset, YOffset, Length. Another might be XOffset, YOffset, SagRelativeToWidth. It would depend on what would be easiest to bind to.

Once your DependencyProperties are defined, implement your DefiningGeometry property to compute the cubic bezier control points, construct the StreamGeometry, and return it.

If you do this, you can drop a Catenary control anywhere and get a catenary curve.