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] && 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