Quick question about the image() function in mgraphics. I need to draw an image, display it, update/append data to it. Is that possible?

Background: I need to draw 2000+ shapes in the jsui object incrementally building up my picture as I go (this is timed, sort of like an animation). So I have a counter that goes through my array of pre-calculated shapes. Of course only the shape at the current counter number is displayed. So I used a for loop to loop through the entire array up to the counter number. Works fine until the CPU comes to a grind because of the number of shapes. So I thought I could draw my context to an image and then append new shapes to that image, drawing 1 image instead of thousands of shapes...

mgraphics-append-shapes-to-image

here is some code I am playing with right now. What I don't understand is why the image keeps offsetting on each bang message. With each iteration the image seems to shift by a couple of pixels in the x and y direction... nice effect but not what I am after. why is this happening? Screenshot attached as well...

inlets = 1;
outlets = 2;
autowatch = 1;

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

var curImage                = new Image();

var width                     = box.rect[2] - box.rect[0];
var height                     = box.rect[3] - box.rect[1];
/************************/
function paint()
{    
    mgraphics.set_line_width(2.);
    mgraphics.set_source_rgba(1., 0., 0., 1.);
            
    
        
    with (mgraphics)    {            
        
        push_group();        
                
        image_surface_draw(curImage);  //draw old image
        curImage.freepeer();    
            
        //add more shapes
        set_source_rgb(Math.random(), Math.random(), Math.random());
        set_line_width(5);
        rectangle(0, 0, width- 5, height-5);
        stroke();
        
        rectangle(Math.random() * width, Math.random() * height, 50, 50);
        
        
        
        set_source_rgb(Math.random(), Math.random(), Math.random());
        
        fill();
                
            
        //save as new image
        curImage = new Image(pop_group());

        //draw the new image
        image_surface_draw(curImage);
    
    }
    
    post("image size = ", curImage.size, "\n");
}
/************************/
function bang()
{
    mgraphics.redraw();
}
/************************/


inlets = 1;
outlets = 2;
autowatch = 1;

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

var curImage				= new Image();

var width 					= box.rect[2] - box.rect[0];
var height 					= box.rect[3] - box.rect[1];
/************************/
function paint()
{	
	mgraphics.set_line_width(2.);
	mgraphics.set_source_rgba(1., 0., 0., 1.);
			
	
		
	with (mgraphics)	{			
		
		push_group();		
				
		image_surface_draw(curImage);  //draw old image
		curImage.freepeer();	
			
		//add more shapes
		set_source_rgb(Math.random(), Math.random(), Math.random());
		set_line_width(5);
		rectangle(0, 0, width- 5, height-5);
		stroke();
		
		rectangle(Math.random() * width, Math.random() * height, 50, 50);
		
		
		
		set_source_rgb(Math.random(), Math.random(), Math.random());
		
		fill();
				
			
		//save as new image
		curImage = new Image(pop_group());

		//draw the new image
		image_surface_draw(curImage);
	
	}
	
	post("image size = ", curImage.size, "\n");
}
/************************/
function bang()
{
	mgraphics.redraw();
}
/************************/


the 2px offset its weird ! dont know . cant explain it .

inlets = 1;
outlets = 2;
autowatch = 1;

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

var curImage                = new Image();

var width                     = box.rect[2] - box.rect[0];
var height                     = box.rect[3] - box.rect[1];
/************************/
function paint()
{    
    mgraphics.set_line_width(2.);
    mgraphics.set_source_rgba(1., 0., 0., 1.);
            
    
        
    with (mgraphics)    {            
        translate(-2,-2); // HEEEEEEEEREEE I AM
        push_group();        
                
        image_surface_draw(curImage);  //draw old image
        curImage.freepeer();    
            
        //add more shapes
        set_source_rgb(Math.random(), Math.random(), Math.random());
        set_line_width(5);
        rectangle(0, 0, width- 5, height-5);
        stroke();
        
        rectangle(Math.random() * width, Math.random() * height, 50, 50);
        
        
        
        set_source_rgb(Math.random(), Math.random(), Math.random());
        
        fill();
                
            
        //save as new image
        curImage = new Image(pop_group());

        //draw the new image
        image_surface_draw(curImage);
    
    }
    
    post("image size = ", curImage.size, "\n");
}
/************************/
function bang()
{
    mgraphics.redraw();
}
/************************/


Hi !
the 2px offset its weird ! dont know . cant explain it .

inlets = 1;
outlets = 2;
autowatch = 1;

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

var curImage				= new Image();

var width 					= box.rect[2] - box.rect[0];
var height 					= box.rect[3] - box.rect[1];
/************************/
function paint()
{	
	mgraphics.set_line_width(2.);
	mgraphics.set_source_rgba(1., 0., 0., 1.);
			
	
		
	with (mgraphics)	{			
		translate(-2,-2); // HEEEEEEEEREEE I AM
		push_group();		
				
		image_surface_draw(curImage);  //draw old image
		curImage.freepeer();	
			
		//add more shapes
		set_source_rgb(Math.random(), Math.random(), Math.random());
		set_line_width(5);
		rectangle(0, 0, width- 5, height-5);
		stroke();
		
		rectangle(Math.random() * width, Math.random() * height, 50, 50);
		
		
		
		set_source_rgb(Math.random(), Math.random(), Math.random());
		
		fill();
				
			
		//save as new image
		curImage = new Image(pop_group());

		//draw the new image
		image_surface_draw(curImage);
	
	}
	
	post("image size = ", curImage.size, "\n");
}
/************************/
function bang()
{
	mgraphics.redraw();
}
/************************/


a hack would be a translate . its offseting back these 2px .


This seems to work better. Is this efficient?

inlets = 1;
outlets = 2;
autowatch = 1;

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

var curImage    = new Image();

var width = box.rect[2] - box.rect[0];
var height = box.rect[3] - box.rect[1];
/************************/
function paint()
{    
mgraphics.set_line_width(2.);
mgraphics.set_source_rgba(1., 0., 0., 1.);

with (mgraphics)    {    

image_surface_draw(curImage);

}

post("image size = ", curImage.size, "\n");
}
/************************/
function bang()
{    
makeImage();

mgraphics.redraw();
}
/************************/
function makeImage()
{

var canvas = new MGraphics(width, height);

canvas.image_surface_draw(curImage);

canvas.set_source_rgb(getRandomColour());
canvas.set_line_width(5);
canvas.rectangle(0, 0, width- 5, height-5);
canvas.stroke();

canvas.rectangle(Math.random() * width, Math.random() * height, 50, 50);

canvas.set_source_rgb(Math.random(), Math.random(), Math.random());

canvas.fill();

curImage = new Image(canvas);
}
/************************/


inlets = 1;
outlets = 2;
autowatch = 1;

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

var curImage	= new Image();

var width = box.rect[2] - box.rect[0];
var height = box.rect[3] - box.rect[1];
/************************/
function paint()
{	
mgraphics.set_line_width(2.);
mgraphics.set_source_rgba(1., 0., 0., 1.);

with (mgraphics)	{	

image_surface_draw(curImage);

}

post("image size = ", curImage.size, "\n");
}
/************************/
function bang()
{	
makeImage();

mgraphics.redraw();
}
/************************/
function makeImage()
{

var canvas = new MGraphics(width, height);

canvas.image_surface_draw(curImage);

canvas.set_source_rgb(getRandomColour());
canvas.set_line_width(5);
canvas.rectangle(0, 0, width- 5, height-5);
canvas.stroke();

canvas.rectangle(Math.random() * width, Math.random() * height, 50, 50);

canvas.set_source_rgb(Math.random(), Math.random(), Math.random());

canvas.fill();

curImage = new Image(canvas);
}
/************************/


I should think that the creation of the MGraphics drawing context "var canvas= new MGraphics(width,height)" should be outside the function makeImage(). I guess on every call of function makeImage() your are now creating another new MGraphics drawing context and they all draw on top of each other. This may slow down or eventualls even crash the program. To avoid this I would place the "var canvas= new MGraphics(width,height)" at the very beginning above the function paint().

mgraphics append shapes to image()