Marco Lorenzin

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've tried to change gluortho2d values... for example 

gluortho2d(-aspect.ratio, aspect.ratio, -1., 1.) or gluortho2d(-1., 1., 

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

    sketch.glclearcolor(1., 1., 1., 1.);

    sketch.glmatrixmode("projection");

    sketch.gluortho2d(0., aspect.width, 0., aspect.height);

    aspect.height = box.rect[3] - box.rect[1];

    aspect.width = box.rect[2] - box.rect[0];

    aspect.ratio = aspect.width/aspect.height;

    init(); //call the init() function when the object is resized

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?

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


jsui-sketch-setup-methods

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.

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

    glPolygonMode(GL_FRONT, GL_FILL);

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

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

    glClearColor(1., 1., 1., 1.);        

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);

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.

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


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 

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, 

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 

(if you try the same example with GLUT OR Java's JOGL, you don't need to 

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

    sketch.gluortho2d(0, aspect.width, 0, aspect.height);

    sketch.glmatrixmode("modelview");

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)

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

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 ?

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

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 ?

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


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.

https://cycling74.com/forums/scrolling-jsui

 the maximum horizontal size seems to be 4096.

Beyond this limits the content is stretch.

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.


jsui - sketch setup methods