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:
- We start with three dots (green) on the screen.
- We need to connect these dots with a smooth line (blue) rather than direct lines (grey).
- What would be your approach if you can use only following methods: lineTo and curveTo?
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.
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.
So, here’s the result: