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

on the computers that you want to use to program, simply open http://www.paysage.xyz/playground/test/programmer

then program your code objects following this example:

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)
}

How to keep the screens in sync

Don't

use random generator with different seeds (ie. based on clock)

Do

use a fixed seed for random generator
separate the computing from the actual rendering/drawing