Multi screen

#creating multi-screen code objects

This is the recommended way to create Paysage code objects spanning multiple screens on different computer, using different browser windows.

This is entirely managed by the code object, and neither the Paysage server or the Paysage renderer are aware of the multi-screen capabilities.

###Use case Several different computers are connected to several video-projectors or displays, and we want this various screen to act as part of one big single virtual screen.

###Idea Usually, when you load a Paysage playground, it render a canvas of the size of the browser window, starting at 0,0 and ending at extrenals.canvas.width and externals.canvas.height

We are going to:

• pass the height and width of our virtual canvas (cumulative size of all the browser windows we want to open) in the URL fragment of our Paysage playground. It will be the same for all browser windows
• pass different x and y offset to each windows.
• mask the canvas width and heigh variable locally to make the sketch calculate and draw() over a bigger, virtual canvas.
• offset our view by using the processingJS function translate

For example if we have two computers connected to two contiguous screen of 1920x1080 first screen: http://www.paysage.xyz/playground/test#w=3840&h=1080&x=0&y=0 second screen: http://www.paysage.xyz/playground/test#w=3840&h=1080&x=1920&y=0

###Code // setting multiscreen variables // usage: http://www.paysage.xyz/playground/test#w=1000&h=500&x=500&y=250 to render the lower right part of the virtual canvas var area = {}; var width = externals.canvas.width; var height = externals.canvas.height; // end multiscreen variables

void draw() {

// multiscreen management window.location.hash .slice(1).split('&').forEach( function(pair){var keyValue=pair.split('='); area[keyValue[0]]=keyValue[1];});

width = area.w || externals.canvas.width; height = area.h || externals.canvas.height;

translate(-area.x || 0,-area.y || 0); // end multiscreen management

// let a circle travel through the (virtual) canvas translate(200 + 100 * Math.cos(millis()/800), 200 + 100 * Math.sin(millis() / 750)) fill(0, 220, 120) ellipse(0,0,40,40)

}