AudioMatt

Before I go crazy doing this myself, I'm trying to write something like function but confined inside a rectangle inside jsui. That requires cropping. So. If anyone has a decent geometry library going for JSUI I'd greatly appreciate it.

Before I go  crazy doing this myself,  I'm trying to write something like function but confined inside a rectangle inside jsui.  That requires cropping.  So.   If anyone has a decent geometry library going for JSUI I'd greatly appreciate it.

Before I go  crazy doing this myself,  I'm trying to write something like function but confined inside a rectangle inside jsui.  That requir

jsui-geometry-library

Your best bet with this is to use an offscreen MGraphics instance that you draw the contents of your cropped rectangle into, and then in your primary context, set that instance as the fill source but using 'set_source_surface(surface);'

var instance = new MGraphics(w,h);
instance.ellipse(x,y,w,h);
instance.fill();
mgraphics.set_source_surface(instance);
mgraphics.rect(x,y,w,h);
mgraphics.fill();

HOLY BALLS WHERE IS THAT DOCUMENTED?! I just wasted 3 days finding and learning Liang Barsky Clipping to get around this!

gonna try it now. Ug that'll be frustrating (albeit more elegant) if it works. I wrote and used a whole geometry library to do that clipping.

@andrew  re set_source_surface:   HOLY BALLS WHERE IS THAT DOCUMENTED?!   I just wasted 3 days finding and learning Liang Barsky Clipping to get around this! 

gonna try it now.  Ug that'll be frustrating (albeit more elegant) if it works.  I wrote and used a whole geometry library to do that clipping.

Nope... wait this doesn't work at all as far as I can tell andrew.

Nope...  wait this doesn't work at all as far as I can tell andrew.

Nope... this doesn't work at all as far as I can tell andrew. I thought it was but no dice.

Nope...   this doesn't work at all as far as I can tell andrew.   I thought it was but no dice.

Just digging in to the mgraphics examples... (Which I feel like I've used a million times) but I'm noticing now that...

The connector example instantly started spitting out errors when I tried to use it. Like it's totally non functional.

The the mgraphic-demo is... well... open it. The code is completely unexplained. There's tons of code that isn't called, commented out, uncommented, there's also a built in function I've never heard of with an undescriptive name gc()?

If you need someone to redo your documentation for this, send me the MGraphics NOBOX source code and I'll put together your docs and examples.

Just digging in to the mgraphics examples...  (Which I feel like I've used a million times) but I'm noticing now that...

The connector example instantly started spitting out errors when I tried to use it.  Like it's totally non functional.

The the mgraphic-demo is...  well... open it.   The code is completely unexplained.  There's tons of code that isn't called, commented out, uncommented, there's also a built in function I've never heard of with an undescriptive name gc()?

If you need someone to redo your documentation for this, send me the MGraphics NOBOX source code and I'll put together your docs and examples. 

That's what I get for trying to post a solution at 5PM on a Friday. I should really know better.

Looking back at the 'warpy2.js' code I see that there's an extra step of first converting the offscreen canvas to a new Image(instance). In that case I used image_surface_draw, but it should work the same if using pattern methods or set_source_surface.

I agree that our documentation for some parts of MGraphics is a little thin, but there are lots of examples scattered around that should hopefully help.

:( 
That's what I get for trying to post a solution at 5PM on a Friday. I should really know better.
Looking back at the 'warpy2.js' code I see that there's an extra step of first converting the offscreen canvas to a new Image(instance). In that case I used image_surface_draw, but it should work the same if using pattern methods or set_source_surface.
I agree that our documentation for some parts of MGraphics is a little thin, but there are lots of examples scattered around that should hopefully help. 

Andrew, Okay now this is getting weird because warpy2 (I didn't see it because spotlight isn't searching the max package) does this correctly but I submitted a bug report with the following code and it's totally fucked up. I'll and try and tear this apart soon.

autowatch=1
mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;

var width = 0;
var height = 0;

var outImage;

mgraphics.redraw();
 
 
function bang(){
    refresh();
}

function paint()
{

    var mg = new MGraphics(100,100);
    with(mg){
        init();
        relative_coords=0;
        autofill=0;

        set_source_rgba(.5,.5,.5,.3);

        move_to(0,0);
        line_to(100,97);
        stroke();

        move_to(50,50);
        select_font_face("Arial");
    
        set_font_size(20);
    
        show_text("mytext");
    }

    outImage=new Image(mg);

    
    with (mgraphics) {

        // draw the image
        image_surface_draw(outImage);
    }
}

Andrew,   Okay now this is getting weird because warpy2 (I didn't see it because spotlight isn't searching the max package) does this correctly but I submitted a bug report with the following code and it's totally fucked up.    I'll and try and tear this apart soon.

autowatch=1
mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;

var width = 0;
var height = 0;

var outImage;

mgraphics.redraw();
 
 
function bang(){
	refresh();
}

function paint()
{

	var mg = new MGraphics(100,100);
	with(mg){
		init();
		relative_coords=0;
		autofill=0;

		set_source_rgba(.5,.5,.5,.3);

		move_to(0,0);
		line_to(100,97);
		stroke();

		move_to(50,50);
		select_font_face("Arial");
	
		set_font_size(20);
	
		show_text("mytext");
	}

	outImage=new Image(mg);

	
	with (mgraphics) {

		// draw the image
		image_surface_draw(outImage);
	}
}

Yeah andrew, if you dump this into warpy2.js at the bottom of paint(), it's totally fucked up . I think warpy2 benefits from drawing nice vertical lines. I can't really figure it out but somethings definitely funky. As I mentioned, I already reported this.

var mg = new MGraphics(100,100);
    with(mg){
      //init(); 
      relative_coords=0;
      autofill=0;
      set_source_rgba(.5,.5,.5,1);
      set_line_width(0.5);
      move_to(0,0);
      line_to(100,97);
      move_to(40.5,10);
      line_to(40.5,60);
      stroke();
      move_to(50,50);
      select_font_face("Arial");
      set_font_size(20);
      show_text("mytext");
    }
    outImage=new Image(mg); 
    mgraphics.set_source_rgba(.5,.5,.5,1);
    mgraphics.image_surface_draw(outImage,0,0,200,200);

Yeah andrew, if you dump this into warpy2.js at the bottom of paint(), it's totally fucked up .  I think warpy2 benefits from drawing nice vertical lines.   I can't really figure it out but somethings definitely funky.  As I mentioned, I already reported this.

After further investigation, it appears that the reason warpy2.js works is because the original is being scaled down. If you comment out the scale statement in line 37, the ugly as sin issue persists.

PS this is clearly an issue with antialiasing/alpha blending.

After further investigation, it appears that the reason warpy2.js works is because the original is being scaled down.  If you comment out the scale statement in line 37, the ugly as sin issue persists.

PS this is clearly an issue with antialiasing/alpha blending.  

@Andrew: "I agree that our documentation for some parts of MGraphics is a little thin, but there are lots of examples scattered around that should hopefully help."

It would take someone who thoroughly understands MGraphics one day at most to flesh out the SINGLE page of reference documentation for MGraphics. It takes every user who can't discern the expected behaviors from the paltry documentation hours of their time floundering trying to figure it out.

Something like this "set_source_surface" call... it has one short sentence description in the docs. Darwin's "patch a day" reference doesn't ever use it, and this forum post is the ONLY hit in the website search for that term.

Something like this "set_source_surface" call... it has one short sentence description in the docs.  Darwin's "patch a day" reference doesn't ever use it, and this forum post is the ONLY hit in the website search for that term.

Just a quick note that the MGraphics API was modeled after 

. It isn't an exactly 1:1 mapping, but you may find some helpful documentation there.

Just a quick note that the MGraphics API was modeled after Cairo. It isn't an exactly 1:1 mapping, but you may find some helpful documentation there.  

JSUI Geometry library