The method discussed here can allow you to create a custom look for your windows and let people move them around. This screenshot is from radiaL – an application for loop-based performances built using Max/MSP.

And now the drum roll please…

// windowdragger.js
// by Andrew Pask

var vrgb2 = [0.35,0.35,0.35,1.];
var last_x = 0;
var last_y = 0;

sketch.default2d();
draw();

// DRAWING ************************************************
function draw()
{
	var theta;
	var width = box.rect[2] - box.rect[0];

	with (sketch) {
		moveto(0,0);
		glclearcolor(vrgb2);
		glclear();
		glcolor(vrgb2);
		quad(0., 0., 0., 1., 0., 0., 1., 1., 0., 0., 1., 0.);
	}
}

// MOUSE EVENTS ************************************************
function onclick(x,y,but,cmd,shift,capslock,option,ctrl)
{
	// cache mouse position for tracking delta movements
	last_x = x;
	last_y = y;
}
onclick.local = 1; //private. 

function ondrag(x,y,but,cmd,shift,capslock,option,ctrl)
{
	var dx, dy;

	// calculate delta movements from onclick()
	dx = x - last_x;
	dy = y - last_y;

	if (dx || dy) {
		pos = this.patcher.wind.location;
		pos[0] += dx;
		pos[1] += dy;
		pos[2] += dx;
		pos[3] += dy;
		this.patcher.message("window", "size", pos[0], pos[1], pos[2], pos[3]);
		this.patcher.message("window", "exec");
	}
}
ondrag.local = 1; //private.

function onresize(w,h)
{
	draw();
	refresh();
}
onresize.local = 1; //private

For this to work, you need to load the Javascript file into JSUI (The JS object’s user-interface cousin). This lets us draw a color for the drag-able region and process the mouse dragging. While we are sending messages to this.patcher, the result is a lot more direct than sending messages to a thispatcher object in a Max patch – and we get the smooth window-dragging love we are looking are for…

Toodles… and PS. If you really don’t feel like typing all of that in, you can download it here!