Sunday, September 28, 2014

the processing/processing.js gap

Trying to learn about making some prettier graphs I decided to resurrect an old "drag the anchor and control points of bezier curve" toy I made a while back.

I like that this toy actually taught me about bezier spline curves; that I could make a composite curve by setting the endpoints of two different curves to the same x,y and then putting the control points on the same line... (the two lower curves on this example are sort of doing that)

You can play with the toy here. I had a harsh lesson making the web/processing.js version once the processing (Java) version was working fine: I had overloaded the processing functions line() and bezier() to take a new Point class, but in the Javascript translation, that had overshadowed the native functions full stop -- without Java's object typing, it couldn't tell which version I wanted to call.

The fix was simply renaming the functions to something that didn't collide with the built-in functions. I often say processing.js is a "good 90-95% solution" for translating Java to js, but that remaining 5-10% is pretty confusing to debug!

No comments:

Post a Comment