Mobilizing.js

Développé à EnsadLab, laboratoire de recherche de l'École Nationale des Arts Décoratifs de Paris, Mobilizing.js est un projet de recherche consistant en la création d'un environnement logiciel auteur à destination des artistes et des designers. L’objectif est double :

Favoriser la création d’œuvres interactives sur différentes formes d’appareils-écrans (ordinateurs, écrans mobiles, IoT, etc.).
Proposer une plateforme de création artistique dédiée à l'interactivité collective en co-présence.

Les technologies du Web étant devenues polyvalentes et parce qu'elles reposent sur des spécifications standards et ouvertes, nous les avons choisis pour développer l'ensemble des briques techniques de Mobilizing.js, qui sont elles-mêmes sous licence libre. Deux grands ensembles composent l'environnement de Mobilizing.js : une librairie et une plateforme.

La librairie

La création artistique interactive sur les écrans mobiles (smartphones et tablettes) se trouve aujourd'hui facilitée par les technologies du Web. Le navigateur Web étant devenu une machine virtuelle universelle, disponible sur une grande variété d'appareils, le potentiel de création artistique et de design d'interaction qu'il permet est indéniable. La librairie de Mobilizing.js a pour objectif de réunir un ensemble de fonctionnalités dans un ensemble cohérent afin de simplifier la création logicielle sur les supports mobiles.
Fondée sur une logique modulaire, cette librairie a été conçue à destination de différentes personnes :

des créateurs ayant des connaissances basiques de la programmation Web et souhaitant investir la création numérique interactive;
des étudiants engagés dans des projets de création artistique interactive et le design d'interaction;
des développeurs souhaitant participer au développement de l'outil;
des partenaires souhaitant utiliser Mobilizing.js ou s'interfacer avec.

La plateforme

L'interactivité collective co-située peut-être explorée à des échelles inédites grâce aux technologies mobiles : un collectif de personnes présentes en un même lieu peuvent interagir ensemble sur des objets communs, telles des images immersives ou un environnement sonore, à l'aide des écrans mobiles. Si l'interactivité dans l'art consiste en la formalisation de relations entre un spectateur et un dispositif pour faire œuvre, alors l'interactivité collective fait œuvre en formalisant des relations entre les participants coprésents et leur environnement. Collaboration, association, participation, coopération, confrontation, compétition ou encore opposition sont autant de figures de l'interactivité collective qui peuvent émerger ou être proposées (voire imposées).

La plateforme de Mobilizing.js a pour ambition de proposer un environnement de design et de réalisation de dispositifs d'interactivité collective. Les scripts réalisés avec la librairie de Mobilizing.js peuvent devenir la base d'un dispositif d'interaction partagé, à l'aide d'une mise en réseau des écrans mobiles et d'une méthodologie d'écriture de scénarios d'interactivités collectives.

Informations techniques (version 0.9.x, 10/2020).

L’implémentation actuelle de la librairie de Mobilizing.js utilise Three.js comme moteur de rendu.Une couche d’abstraction spécifique a été construite par dessus Three.js et compose un "rendeur" 3D temps réel. Concernant la mise en œuvre de typographie, openType.js est utilisé, Three.js (et WebGL de manière plus large) ne permettant pas le recours à des styles CSS et à sa gestion des polices de caractères.

Mobilizing.js est compatible avec les navigateurs les plus répandus, Safari, Firefox et Chrome dans leur version actuelle, sur machine de bureau comme sur écran mobile. Certaines fonctionnalités ne sont disponibles que sur certains appareils (capteurs sur les écrans mobiles par exemple).

Exemple de code source minimal :

NB : Cet exemple utilise Webpack dans la configuration accessible ici : Mobilizing-Library-Base_Example


<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    
    <meta name="viewport" content="user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    
    <link href="index.css" rel="stylesheet" />
    
    <script src="js/main.js"></script>
  </head>

  <body>
  </body>

</html>


import * as Mobilizing from '@mobilizing/library';
import { Script } from "./script.js";

// We need to run the script in a Mobilizing Context
// Build a simple function to instantiate the Context,
// instantiate the user script,
// add it as a component to the Context,
// and build a runner with it.
function run() {
    const context = new Mobilizing.Context();
    const script = new Script();
    context.addComponent(script);
    const runner = new Mobilizing.Runner( {context} );
}

// Then run it
run();


import * as Mobilizing from '@mobilizing/library';

export class Script {

    constructor() {
        console.log("constructor");
    }

    // called just after the constructor
    preLoad(loader) {
        console.log("preLoad", loader);
    }

    // called when preloaded elements are loaded
    setup() {
        this.renderer = new Mobilizing.three.RendererThree();
        this.context.addComponent(this.renderer);

        this.camera = new Mobilizing.three.Camera();
        this.renderer.addCamera(this.camera);

        this.renderer.setClearColor(Mobilizing.three.Color.darkGray.clone());

        const light = new Mobilizing.three.Light();
        console.log(light);
        this.renderer.addToCurrentScene(light);

        this.box1 = new Mobilizing.three.Box();
        this.box1.transform.setLocalPosition(0, 0, -10);
        this.renderer.addToCurrentScene(this.box1);

        this.rotateXBy = 0;
        this.rotateYBy = 0;
    }

    // refresh loop
    update() {
        this.rotateXBy += 0.01;
        this.rotateYBy += 0.1;
        this.box1.transform.setLocalRotation(this.rotateXBy, 20, -this.rotateYBy);
    }
}

Envrionnement de développement schématique

Équipe de recherche, développement et design de Mobilizing.js

Chef de projet : Dominique Cunin
Architecture générale : Dominique Cunin, Oussama Mubarak, Jonathan Tanant, Jean-Phillipe Lambert
Implémentationn des composants fondamentaux : Dominique Cunin, Jonathan Tanant, Oussama Mubarak
Refactoring 2019-2020 : Jean-Phillipe Lambert
Interface utilisateur et identité visuelle : Alexandre Dechosal

Les recherches et développements pour ce logicel sont menés par l'EnsadLab (laboratoire de l'École nationale supérieure des Arts Décoratifs) dans le cadre du programme de recherche Reflective interaction, sous la direction de Samuel Bianchini, avec le soutien de l'Agence Nationale de la Recherche (ANR) pour le projet de recherche Cosima (Collaborative Situated Media, 2014-2017), d'Orange dans le contexte du projet Surexposition, et de la Chaire arts & sciences de l'École Polytechnique, l'École des Arts Décoratifs – PSL et de la fondation Daniel et Nina Carasso.

Réalisations

Mobilizing.js

La librairie

La plateforme

Informations techniques (version 0.9.x, 10/2020).

Exemple de code source minimal :

NB : Cet exemple utilise Webpack dans la configuration accessible ici : Mobilizing-Library-Base_Example

Envrionnement de développement schématique

Équipe de recherche, développement et design de Mobilizing.js

Réalisations

Collective Mobile Mapping : Espace puissance Espace

Mobilisation

Surexposition

Collective Loops