cyrildiagne / ecal_handline_workshop

1 week workshop @ ECAL with 2nd year Media and Interaction Design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HandsLine Workshop


1 week workshop at ECAL with 2nd year Media and Interaction Design


« Le chemin le plus court d'un point à un autre est la ligne droite, à condition que les deux points soient bien en face l'un de l'autre. »

Pierre Dac


Design and create an interactive application based on the body tracking technology
that stages the virtual line linking our 2 hands.
  • Study the role played by this virtual line in different situations, activities..etc and derive them to create new ones

  • Work as duos

  • The application can't use any other tracking information than the hands position (and eventually their open/closed status).

  • It's not mandatory but highly encouranged to implement a multi-user system (up to 2 people)

  • Sketch your ideas and present them to the group before implementing prototypes

Some references (TBC)


Videoplace - MYRON KRUEGER - mid-1970s

Geometrical properties

  • spacial properties

    • position
    • length
    • angle
  • temporal properties

    • velocity
    • acceleration
  • shared properties

    • parallelism
    • spreading
    • similitude


The microsized javascript framework available in this repository aims at getting you started quickly with your ideas.

It integrates :

Getting Started

First clone the repository using your favorite terminal application (I highly recommend the free iTerm2 on mac)

git clone

Then enter this directory with cd ecal_handline_workshop

Make sure you have nodejs installed on your machine and install the http-server module globally :

npm install -g http-server

Then you can launch a local webserver using the provided command file (you can also double click on the file):


This should start the server and open a web page with the default application.

To load a different default application you can use the url parameter ?app for example if you want to load the Balls app :


This should load this demo (press TAB to show the debug view) : image

Look at the js/apps directory to see the list of available apps.

Make your own application

To make your own, the easiest way is to navigate to the folder js/apps and duplicate the file js/apps/default.js in the same folder

You can then use the name you give to that file as a url parameter to load it.

The default app defines 5 functions that are called automatically by the framework :

  • setup() is called once when the application is loaded
  • update(dt) is called at ~60hz when the window has the focus
  • onUserIn(id, leftHand, rightHand) is called when a user starts being tracked
  • onUserOut(id) is called when a user stops being tracked
  • optional : resize(width, height) is called when the window is resized

Available features

The best way for now to get the full list of available features from the framework is to look at the examples and the source file js/handline.vXX.js

You can also easily extend the functionalities with external libraris using the include util. The example js/apps/gui.js provides an example for loading an external lib directly from a CDN :

function setup() {
  ], function() {
    gui = new dat.GUI();

Publish your app

To publish your app, you must follow the following rules :

  • add your yourappname.js file in the js/apps folder
  • if you have to load some external files (sounds, svg..etc), put them in the assets/yourappname folder
  • commit and push your changes

In order to publish your app easily, you shouldn't modify any other file than your js/apps/yourappname.js file (for example files like index.html, css/main.css...etc)

Also, don't forget to fill in your project details in your app file :

function setup() {
  app = new HL.App();
    projectName : 'Default',
    author1 : 'Prenom Nom',
    author2 : 'Prenom Nom'


Launching live view


  • <yourapp> is your application filename, without the .js extension
  • <kinect2socket_ip> is the ip address of computer running the kinect2-socket application (localhost if it's on the same computer)

Pressing tab will bring up the debug view. You can click on the kinect2-socket panel at the bottom-right to start recording. Clicking again will stop it and ask you for a file name to save.

Playing back a replay


  • <yourapp> is your application filename, without the .js extension
  • <your_replay> is the filename of the replay located in /code/replays with the filename extension - usually .json.gz
ezoic increase your site revenue


1 week workshop @ ECAL with 2nd year Media and Interaction Design


Language:JavaScript 97.5%Language:HTML 1.9%Language:CSS 0.5%Language:Shell 0.1%