jsui - sketch setup methods

Marco Lorenzin

Hi all

I'm trying to set different state variables for a jsui object using an
init() function rather than the default2d/default3d/ortho3d methods, but
i can't make it working.
I've tried to change gluortho2d values... for example
gluortho2d(-aspect.ratio, aspect.ratio, -1., 1.) or gluortho2d(-1., 1.,
-1., 1.), but i didn't have any joy.
Do i make something wrong?

Thank you for any explanation

Marco

---------

init(); // use init() function rather than sketch.default2d()
draw();
refresh();

function init()
{
    sketch.glclearcolor(1., 1., 1., 1.);
    sketch.glcolor(0., 0., 0., 1.);
    sketch.glmatrixmode("projection");
    sketch.glloadidentity();
    sketch.gluortho2d(0., aspect.width, 0., aspect.height);
    sketch.glclear();
}

function draw()
{
    sketch.glbegin("polygon");
        sketch.glvertex(0., 0);
        sketch.glvertex(0., 1.);
        sketch.glvertex(1., 1.);
    sketch.glend();
}

function aspect()
{
    aspect.height = box.rect[3] - box.rect[1];
    aspect.width = box.rect[2] - box.rect[0];
    aspect.ratio = aspect.width/aspect.height;
}

function onresize()
{
    aspect();
    init(); //call the init() function when the object is resized
    draw();
    refresh();
}

Joshua Kit Clayton

Haven't gone through it, but here's our C code for default2d() if it
helps you out any. Don't forget to spend time with the OpenGL redbook
if you're looking for some gluortho2d usage. Also keep in mind that
you need to have your shapes within the clipping planes (gluortho2d
uses -1 near clip plane, 1 far clip plane), so your shapes mught be
too far to be visible given your camera position.

Good luck.

-Joshua

sketch_setcontext(x);
aspect = (GLdouble)x->size[0] / (GLdouble)x->size[1];

glPolygonMode(GL_FRONT, GL_FILL);
glPolygonMode(GL_BACK, GL_FILL);

glDisable(GL_DEPTH_TEST);
glDisable(GL_FOG);

    // texture
    glEnable(GL_TEXTURE_2D);
    glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glDisable(GL_TEXTURE_2D);

    // color/lighting/shading
    glColor4fv(x->color);
    glShadeModel(GL_SMOOTH);
    glDisable(GL_LIGHTING);
    glDisable(GL_LIGHT0);
    glDisable(GL_NORMALIZE);

    // camera/view/lookat
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(-aspect, aspect, -1, 1, -1, SDEF_CLIP_FAR);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    gluLookAt(SDEF_CAM_X, SDEF_CAM_Y, SDEF_CAM_Z,
        SDEF_LOOK_X, SDEF_LOOK_Y, SDEF_LOOK_Z,
        SDEF_UP_X, SDEF_UP_Y, SDEF_UP_Z);

    //erase
    glClearColor(1., 1., 1., 1.);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);

Marco Lorenzin

Hi Joshua,

thanks a lot for your answer

i looked at the set of calls of the default2d method (Javascript
documentation, p. 60), and i definitely missed something obvious: the C
code was very useful, as i could verify that the aspect variable of the
default2d method refers to the ratio of the width and the height of the
jsui window.

The default2d method puts the origin, (0, 0) in the middle of the
window. Now i'm able to change the coordinate system for drawing so that
the lower-left corner is (0, 0), and the upper-right corner is (width,
height).
I don't understand why in the init() function i also had to add two
lines of code for the modelview matrix, otherwise JSUI doesn't display
the geometry:
sketch.glmatrixmode("modelview");
sketch.glloadidentity();
(if you try the same example with GLUT OR Java's JOGL, you don't need to
make it)

Anyway, this is finally my simple, working code!!

Marco

----

aspect();
init(); // use init() function rather than sketch.default2d()
draw();
refresh();

function init()
{
    sketch.glclearcolor(1., 1., 1., 1.);
    sketch.glcolor(0., 0., 0., 1.);
    sketch.glmatrixmode("projection");
    sketch.glloadidentity();
    sketch.gluortho2d(0, aspect.width, 0, aspect.height);
    sketch.glmatrixmode("modelview");
    sketch.glloadidentity();
    sketch.glclear();
}

function draw()
{
    sketch.glbegin("triangles");
        sketch.glvertex(15, 0);
        sketch.glvertex(0, 15);
        sketch.glvertex(55, 55);
    sketch.glend();
}

function aspect()
{
aspect.height = box.rect[3] - box.rect[1];
aspect.width = box.rect[2] - box.rect[0];
}

function onresize()
{
    aspect();
    init(); //call the init() function when the object is resized
    draw();
    refresh();
}

taprik

Hi,

I'm trying to draw small shapes in a big jsui.
Marco, your init() method is a great idea.
Indeed, my problem still remains the same as it seems to be a "definition" issue with the jsui object. In the patch below I change the size of the jsui and the shape is not the same in a small or a big jsui. I'd better say, the shape is the same but the definition is not.
Is there a way to have the same definition of the a shape in a big or a small jsui or is this kind of behaviour is specific of the jsui object ?

Max Patch

Copy patch and select New From Clipboard in Max.

In the patch below, I use the javascript code from Marco.

taprik

The jsui seems to have a limitation in his size.
When I try to change his size with the message "size .. .." the maximum vertical size is 2048.
According to the post https://cycling74.com/forums/scrolling-jsui the maximum horizontal size seems to be 4096.
Beyond this limits the content is stretch.