Evan

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.

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?

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? 

best-way-to-draw-a-sine-wave

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

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

    var l = arrayfromargs(arguments, messagename);

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

        clear_surface(); // Important, allows transparency

        set_source_rgb(1.,0.,1.);

        theImage = new Image(pop_group());

    theImage.tonamedmatrix(outmatrix.name);

    outlet(0, "jit_matrix", outmatrix.name);

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;

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();

	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
}


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

clear_surface(); // Important, allows transparency

    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;

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.

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.


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

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?

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.

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

Best way to draw a sine wave?