Best way to draw a sine wave?
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?
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
}
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.
I use a little bpatcher for that :
Evan, maybe you can use jit.gl.path instead of jit.gl.graph to draw the line?