meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation
http://camanjs.com
BSD 3-Clause "New" or "Revised" License
3.55k stars 404 forks source link

Chaining curves with different lengths gives TypeError #36

Closed bebraw closed 12 years ago

bebraw commented 12 years ago

Try following:

Caman("#image", function () {
    this.curves('rgb', [0, 0], [100, 120], [180, 240], [255, 255]);

    // Specifying individual color channels
    this.curves(['r', 'b'], [0, 0], [180, 240], [255, 255]);

    this.render();
});

Note the uneven length of the curves. This seems to result in "Uncaught TypeError: Cannot read property '0' of undefined ".

Is there some nice way to adjust "value" of the colors using a curve?

meltingice commented 12 years ago

For the curves() function, you have to specify 4 arguments: a start point, 1st control point, 2nd control point, and end point.

Not sure what you mean by "adjusting the value of the colors," could you elaborate a bit?

bebraw commented 12 years ago

For the curves() function, you have to specify 4 arguments: a start point, 1st control point, 2nd control point, and end point. Not sure what you mean by "adjusting the value of the colors," could you elaborate a bit?

Basically I'm trying to port a color filter from a GIMP plugin.

The original code looks like this:

(gimp-curves-spline draw  HISTOGRAM-VALUE 8 #(0 0 68 64 190 219 255 255))
(gimp-curves-spline draw  HISTOGRAM-RED   8 #(0 0 39 93 193 147 255 255))
(gimp-curves-spline draw  HISTOGRAM-GREEN 6 #(0 0 68 70 255 207))
(gimp-curves-spline draw  HISTOGRAM-BLUE  6 #(0 0 94 94 255 199))

Apparently value maps to overall brightness. As you can see some of those channels have just three pairs of control points. Any idea how to work around these issues?

Thanks for the prompt feedback by the way. :)

meltingice commented 12 years ago

Hmm... I may be wrong, but at first look I think the same effect can be achieved if the middle two control points have the same coordinate.

Caman("#image", function () {
  this.curves('g', [0, 0], [68, 70], [68, 70], [255, 207]);
  this.render();
});

This is something that can be built into the curves() function in the future by checking for the # of arguments.

bebraw commented 12 years ago

Hmm... I may be wrong, but at first look I think the same effect can be achieved if the middle two control points have the same coordinate.

Oh, right. That's definitely true.

This is something that can be built into the curves() function in the future by checking for the # of arguments.

Cool. I'll write a patch for you that does that.

Any idea how to deal with that value bit? I can probably live without that, though.

meltingice commented 12 years ago

Not too sure... I would need to either see examples of what it's doing or play around with it myself in GIMP.

bebraw commented 12 years ago

Not too sure... I would need to either see examples of what it's doing or play around with it myself in GIMP.

Ok. No probs. If I figure that out, I'll contribute a patch.

Going to close this issue given we managed to sort the issue out. Now to get that patch underway. :)