Creating curves with MGraphics

    Jun 04 2013 | 5:18 pm
    I am trying to create a bezier spline curve that goes through four points.But it looks like MGraphics only supports curves of three points. curve_to(x1, y1, x2, y2, x3, y3); How can I create a curve using MGraphics that will support more points?

    • Jun 04 2013 | 7:27 pm
      an example patch might help, but have you tried jit.path, or
    • Jun 04 2013 | 8:14 pm
      I believe you just use a sequence of curve_to calls. You can also check out the examples/docs, since mgraphics' API maps closely to Cairo.
    • Jun 04 2013 | 9:30 pm
      I am working on a javascript porting library that allows you to easily port processing sketches to jitter. I am currently using MGraphics as my drawing interface.
      In processing you can create a curve in the following manner:
      beginShape(); curveVertex(84,  91); curveVertex(84,  91); curveVertex(68,  19); curveVertex(21,  17); curveVertex(32, 100); curveVertex(32, 100); endShape();
      Which should look something like this...
      I am using the following code...
      function draw() { mgfx.move_to(84,  91); mgfx.curve_to(84,  91, 68,  19, 21,  17); mgfx.curve_to(32, 100, 32, 100, 32, 100); mgfx.set_source_rgba(1, 0, 0, 1); mgfx.stroke(); }
      Rather clumsy, but I know of no other way. What I get is...
      I have attached an example patch. Any ideas?
    • Jun 04 2013 | 9:52 pm
      it looks like processing uses catmull-rom splines for drawing curves, which draws the curve through each vertex. this is also how jit.path draws curves.
      here is an example of using jit.path to draw curves with jit.mgraphics:
    • Jun 04 2013 | 9:57 pm
      For some reason the images i posted do not show. Also, I made mistake in my javascript. Here is the update source... autowatch = 1; var width = 500; var height = 300;
      // create a [] object for drawing into our window: var glrender = new JitterObject("","render-ctx"); // use a 2-dimensional projection: glrender.ortho = 2; glrender.blend_enable = 1; glrender.blend = "alphablend"; glrender.depth_enable = 0; glrender.erase_color = [0,0,0,1]; // set background to black with full erase opacity (no trails):
      var mgfx = new MGraphics(width,height);
      // init drawing context mgfx.init(); mgfx.relative_coords = 0; mgfx.autofill = 0;
      var outmatrix = new JitterMatrix(4, "char", width, height);
      function bang() { drawProcessingScene(); }
      function draw() { mgfx.move_to(84,  91); mgfx.curve_to(84,  91, 68,  19, 21,  17); mgfx.curve_to(32, 100, 32, 100, 32, 100); mgfx.set_source_rgba(1, 0, 0, 1); mgfx.stroke(); }
      function drawProcessingScene() { var theImage = null;
      mgfx.identity_matrix(); theImage = new Image(mgfx.pop_group()); mgfx.image_surface_draw(theImage);
      theImage.tonamedmatrix(; outlet(0, "jit_matrix",;
    • Jun 05 2013 | 3:05 pm
      Hey Rob,
      Thanks for the great example. But I am doing things in Javascript. Would I be able to create an instance of jit.path and then send its output to jit.mgraphics?
    • Jun 06 2013 | 6:06 pm
      unfortunately jit.path doesn't function inside javascript. i will make a feature request for this. in the meantime, perhaps you can pass path messages to an external jit.path, and send the outputted matrix back into your javascript for iterating.
    • Jun 07 2013 | 10:04 pm
      FWIW, on quick google, here's a processing.js example of converting a catmull rom curve to a cubic bezier approximation. That's the route I'd probably take to build a processing curve() workalike. You can begin a curve/path and then when ending it convert all the points to bezier form and then issue the corresponding mgraphics curve_to() calls.
    • Oct 02 2014 | 12:54 am
      Since this thread is more than a year old, I'm sure Anthony has already found the answer to his original question, but since I'm working on bezier curves and trying to port from processing and other sources. I thought I'd update.
      As I've discovered in the documentation, mgraphics' curve_to call does utilizes 4 points. I believe both Processing and mgraphics utilize cubic bezier formulas. The start point is the current point.Then curve_to call takes 2 control points and an end point. Here's the edited draw function:
      function draw() { mgfx.move_to(84, 91); mgfx.curve_to(68, 19, 21, 17, 32, 100); mgfx.set_source_rgba(1, 0, 0, 1); mgfx.stroke(); }
      I'm now going to search for the porting library from Processing-Jitter!
    • Oct 02 2014 | 1:00 am
      uh oh! I just looked up the processing curve, and I'm wrong. though they utilize the same start and control points, the curve from mgraphics and from processing don't look the same!
    • Oct 02 2014 | 3:06 pm
      as joshua mentioned above, you need to convert catmull-rom to cubic bezier.
    • Oct 02 2014 | 3:37 pm
      Thank you Rob. I'm currently following Joshua's suggestions step by step.