Persistance in JS

Persistence UNITY


  • Experiential Media
  • Who can make it?
  • Reuse
  • Film Stuck, Shot, Pixel, Examples of Interactive Fiction, resquence, paths, perspective, within the frame
  • VR Tech
  • Special Effect Flattened
  • Will not resemble Film
  • Parts of the Research
    • Setting  — Cinematic
    • Elements  — Language
    • Interface  — Conjuring  — Out of You not Into You
    • Saving   — File Format  30 Frame of HTML for Cinema
    • Sharing  — Clustering  Hyper  versions rather than copies
  • Technologies
    • Atom, Packages, JQuery, MLabs, JSON
    • three.js, panorama, google maps
    • Fuse, Volume, Point Clouds, 3D Models
    • Clustering Algorithms
    • Off road, UNITY/Unreal, 2D, Text but not just for eyeballs
  • Why
    • experiential less inflammatory
    • more powerful
    • Arms race
    • more famous if you reuse
    • creating meaning might be the new growth industry
  • Social is Motivation 
    • Is being the director too much to ask?
    • Watch Movie, Choose Your Own Adventure, Talk in Movies
    • Do people want to be couch potatoes?
    • Continuum of Engagement: Entertained, Viewpoint, Individuality, Originality
    • Desire for Feedback vs Enjoyment of Doing
    • Why do so many people go to the movies together.
    • The conversation afterwards is the interaction.
    • Conversation = Serialization +  Networkign
    • Technical Material

Eventually, we will want one of these descriptions for 30 frames a second and we might want the results instantly shared “synchronously” with other machines without them having to ask.  Massive amounts of parametric descriptions being exchanged over the network (the matrix) with replace mpeg one day.   We would need to build an interface for navigating all the parallel universe of similarly arrangements.  But for this week try to do it just for the static arrangement in the scene.

Find the Parameters

What are the things that are changeable about your scene?  The background movie, the foreground objects, their positions and orientations, the camera position.  This might turn out to be the most profound question in a story space but for now just find some obvious parameters like x, y, width and height.  Maybe add rotation and depth if you are feeling fancy.

Serialization and Formatting

The work of creating that series of characters that can describe and recall your scene is called serialization.  The next question is how can you format all the names and numbers in this descriptions so someone trying to read them can keep them all separate.   Formats are really just conventions for delimiting and ordering  the separate parts of the description.   I am sure you have run across this problem before with the spreadsheet format of rows and columns or a text file separated by comma, tabs and lines.  HTML and XML are famous formats in the web world.


This javascript example will has an increasingly popular format called JSON which uses square brackets for lists, curly brackets for elements, commas for separating elements and colons for separating names from values  eg  [{“x”:30,”y”:40}, {“x”:30,”y”:40}]  .  It is kind of tedious to concatenate all the characters manually so there is a function called JSON.stringify which turns javascript variables and arrays into a properly formatted JSON  string.

 var json = JSON.stringify([{ “x”:myHead.position.x, “y”: myHead.position.y}, “x”:hisHead.position.x, “y”: hisHead.position.y}] );
//to unfold it from a string back into a javascript object you would say
var jsVariable = JSON.parse(json);

or even better some objects are ready to give you a description of themselves

var cameraState = JSON.stringify(camera.matrix.toArray())

Cloud Storage API

It is really rather easy to then store and load this description to your local machine using javascript local storage.  But it really only becomes communication when you put it up on a server for other people to see and use.  Server side programming can be a big topic but there are services that allow you to look a this as just an API call from client side javascript.  Simply by constructing and sending a URL you are pulling the lever on the server.    You can call a URL from any environment so this would be same for JS, Unity, Processing.  Your can sign up for  a service like MLab, using these instructions from Shawn Van Every.  It should take your about 15 minute to be up and running.


To make the calls to the MLAB in javascript this example uses a library called jQuery.  This line will add the jQuery library to your file.

<script src=””></script>

Then add a few user interface items

<input type=”text” id=”name” name=”name” value=”joe”>
<button type=”button” id= “save”>Save</button>
<select id=”others” name=”others”></select>

The big convenience of jQuery is that you can refer to the html UI elements by id for instance:

var myName = $("#name").val(); //get the name from the input field
$('#next').click(next);  //assign the function "next" to it.
//equivalent in p5.js
var nextbutton = select("#next");


And you can send urls without leaving the page

$.ajax( {        url:"",
    data: JSON.stringify( { "_id":myName,"camera" : JSON.stringify(camera.matrix.toArray()) } ),
    type: "POST",
    contentType: "application/json" } );