Templates for Reactive Signs Module 2023

Templates for the 2023 module

The repository contains a number of basic examples in the Poster_Templates, together with a custom libraries for handling skeleton tracking etc.

For running the poster, there are two lines needed in the setup function and one in the draw function.

function setup() {
   /*important!*/ createCanvas(poster.getWindowWidth(), poster.getWindowHeight()); // Don't remove this line. 
   /*important!*/ poster.setup(this,  "/Poster_Templates/libraries/assets/models/movenet/model.json");  // Don't remove this line. 
}

function draw() {
/*important!*/ poster.posterTasks(); // do not remove this last line!  
} 

These variables hold the coordinates of a tracker point, based on the camera and blob detection. When no camera is available the data will be controled by the mouse.

poster.position.x  // represents left to right movement of one user 
poster.position.y  // represents up and down movement of one user. Use sparingly, as this movement is less intuitive. 
poster.position.z  // represents distance from the user to the screen. 

poster.posNormal.x,  poster.posNormal.y,  poster.posNormal.z  //The same as "position" but normalised. i.e values between 0 and 1. 

There are two screens (0 and 1) for which you can access the coordinates with the following variables.

 poster.screens[i].x // x position of screen
 poster.screens[i].y // y position of screen. Tip: this will always be 0! 
 poster.screens[i].w // width of screen
 poster.screens[i].h // height of screen
 poster.screens[i].cntX // x position of screen center
 poster.screens[i].cntY // y position of screen center

These variables provide units which are safer than using pixel coordinates.

vw // 1 percent of viewport width
vh // 1  percent of viewport height

Testing your code on the duel display

The monitors and the computer have been setup to make testing as fast as possible.

Let's say you want to test out the folder called "my_demo" in the Poster_Templates:

│   ├── Poster_Templates
│   │   ├── my_demo
│   │   │   ├── index.html
│   │   │   ├── sketch.js
│   │   ├── demo_poster_3D
│   │   ├── demo_poster_images
│   │   ├── demo_poster_simple
│   │   ├── demo_poster_depth
│   │   ├── libraries
│   │   ├── style.cs
│

• Copy the "my_demo" folder to a USB thumb-drive, and rename the folder "Poster".
• Turn on the Dual-Monitor PC if necessary
• Close any open program windows
• If the screen is rotated, click the following icon to set it to portrait

• If "Poster" already exists on the desktop of the Dual-Monitor PC, delete it.
• Don't delete or move anything else!
• Move "Poster" to the desktop of the Dual-Monitor PC.
• Click the "startPoster" icon on the desktop
• Your project should now run after a few seconds

Running realSense OSC (rs2wsBlob) - Optional

The Processing (JAVA) application connects to the realsense camera, and provides all the data over OSC.

To run, install Processing.

Navigate to the rs2wsBlob folder, and open any file with Processing.

Install the following libraries via the Library Manager

• bildspur.realsense
• controlP5
• oscP5
• opencv

Hit the play button.

Recording Screen Capture

• Press Shift-R to start recording
• Press Shift-S to stop and save recording to your download folders