init commit

runwayml · Apr 13, 2018 · 19f31ea · 19f31ea
commit 19f31ea
Show file tree

Hide file tree

Showing 8 changed files with 432 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "licenser": {
+    "license": "GPLv3",
+    "author": "Cristobal Valenzuela",
+    "projectName": "RunwayML",
+    "useSingleLineStyle": true
+  },
+}
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+<p align="center">
+  <img src="resources/runway_icon.png" width="95">
+  <img src="resources/js_icon.png" width="90">
+</p>
+
+# Runway + JavaScript
+
+A collection of stand alone examples of connecting [Runway](https://runwayml.com/) to [JavaScript](https://processing.org/).
+Examples are separated by current available models.
+
+## Examples
+
+- [im2txt](/im2txt)
+- [OpenPose](/openpose)
+
+## Library
+
+Ideally this will be a Processing Library that manages the OSC connection to Runway. For now all examples are using Processing [oscP5](http://www.sojamo.de/libraries/oscP5/) library.
+
+## Contributing
+
+This is still a work in progress. Contributions are welcomed!
+
diff --git a/im2txt/index.html b/im2txt/index.html
@@ -0,0 +1,55 @@
+<!--
+ Copyright (C) 2018 Cristobal Valenzuela
+ 
+ This file is part of RunwayML.
+ 
+ RunwayML is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ 
+ RunwayML is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+ 
+ You should have received a copy of the GNU General Public License
+ along with RunwayML.  If not, see <http://www.gnu.org/licenses/>.
+ 
+-->
+
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <title>im2txt Demo</title>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
+</head>
+
+<body>
+
+  <!-- Just a log element to show whatever is coming from Runway -->
+  <div id="log"></div>
+
+  <script type="text/javascript" charset="utf-8">
+  // Create the connection to the Runway HTTP Server
+  // You should update this address
+  var socket = io.connect('http://127.0.0.1:33500');
+
+  // Get the DOM log element
+  var log = document.getElementById('log');
+
+  // When a connection is established
+  socket.on('connect', function() {
+    log.innerHTML = 'connected';
+  });
+
+  // Whenever there is a data event, update the log element
+  socket.on('data', function(data) {
+    log.innerHTML = data.results[0].caption;
+  });
+
+  </script>
+</body>
+
+</html>
diff --git a/openpose/index.html b/openpose/index.html
@@ -0,0 +1,115 @@
+<!--
+ Copyright (C) 2018 Cristobal Valenzuela
+ 
+ This file is part of RunwayML.
+ 
+ RunwayML is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ 
+ RunwayML is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+ 
+ You should have received a copy of the GNU General Public License
+ along with RunwayML.  If not, see <http://www.gnu.org/licenses/>.
+ 
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Openpose Demo</title>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
+</head>
+
+<body>
+  <div id="log"></div>
+
+  <script type="text/javascript" charset="utf-8">
+  var humans = [];
+  var capture;
+  var canvas;
+  var w = 432;
+  var h = 368;
+  var colors;
+  const bodyConnections = [
+    ['Nose', 'Left_Eye'],
+    ['Left_Eye', 'Left_Ear'],
+    ['Nose', 'Right_Eye'],
+    ['Right_Eye', 'Right_Ear'],
+    ['Nose', 'Neck'],
+    ['Neck', 'Right_Shoulder'],
+    ['Right_Shoulder', 'Right_Elbow'],
+    ['Right_Elbow', 'Right_Wrist'],
+    ['Neck', 'Left_Shoulder'],
+    ['Left_Shoulder', 'Left_Elbow'],
+    ['Left_Elbow', 'Left_Wrist'],
+    ['Neck', ''],
+    ['Right_Hip', 'Right_Knee'],
+    ['Right_Knee', 'Right_Ankle'],
+    ['Left_Hip', 'Left_Knee'],
+    ['Left_Knee', 'Left_Ankle'],
+  ]
+
+  var log = document.getElementById('log');
+  var socket = io.connect('http://localhost:33500');
+  socket.on('connect', function() {
+    log.innerHTML = 'connected';
+  });
+  socket.on('data', function(data) {
+    humans = data.results.humans;
+    console.log(humans.length);
+  });
+
+  function setup() {
+    canvas = createCanvas(w, h);
+    capture = createCapture(VIDEO);
+    capture.size(w, h);
+    capture.hide();
+    strokeWeight(2);
+    colors = [color('#00ff00'), color('#ffff00'), color('#ff0000'), color('#00ffff'), color('#ffffff'), color('#f4f'), color('#00ff'), color('#ffaf00'), color('#aff'), color('#aaf'), color('#33a'), color('#55f'), color('#771'), color('#15f'), color('#ff0000'), color('#00ff00'), color('#ffff00'), color('#ff0000')];
+  }
+
+  function draw() {
+    image(capture, 0, 0, w, h);
+    if (humans.length > 0) {
+      humans.forEach(human => drawHuman(human));
+    }
+  }
+
+  function drawHuman(human) {
+    bodyConnections.forEach((connection, i) => {
+      let start = null;
+      let endA = null;
+      let endB = null;
+      human.forEach(bodyPart => {
+        const name = bodyPart[0];
+        if (name === connection[0]) {
+          start = bodyPart;
+        } else if (name === connection[1]) {
+          endA = bodyPart;
+        } else if (connection[2] && name === connection[2]) {
+          endB = bodyPart;
+        }
+      });
+      stroke(colors[i]);
+      if (start && endA && !endB) {
+        line(start[1] * w, start[2] * h, endA[1] * w, endA[2] * h);
+      } else if (start && endA && endB){
+        line(start[1] * w, start[2] * h, (endA[1] + endB[1])/2 * w, (endB[2] + endB[2])/2 * h);
+      }
+    });
+  }
+  </script>
+</body>
+
+</html>
diff --git a/openpose/p1.jpg b/openpose/p1.jpg
diff --git a/resources/js_icon.png b/resources/js_icon.png
diff --git a/resources/runway_icon.png b/resources/runway_icon.png