Multi screen

#creating multi-screen code objects

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

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

###Use case Several different computers are connected to several video-projectors or displays. We want these screens to act as one big single virtual screen — with each screen behaving as a zone of the larger virtual canvas.

###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 externals.canvas.width and externals.canvas.height

We want the playground to render a part of a larger, virtual canvas.

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, we load

on the first computer: http://www.paysage.xyz/playground/test#w=3840&h=1080&x=0&y=0 on the second computer: 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)
}