Best way to draw a sine wave?


    Mar 10 2016 | 5:01 pm
    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?

    • Mar 11 2016 | 1:49 am
      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 }
    • Mar 11 2016 | 3:39 pm
      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.
    • Mar 11 2016 | 7:00 pm
      A traditional approach with jit.expr and jit.gl.graph.
    • Mar 11 2016 | 8:05 pm
      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?
    • Mar 13 2016 | 12:53 pm
      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 :
    • Mar 13 2016 | 11:48 pm
      Evan, maybe you can use jit.gl.path instead of jit.gl.graph to draw the line?