Bézier curves


Some time ago I did some interview question that I just wanted to share mostly because I want to keep a backup of it.

The questions were the following:


  1. We start with three dots (green) on the screen.
  2. We need to connect these dots with a smooth line (blue) rather than direct lines (grey).
  3. What would be your approach if you can use only following methods: lineTo and curveTo?
    lineTo(X,Y)
    Draws a line using the current line style from the current drawing position to (X,Y); the current drawing position is then set to (X,Y).
    curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number) : void
    Draws a curve using the current line style from the current drawing position to (anchorX, anchorY) and using the control point that (controlX, controlY) specifies. The current drawing position is then set to (anchorX, anchorY). The curve drawn is a quadratic Bezier curve. Quadratic Bezier curves consist of two anchor points and one control point. The curve interpolates the two anchor points and curves toward the control point.

When I first read the challenge and that I’m not bound to any technology, I thought of HTML5, Canvas and SVG. A while before that time I had stumbled upon some impressive samples of JavaScript drawing with Raphael Library so I gave it a try.
Since they stated: “Feel free to use any resources available to you.” I decided to take full advantage of the library, but still had to do the curves calculation.
I also decided to go with HTML5 and Canvas since that is the field of work I like the most – and in addition was the most simple way to deploy and show the code and results.

To get a simple and clean start I used the http://html5boilerplate.com/ template.

All the javascript code of the drawings can be found here: http://mattanjakern.de/share/bezier/js/script.js

So, here’s the result:

,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.