Forums > Javascript

Using jit.gl.sketch within JavaScript

December 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.


December 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


December 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.

http://www.cycling74.com/forums/index.php?t=msg&goto=35289

I’ve quoted again for convenience at bottom. This and other patches
are also in my CNMAT JitterNightSchool patches:

Stuffit:
http://www.orthlorng.com/jkc/JitterNightSchool-Day1.sit
http://www.orthlorng.com/jkc/JitterNightSchool-Day2.sit

http://www.orthlorng.com/jkc/JitterNightSchool-Day3.sit

ZIP:
http://www.orthlorng.com/jkc/JitterNightSchool-Day1.zip
http://www.orthlorng.com/jkc/JitterNightSchool-Day2.zip

http://www.orthlorng.com/jkc/JitterNightSchool-Day3.zip

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)

http://www.orthlorng.com/jkc/js-circlemask.sit

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


Viewing 3 posts - 1 through 3 (of 3 total)