CODEWITHSUNDEEP
beziercytoscape.js
twoLeftFeet
twoLeftFeet

Reputation: 720

Using cytoscape to generate bezier curve - which parameters should I use?

I'm really confused by cytoscape's parameters and how they line up with a bezier curve generation.

I have several columns of evenly spaced points. I'd like to draw curves that look like this between the points:

http://cubic-bezier.com/#.5,.01,.48,.99

So far I've tried a wide variety of different arguments but none have gotten me very close. I'd appreciate any suggestions.

Upvotes: 1

Views: 397

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

Firstly, if you want beziers that aren't automatically bundled, then you need to use unbundled-beziers.

A control point for an edge is specified relatively to the source and target node. So you can think of the control points being in a co-ordinate system with dimensions (w, d). This maintains the relative shape of the edge as the source and target move.

The w dimension is progress from the source node position (w = 0), going directly towards the target node position (w = 1).

The d dimension is the perpendicular distance away from the line segment formed straight from w = 0 to w = 1.

From the docs:

This is w : control-point-weights : A series of values that weights control points along a line from source to target, e.g. 0.25 0.5 0.75. A value usually ranges on [0, 1], with 0 towards the source node and 1 towards the target node — but larger or smaller values can also be used.

This is d : control-point-distances : A series of values that specify for each control point the distance perpendicular to a line formed from source to target, e.g. -20 20 -20.

So you just specify [w1, w2, w3, ..., wn] and [d1, d2, d3, ..., dn] with (wi, di) specifying a particular control point.

Upvotes: 1

Related Questions