Best way to draw a sine wave?

Evan's icon

I need to draw a bunch of sine waves with varying thickness, and I'm looking for suggestions on the best approaches. I rigged something up in javascript that sends a 'setcell' message to a jit. matrix, but the results have been less than ideal.

Should i look into jit.gl.sketch?
Can I do this directly from js?
What about gen? Can I use that for drawing, or is that better suited for image processing?
What about doing in with jit.gl.slab, and just writing a shader?

Any suggestions greatly appreciated?

djlbe's icon

You could use javascript and MGraphics here is a little template for send what you draw in a jit matrix :

autowatch = 1;
inlets = 2;
outlets = 1;
setoutletassist(0, "Matrix output");

var w = 720;
var h = 480;
var w2 = w * 0.5;
var h2 = h * 0.5;    

var mgfx = new MGraphics(w,h);
mgfx.init();
mgfx.relative_coords = 0;
mgfx.autofill = 0;

var outmatrix = new JitterMatrix(4, "char", w, h);

function bang() {
    paint();
}

function dim(l) {
    //Redim
    var l = arrayfromargs(arguments, messagename);
    w = l[0];
    h = l[1];
    w2 = w * 0.5;
    h2 = h * 0.5;
    mgfx = new MGraphics(w,h);
    outmatrix = new JitterMatrix(4, "char", w, h);
    gc();

}

// DRAWNING

function paint() {
    var theImage = null;

    with (mgfx) {
        clear_surface(); // Important, allows transparency
        // What you want to draw
        /*
        set_line_width(2);
        set_source_rgb(1.,0.,1.);
        move_to(0, 50);
        line_to(50, 50);
        stroke();
        */
        theImage = new Image(pop_group());
    }

    theImage.tonamedmatrix(outmatrix.name);
    outlet(0, "jit_matrix", outmatrix.name);
    gc(); //Important for memory
}

Evan's icon

Thanks for the template! I replaced the paint() routine with this:

function paint() {
var theImage = null;
with (mgfx) {
clear_surface(); // Important, allows transparency
// What you want to draw
set_line_width(5);
set_source_rgb(1.,0.,1.);
for (i = 0; i < w; i ++){
    current_pos = h2 * (Math.sin(freq * 2 * Math.PI * i/w)) + h2;
    next_pos = h2 * (Math.sin(freq * 2 * Math.PI * (i + 1)/w)) + h2;
    move_to(i, current_pos);
    line_to(i + 1, next_pos);
    stroke();
    //outlet(1, current_pos)
}
theImage = new Image(pop_group());
}

And it does draw a sine wave, but it's pretty jagged. I suppose I could process this matrix. But I am wondering if there is a better way to draw a sine wave then the could that I used? It makes sense to me, doing it that way, but I am no graphics programmer, there might be a better solution.

Pedro Santos's icon
Max Patch
Copy patch and select New From Clipboard in Max.

A traditional approach with jit.expr and jit.gl.graph.

Evan's icon

That's awesome, much smoother than my implementation. Any advice on getting around the discontinuities that pop up at the peaks with hhigher line width values?

djlbe's icon

if a problem of aliasing occurs that's because the background is transparent (sorry, I forgot to tell it) , but if you replace the background with a color, your sinewave will looks much smoother.

Max Patch
Copy patch and select New From Clipboard in Max.

I use a little bpatcher for that :

Pedro Santos's icon

Evan, maybe you can use jit.gl.path instead of jit.gl.graph to draw the line?