I need an interactive cubic spline editor (i.e Curve Editor) similar to the RGB Curve Editor in many image editing applications like Lightroom, Photoshop or Google Snapseed. It does NOT need to do any image processing.
Technical Criteria:
- written in javascript/html5 and/or jQuery (you'll likely use canvas)
- layout size: Width: 1080px, Height: 480px.
- curve is initialized as a straight line from 0.0 (lower left corner) to 1.0 (upper right corner) by default (see attachment: [login to view URL]) OR as a curve drawn from a 'preset' array of a maximum of 16 control points (see [login to view URL])
- Only needs to work in Google Chrome, no cross browser compatibility required (Yay!)
Interactivity:
- by single-clicking anywhere on the curve a new control point is added. Double-clicking removes a point. A maximum of 16 control points is allowed.
- observe the interactivity of the curve tool in image editing applications like Photoshop to get a feel for the required interactivity of the editor.
- curve should be 'updatable' with preset array (16 points max, ie 32 coordinate values)
- - curve initialization, adding and removing curve points, point-drag events and updating the entire curve with preset values should be accessible from a higher code level to easily connect the front-end control to backend processing operations.
Styling:
- doesn't need fancy design. Barebones functionality is enough. The following style parameters should however be adjustable:
- line width, line color, point size, point-images for active/non-active states (png, you can use the attached examples)
Requirements:
- tidy, well commented code.
- you can use libraries but please include a brief description on why you decided to use any library and what it does
Lastly, here are some resources on the spline interpolation methods commonly used for similar tools:
[login to view URL]
[login to view URL]
[login to view URL]
[login to view URL]
I would like to work with someone who has some previous experience with similar tools and a problem solving oriented work ethic. I will personally be available throughout the project to answer any questions you might have.