commented utility functions

001_empty/index.html

@@ -3,7 +3,10 @@
     <script src="../libs/clmtrackr.js"></script>
     <script src="../libs/model_pca_20_svm.js"></script>
     <script src="../libs/p5.js"></script>
-    <script src="../libs/p5.dom.js"></script>  
+    <script src="../libs/p5.dom.js"></script>
+      <script src="../libs/emotion_classifier.js"></script>
+      <script src="../libs/emotionmodel.js"></script>
+      <script src="../libs/workshop-utils.js"></script>
     <script src="sketch.js"></script>
     <style> body { padding: 40; margin: 20} </style>
   </head>

001_empty/sketch.js

@@ -1,7 +1,10 @@
+// note: see ../libs/workshop-utils.js for custom functions made for the workshop
+
+
 function setup() {
-    
+
 }
 
 function draw() {
 
-}
+}

010_pose-scene/sketch.js

@@ -57,7 +57,7 @@ function setup() {
     xs.push(0);
   }
 
-  poseNet = ml5.poseNet(video, 'single', gotPoses);
+  poseNet = ml5.poseNet(video, 'multiple', gotPoses);
 
   video.hide();
   fill(255);

README.md

@@ -1,6 +1,6 @@
 # Face Tracking for Creative Coding
 ### Overview
-A growing collection of examples used to demonstrate basic concepts of the usage of face tracking with creative coding on the modern web. This code has been collected and inited originally for Online Media Course (MOME), then it quickly became a basis for further workshops that are focusing on realtime interactions, creative animations and critical discussion on current technologies (think of face-id).
+A growing collection of examples used to demonstrate basic concepts of the usage of face tracking with creative coding on the modern web. This repository is the basis of the workshop series called _DataFaces_. These events are focusing on data politics, creative coding, machine learning and critical discussion on cutting edge (surveillance based) technologies, the concepts are usually introduced in a playful & practical way using open source coding frameworks. 
 
 ![001](https://user-images.githubusercontent.com/270431/40185787-c0e67830-59f3-11e8-9b94-5e619b195f57.jpg)
 _fig. 1: Feature points of tracked faces_
@@ -18,7 +18,7 @@ _fig. 3: Scene example, where graphical elements are moved, based on head positi
 _fig. 4: Sentiment Analysis_
 
 ### Folder Structure
-Each example includes media files (sounds, animated gifs, images etc). The 'libs' folder contains the necessary js libraries and the pre-trained face traclking models.
+Each example includes media files (sounds, animated gifs, images etc). The 'libs' folder contains the necessary js libraries and the pre-trained face traclking models. Check `libs/worshop-utils.js` on how simplified, workshop specific functions operate (loading camera, tracker, etc.)
 
 ### Workshop Schedule
 See the [wiki](https://github.com/stc/face-tracking-p5js/wiki/Schedule) for detailed workshop schedule and the specific tasks we are dealing with during the session. Durations of the parts may vary depending on the knowledge and interest of the participants.
@@ -29,5 +29,6 @@ See the [wiki](https://github.com/stc/face-tracking-p5js/wiki/Schedule) for deta
 
 _009_pose-basic_ &  _010_pose_scene_ examples are using [pose estimation from tensorflow.js](https://github.com/tensorflow/tfjs-models/tree/master/posenet) together with p5js (we are using it for multiple head tracking on the workshop). This version of PoseNet is built with the [ml5 javascript libary](https://ml5js.org/), that aims to make machine learning accessible to a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js with no other external dependencies.
 
+
 (c) 2018 Agoston Nagy / gpl v3
 

libs/workshop-utils.js

@@ -1,13 +1,32 @@
+
+/*
+
+Global variables to make our life easier
+
+*/
+
 var ctracker;
 var videoInput;
 var positions = [];
 var canvas;
 
+/*
+
+Load & align the canvas to match the underlying html5 video element
+
+*/
+
 function loadCanvas(w, h) {
     canvas = createCanvas(w, h);
     canvas.position(0,0);
 }
 
+/*
+
+Load the capture device, align under the canvas & mute it to avoid audiofeedback
+
+*/
+
 function loadCamera() {
     // setup camera capture
     videoInput = createCapture();
@@ -18,26 +37,48 @@ function loadCamera() {
     mv.muted = true;
 }
 
+/*
+
+Load ClmTracker, apply to the video element
+
+*/
+
 function loadTracker() {
     // setup tracker
     ctracker = new clm.tracker();
     ctracker.init(pModel);
     ctracker.start(videoInput.elt);
 }
 
+/*
+
+Get current face feature point positions. Should go into the draw() function
+
+*/
+
 function getPositions() {
     // get array of face marker positions [x, y] format
     positions = ctracker.getCurrentPosition();
 }
 
 
-// emotion detection
+/* 
+
+Get current emotion predictions. Should go into the draw() function
+
+*/
 
 function getEmotions() {
     var cp = ctracker.getCurrentParameters();
     predictedEmotions = emotions.meanPredict(cp);
 }
 
+/*
+
+Emotion-specific global variables
+
+*/
+
 delete emotionModel['disgusted'];
 delete emotionModel['fear'];
 var emotions = new emotionClassifier();