Using jit.gl.sketch within JavaScript


    Dec 13 2006 | 11:25 am
    Hello, I am having problems figuring out how to include the huge selection of OpenGL commands that appear to be accessable through jit.gl.sketch. The only reference that I have found is the tutorial including the file 47jJitterListener.pat. This clever program provided a modifiable template for several projects but I was not able to modify it to do something as simple as draw a circle! I had to resort to the using a jit.gl.gridshape torus and making it very very thin to simulate a circle. I think that there is probably a simple solution to making lines, arcs, and circles within JavaScript using the jit.gl.sketch command and would appreciate very much directions on its usage. Thank you for any input that you can provide.

    • Dec 13 2006 | 1:05 pm
      On 12/13/06, keith wrote: > > > Hello, > I am having problems figuring out how to include the huge selection of > OpenGL commands that appear to be accessable through jit.gl.sketch. The > only reference that I have found is the tutorial including the file > 47jJitterListener.pat. This clever program provided a modifiable template > for several projects but I was not able to modify it to do something as > simple as draw a circle! I had to resort to the using a jit.gl.gridshapetorus and making it very very thin to simulate a circle. I think that there > is probably a simple solution to making lines, arcs, and circles within > JavaScript using the jit.gl.sketch command and would appreciate very much > directions on its usage. > Thank you for any input that you can provide.
      the jit.gl.sketch helpfile has most of it in there, including drawing circles. If you use javascript read the JavascriptInMax.pdf found in the documentation.
      -thijs
    • Dec 13 2006 | 5:38 pm
      On Dec 13, 2006, at 3:25 AM, keith wrote:
      > I am having problems figuring out how to include the huge selection > of OpenGL commands that appear to be accessable through > jit.gl.sketch. The only reference that I have found is the tutorial > including the file 47jJitterListener.pat. This clever program > provided a modifiable template for several projects but I was not > able to modify it to do something as simple as draw a circle!
      As mentioned by Thijs, jit.gl.sketch has a circle command, but note that it is nothing more than a collection of vertices wrapped around a circle (on a fundamental level OpenGL just draws triangles and lines out of which all other shapes can be built). One example of making a circle (with feathered edges and used as an alpha channel mask) is in the archives in this thread.
      I've quoted again for convenience at bottom. This and other patches are also in my CNMAT JitterNightSchool patches:
      Also, it might seem daunting at first, but once you get deeper into OpenGL, you'll find the OpenGL red book and other online OpenGL documentation to be useful references. Sorry that complete documentation of OpenGL is beyond the scope of our documentation resources.
      - Joshua
      --------------------------------------------
      Here's an example that uses the MaxMSP 4.5's js object and sketch class to accomplish this. It could also be done as just a max patcher using jit.gl.sketch in MaxMSP 4.3. Note that even using js (not jsui) you can instantiate instances of the sketch class and use them to draw and then copy into jitter matrices as is demonstrated in this example.
      Archive at the following URL, relevant javascript source at bottom of message (for the archives)
      -Joshua
      /*
      making a circular mask with sketch
      */
      var img = new Image(); var imgtmp = new Image(); var mysketch = new Sketch(320,240); var sintab = new Array(); var costab = new Array(); var vx=0; var vy=0; var vrad=1.; var vfeather=0.2; var vslices; var vwireframe=0;
      mysketch.fsaa = 0; mysketch.default2d(); slices(100);
      function slices(v) { var i,iscale;
      vslices = Math.max(3,v); iscale = 2*Math.PI/(vslices-1); for (i=0;i sintab[i] = Math.sin(i*iscale); costab[i] = Math.cos(i*iscale); } }
      function radius(v) { vrad = Math.max(0,v); }
      function feather(v) { vfeather = Math.max(0,v); }
      function wireframe(v) { vwireframe = v; }
      function center(x,y) { vx = x; vy = y; }
      function draw() { var i,inrad;
      inrad = Math.max(0,vrad-vrad*vfeather); //feather as a percentage of radius
      with (mysketch) { mysketch.setcontext(); glclearcolor(0,0,0); glclear(); // first draw the inner circle, white (all on) glpolygonmode("front_and_back",vwireframe); glbegin("tri_strip"); glcolor(1,1,1); for (i=0;i glvertex(vx,vy); glvertex(vx+(inrad*sintab[i]),vy+(inrad*costab[i])); } glend(); // then draw the outer ring, linearly interpolating from white to black glbegin("tri_strip"); for (i=0;i glcolor(1,1,1); glvertex(vx+(inrad*sintab[i]),vy+(inrad*costab[i])); glcolor(0,0,0); glvertex(vx+(vrad*sintab[i]),vy+(vrad*costab[i])); } glend(); glfinish(); } }
      // when we receive a jit_matrix message: resize if necessary, draw the image, stuff into the alpha channel, and pass on function jit_matrix(mname) { img.fromnamedmatrix(mname);
      if ((img.size[0]!=mysketch.size[0]) || (img.size[1]!=mysketch.size [1])) { mysketch.size[0] = image.size[0]; mysketch.size[1] = image.size[1]; } draw();
      if ((imgtmp.size[0]!=mysketch.size[0]) || (imgtmp.size[1]! =mysketch.size[1])) { imgtmp = new Image(mysketch); } else { imgtmp.copypixels(mysketch); } img.copychannel(imgtmp,"red","alpha"); img.tonamedmatrix(mname); outlet(0,"jit_matrix",mname); }