jsui mysketch

Dec 20, 2007 at 2:27pm

jsui mysketch

hi
i am trying to build a multi-2D slider as jsui and hanging at the
very basics.
since i don’t want to redraw all sliders i want to use multiple
sketches (like sprites).
below is my basic misunderstanding, the function dsketch works,
but the function dsketch2 is doing nothing…

if somebody already did a jsui for multiple 2D-sliders and wants to
share this, i would not mind as well ;-)

thanks
klaus

autowatch = 1;
inlets = 2;
outlets = 1;
sketch.default2d();
var vbrgb = [0.3,0.3,0.6,0.5];
var vfrgb = [0.8,0.8,0.3,0.5];
var width = box.rect[2] – box.rect[0];
var height = box.rect[3] – box.rect[1];

var sketch2 = new Sketch(width,height);
sketch2.default2d();

function dsketch()
{
with (sketch)
{
glclearcolor(vbrgb);
glclear();
refresh();
}
}

function dsketch2()
{
with (sketch2)
{
glclearcolor(vbrgb);
glclear();
refresh();
}
}

#35072
Dec 20, 2007 at 3:12pm

Perhaps someone else will be of more help, but I started with js in
max at a very similar position, and very soon just gave up on
newSketch() / sprite-ish approach an just redraw the whole sketch,
that’s the way all the examples I’ve seen work do it.

Try having separate functions for the various sliders which will each
be called by a master drawing function.

On the other hand, I too would still be interested to find out how to
get the newSketch thing going…

Sam

On 20/12/2007, klaus filip wrote:
> hi
> i am trying to build a multi-2D slider as jsui and hanging at the
> very basics.
> since i don’t want to redraw all sliders i want to use multiple
> sketches (like sprites).
> below is my basic misunderstanding, the function dsketch works,
> but the function dsketch2 is doing nothing…
>
> if somebody already did a jsui for multiple 2D-sliders and wants to
> share this, i would not mind as well ;-)
>
> thanks
> klaus
>
> autowatch = 1;
> inlets = 2;
> outlets = 1;
> sketch.default2d();
> var vbrgb = [0.3,0.3,0.6,0.5];
> var vfrgb = [0.8,0.8,0.3,0.5];
> var width = box.rect[2] – box.rect[0];
> var height = box.rect[3] – box.rect[1];
>
> var sketch2 = new Sketch(width,height);
> sketch2.default2d();
>
>
>
> function dsketch()
> {
> with (sketch)
> {
> glclearcolor(vbrgb);
> glclear();
> refresh();
> }
> }
>
> function dsketch2()
> {
> with (sketch2)
> {
> glclearcolor(vbrgb);
> glclear();
> refresh();
> }
> }
>

#119133
Dec 20, 2007 at 3:14pm

Perhaps i should add that problem I always had was not making or even
using new sketch objects , but seeing them – I could never see the
results of anything but the default sketch instance…

On 20/12/2007, Samuel Freeman wrote:
> Perhaps someone else will be of more help, but I started with js in
> max at a very similar position, and very soon just gave up on
> newSketch() / sprite-ish approach an just redraw the whole sketch,
> that’s the way all the examples I’ve seen work do it.
>
> Try having separate functions for the various sliders which will each
> be called by a master drawing function.
>
> On the other hand, I too would still be interested to find out how to
> get the newSketch thing going…
>
> Sam
>
> On 20/12/2007, klaus filip wrote:
> > hi
> > i am trying to build a multi-2D slider as jsui and hanging at the
> > very basics.
> > since i don’t want to redraw all sliders i want to use multiple
> > sketches (like sprites).
> > below is my basic misunderstanding, the function dsketch works,
> > but the function dsketch2 is doing nothing…
> >
> > if somebody already did a jsui for multiple 2D-sliders and wants to
> > share this, i would not mind as well ;-)
> >
> > thanks
> > klaus
> >
> > autowatch = 1;
> > inlets = 2;
> > outlets = 1;
> > sketch.default2d();
> > var vbrgb = [0.3,0.3,0.6,0.5];
> > var vfrgb = [0.8,0.8,0.3,0.5];
> > var width = box.rect[2] – box.rect[0];
> > var height = box.rect[3] – box.rect[1];
> >
> > var sketch2 = new Sketch(width,height);
> > sketch2.default2d();
> >
> >
> >
> > function dsketch()
> > {
> > with (sketch)
> > {
> > glclearcolor(vbrgb);
> > glclear();
> > refresh();
> > }
> > }
> >
> > function dsketch2()
> > {
> > with (sketch2)
> > {
> > glclearcolor(vbrgb);
> > glclear();
> > refresh();
> > }
> > }
> >
>

#119134
Dec 20, 2007 at 8:13pm

On Dec 20, 2007, at 6:27 AM, klaus filip wrote:

> hi
> i am trying to build a multi-2D slider as jsui and hanging at the
> very basics.
> since i don’t want to redraw all sliders i want to use multiple
> sketches (like sprites).
> below is my basic misunderstanding, the function dsketch works,
> but the function dsketch2 is doing nothing…

Other sketch instances are not visible. They must be drawn into the
main sketch to see. This is demonstrated in the jsui_imagestuff-
example.pat, in the sketchpix() js function, which I’ve included
below. You can also copy sketch instances pixels to an image for use
with the other image drawing functions. Hope this gets you on the
right track.

-Joshua

// the sketchpix function demonstrates rendering into another
instance of sketch
// and then copying to the main Sketch object, this.sketch. this can
be useful
// to make sprites, or generating geometry based alpha masks, etc.
function sketchpix(x,y)
{
// create a new instance of sketch
var rendersketch = new Sketch(64,64);

// draw some things in new sketch instance
with (rendersketch) {
default2d();
glcolor(0,1,0,1);
moveto(0,0);
circle(0.7);
glcolor(1,0,0,1);
roundedplane(0.1,0.3);
}

// copy to main sketch instance
with (sketch) {
glclearcolor(0,0,1,1);
glclear();
if (myblend)
glenable(“blend”);
else
gldisable(“blend”);
copypixels(rendersketch,x,y);
}
refresh();
}

#119135
Dec 22, 2007 at 3:30pm

Hi Joshua,

In the copypix example, the “blend” feature work, though it does not work anymore in this sketchpix + rendersketch case.

How is it possible to make the white section in the rendersketch disapear ?

I too like the idea of having several sketches, to avoid redrawing, and then render them in the main sketch.

Salvator

#119136
Dec 22, 2007 at 6:29pm

thanks joshua,
so this means i have to clear the entire main sketch on every move of
one of my sliders.

maybe a good approach then would be to “record” all other sliders
into one sketch instance,
and redraw the moving slider together with a copypixels of that
sketch instance.

\
klaus

On Dec 20, 2007, at 9:13 PM, Joshua Kit Clayton wrote:

>
> On Dec 20, 2007, at 6:27 AM, klaus filip wrote:
>
>> hi
>> i am trying to build a multi-2D slider as jsui and hanging at the
>> very basics.
>> since i don’t want to redraw all sliders i want to use multiple
>> sketches (like sprites).
>> below is my basic misunderstanding, the function dsketch works,
>> but the function dsketch2 is doing nothing…
>
> Other sketch instances are not visible. They must be drawn into the
> main sketch to see. This is demonstrated in the jsui_imagestuff-
> example.pat, in the sketchpix() js function, which I’ve included
> below. You can also copy sketch instances pixels to an image for
> use with the other image drawing functions. Hope this gets you on
> the right track.
>
>
> -Joshua

#119137
Dec 22, 2007 at 8:23pm

On Dec 22, 2007, at 7:30 AM, Salvator wrote:

> In the copypix example, the “blend” feature work, though it does
> not work anymore in this sketchpix + rendersketch case.
>
> How is it possible to make the white section in the rendersketch
> disapear ?

Did you see the sketchpixalpha example? It uses a chromakey type
algorithm on a target color to generate an alpha channel.

-Joshua

#119138
Dec 22, 2007 at 8:27pm

On Dec 22, 2007, at 10:29 AM, klaus filip wrote:

> thanks joshua,
> so this means i have to clear the entire main sketch on every move
> of one of my sliders.

No, you can just draw on to the sub-region desired (if you need the
background cleared for the sprite, you can draw a colored rectangle
rather than use an entire glclear call). Make sense?

> maybe a good approach then would be to “record” all other sliders
> into one sketch instance,
> and redraw the moving slider together with a copypixels of that
> sketch instance.

You can use the main sketch as this group buffer if you like as the
above might suggest.

If you have a clear example where you are having issues with the
suggested approach, we could point out any remaining issues.

-Joshua

#119139
Dec 27, 2007 at 4:56pm

>
> If you have a clear example where you are having issues with the
> suggested approach, we could point out any remaining issues.
>
> -Joshua

well, here is my second approach.
i sticked to the copypixel of the buffer sketch (sketch2) because i
need to redraw sliders that were covered by the
moving slider.
thanks for any advices.
klaus

the testing patch:

#P toggle 154 31 15 0;
#P window setfont “Sans Serif” 9.;
#P window linecount 1;
#P message 153 50 44 196617 fsaa $1;
#P message 34 405 87 196617 1 369 124;
#P newex 34 380 62 196617 prepend set;
#P flonum 83 27 35 9 0 0 0 3 0 0 0 221 221 221 222 222 222 0 0 0;
#P message 82 47 53 196617 radius $1;
#P button 239 134 15 0;
#N vpatcher 50 119 650 519;
#P inlet 241 72 15 0;
#P outlet 142 250 15 0;
#P window setfont “Sans Serif” 9.;
#P newex 242 221 75 196617 prepend points;
#P newex 332 181 31 196617 + 20;
#P newex 242 164 27 196617 – 1;
#P button 241 96 15 0;
#P newex 242 192 40 196617 0 0 0;
#P newex 279 162 32 196617 * 20;
#P newex 332 161 27 196617 * 2;
#P newex 241 122 40 196617 uzi 20;
#P connect 7 0 8 0;
#P connect 0 1 8 0;
#P connect 9 0 4 0;
#P connect 4 0 0 0;
#P connect 0 2 5 0;
#P connect 5 0 3 0;
#P connect 3 0 7 0;
#P connect 2 0 3 1;
#P connect 6 0 3 2;
#P connect 0 2 2 0;
#P connect 0 2 1 0;
#P connect 1 0 6 0;
#P pop;
#P newobj 239 153 53 196617 p draw20;
#P message 156 128 52 196617 0 200 10;
#P message 34 113 87 196617 clearpoints , bang;
#P button 103 144 15 0;
#P message 135 109 144 196617 0 200 70 , 1 300 20 , 2 50 50;
#P newex 145 153 75 196617 prepend points;
#P user jsui 34 179 571 191 3 0 0 llseq.js;
#P connect 12 0 0 0;
#P connect 8 0 0 0;
#P connect 4 0 0 0;
#P connect 3 0 0 0;
#P connect 1 0 0 0;
#P connect 6 0 0 0;
#P connect 0 0 10 0;
#P connect 10 0 11 0;
#P connect 9 0 8 0;
#P connect 5 0 3 0;
#P connect 2 0 3 0;
#P connect 5 0 1 0;
#P connect 2 0 1 0;
#P connect 13 0 12 0;
#P connect 7 0 6 0;
#P window clipboard copycount 14;

the (hopefully not too messy) javascript:

autowatch = 1;
inlets = 2;
outlets = 1;
sketch.default2d();
var vbrgb = [0.3,0.3,0.6];
var vfrgb = [0.8,0.8,0.3];
var w = [0,0,0];
var vx = 0;
var vy = 0;
var vradius;
var wradius;
var width = box.rect[2] – box.rect[0];
var height = box.rect[3] – box.rect[1];
var point = new Array();
var dx, dy, selected;
var sketch2 = new Sketch(width,height);
sketch2.default2d();

radius(0.1);

function clearpoints()
{
point.length = 0;
selected = -1;
rendersketch();
with (sketch)
{
glclearcolor(vbrgb);
glclear();
}
refresh();
}

function points()
{

var a = arrayfromargs(arguments);
var b = a.length;
point[arguments[0]] = [arguments[1], height-arguments[2]];
if (a.length>3) point[a[0][3]] = a[3];
rendersketch();
}

function draw()
{

w = sketch.screentoworld(point[selected]);
with (sketch)
{
glclearcolor(vbrgb);
glclear();
copypixels(sketch2,0,0);
if (selected > -1)
{
glcolor(vfrgb);
moveto(w[0]+vradius,w[1]-vradius);
plane(vradius,vradius);
moveto(w[0],w[1]-0.01);
line(0,-2.);
}
}
}

function bang()
{
draw();
refresh();
}

function fsaa(v)
{
sketch.fsaa = v;
sketch2.fsaa = v;
bang();
}

function frgb(r,g,b)
{
vfrgb[0] = r/255.;
vfrgb[1] = g/255.;
vfrgb[2] = b/255.;
draw();
refresh();
}

function brgb(r,g,b)
{
vbrgb[0] = r/255.;
vbrgb[1] = g/255.;
vbrgb[2] = b/255.;
draw();
refresh();
}

function radius(v)
{

vradius = v;
wradius = (sketch.worldtoscreen(v)[0]-sketch.worldtoscreen(0)[0])*2.;
draw();
refresh();
}

function onresize(w,h)
{
width = box.rect[2] – box.rect[0];
height = box.rect[3] – box.rect[1];
post(“width”, width, ” height”, height, “n”);
draw();
refresh();
}
onresize.local = 1; //private

function rendersketch()
{
with (sketch2)
{
glclearcolor(vbrgb);
glclear();
}
for (i=0;i

{
if (i!= selected)
{
w = sketch2.screentoworld(point[i]);
with (sketch2)
{
glcolor(vfrgb);
moveto(w[0]+vradius,w[1]-vradius);
plane(vradius,vradius);
moveto(w[0],w[1]-0.01);
moveto(w[0],w[1]-0.01);
line(0,-2.);

}
}
}
}

function onclick(x,y)
{
//post(x,y,”n”);
if (x<0) x = 0;
else if (x>width) x = width;
if (y<0) y = 0;
else if (y>height) y = height;

selected = -1;
for (i=0;i

{
if (x>point[i][0] && x

point[i][1] &&
y

{
selected = i;
dx = point[i][0]-x;
dy = point[i][1]-y;
rendersketch();
ondrag(x,y);
}

}

}
onclick.local = 1; //private

function ondrag(x,y)
{
if (selected>-1)
{
point[selected][0] = x+dx;
point[selected][1] = y+dy;
outlet(0,selected,point[selected][0],height-point[selected][1]);
bang();
}
}
ondrag.local = 1; //private

#119140

You must be logged in to reply to this topic.