jsui mysketch


    Dec 20 2007 | 2:27 pm
    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(); } }

    • Dec 20 2007 | 3:12 pm
      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(); > } > } >
    • Dec 20 2007 | 3:14 pm
      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(); > > } > > } > > >
    • Dec 20 2007 | 8:13 pm
      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(); }
    • Dec 22 2007 | 3:30 pm
      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
    • Dec 22 2007 | 6:29 pm
      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
    • Dec 22 2007 | 8:23 pm
      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
    • Dec 22 2007 | 8:27 pm
      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
    • Dec 27 2007 | 4:56 pm
      > > 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:
      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 else if (x>width) x = width; if (y else if (y>height) y = height;
      selected = -1; for (i=0;i { if (x>point[i][0] && xpoint[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