Creating curves with MGraphics

Jun 4, 2013 at 10:18am

Creating curves with MGraphics

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?

 

 

 

#251677
Jun 4, 2013 at 12:27pm

an example patch might help, but have you tried jit.path, or jit.gl.path?

#251689
Jun 4, 2013 at 1:14pm

I believe you just use a sequence of curve_to calls. You can also check out the cairographics.org examples/docs, since mgraphics’ API maps closely to Cairo.

#251693
Jun 4, 2013 at 2:30pm

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?

 

Thanks,

Anthony

 

 

 

 

#251697
Jun 4, 2013 at 2:52pm

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:

<code>

– Pasted Max Patch, click to expand. –

</code>

#251700
Jun 4, 2013 at 2:57pm

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 [jit.gl.render] object for drawing into our window:
var glrender = new JitterObject(“jit.gl.render”,”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;

draw();

mgfx.identity_matrix();
theImage = new Image(mgfx.pop_group());
mgfx.image_surface_draw(theImage);

theImage.tonamedmatrix(outmatrix.name);
outlet(0, “jit_matrix”, outmatrix.name);

gc();

}

#251701
Jun 5, 2013 at 8:05am

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?

#251737
Jun 6, 2013 at 11:06am

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.

#251908
Jun 7, 2013 at 3:04pm

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.

http://processingjs.nihongoresources.com/code%20repository/?get=Catmull-Rom-to-Bezier

#252011

You must be logged in to reply to this topic.