Draw good-looking Bezier Curve through random points

javascript math graph svg raphael
Nameless picture Nameless · Aug 10, 2011 · Viewed 14.2k times · Source

I'm using javascript with RaphaelJS to draw a smooth line through random points with output to SVG. The line goes strictly horizontally, without returning back in axis X. Currently, I'm using cubic Bezier curves to draw the line from one point to another.

Problem is, the line doesn't look good enough. Two curves have an unsightly join at a point, where one curve ends and another curve starts, with quite random angle in the joint. How do I get the previous curve to transform into next one smoothly, while still keeping the line passing through given point?

Answer

heycam picture heycam · Aug 10, 2011

Catmull-Rom curves work well for going through points. http://schepers.cc/getting-to-the-point

Related questions

Is there any JavaScript libraries for graph operations and algorithms?

What I need is a JavaScript implementation of pure mathematical graphs. To be clear I DON'T mean graph visualization libraries like sigma.js or d3.js. The library I'm looking for would implement following features: creation of directed and undirected …

Read More
Integer division with remainder in JavaScript?

In JavaScript, how do I get: The whole number of times a given integer goes into another? The remainder?

Read More
JavaScript math, round to two decimal places

I have the following JavaScript syntax: var discount = Math.round(100 - (price / listprice) * 100); This rounds up to the whole number. How can I return the result with two decimal places?

Read More