Commit 26508c47 authored by hannah latimer's avatar hannah latimer
Browse files

Initial commit

parents
File added
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hand</title>
<!-- p5.js framework -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
<!-- ml5 library -->
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
<!-- for settings GUI -->
<script src="libraries/quicksettings.js"></script>
<script src="libraries/p5.gui.js"></script>
<!-- GreenSock animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<!-- cs/fine 383 utilities -->
<script src="utilities.js"></script>
<style></style>
</head>
<body style = "margin:0;">
<script src="sketch.js"></script>
</body>
</html>
//
(function() {
// list of guis
var guis = [];
// default slider params
var sliderMin = 0;
var sliderMax = 100;
var sliderStep = 1;
// default gui provider
var guiProvider = 'QuickSettings';
const defaultLabel = 'p5.gui';
// Create a GUI using QuickSettings (or DAT.GUI or ...)
// You only need to pass a reference to the sketch in instance mode
// Usually you will call createGui(this, 'label');
p5.prototype.createGui = function(sketch, label, provider) {
// createGui(label) signature
if ((typeof sketch) === 'string') {
return this.createGui(label, sketch, provider);
}
// normally the sketch will just be embedded below the body
let parent = document.body;
if(sketch === undefined) {
// p5js global mode
sketch = window;
label = label || document.title || defaultLabel;
} else {
// p5js instance mode
parent = sketch.canvas.parentElement;
label = label || parent.id || defaultLabel;
}
if(!('color' in sketch)) {
console.error(`${parent.id}: You need to pass the p5 sketch to createGui in instance mode!`);
}
// default gui provider
provider = provider || guiProvider;
var gui;
// create a gui using the provider
if(provider === 'QuickSettings') {
if(QuickSettings) {
console.log('Creating p5.gui powered by QuickSettings.');
gui = new QSGui(label, parent, sketch);
} else {
console.log('QuickSettings not found. Is the script included in your HTML?');
gui = new DummyGui(label, parent, sketch);
}
} else {
console.log('Unknown GUI provider ' + provider);
gui = new DummyGui(label, parent, sketch);
}
// add it to the list of guis
guis.push(gui);
// return it
return gui;
};
p5.prototype.removeGui = function(gui) {
// TODO: implement this
};
// update defaults used for creation of sliders
p5.prototype.sliderRange = function(vmin, vmax, vstep) {
sliderMin = vmin;
sliderMax = vmax;
sliderStep = vstep;
};
// extend default behaviour of noLoop()
p5.prototype.noLoop = function() {
this._loop = false;
for(var i = 0; i < guis.length; i++) {
guis[i].noLoop();
}
};
// extend default behaviour of loop()
p5.prototype.loop = function() {
for(var i = 0; i < guis.length; i++) {
guis[i].loop();
}
this._loop = true;
this._draw();
};
// interface for quicksettings
function QSGui(label, parent, sketch) {
// hard code the position, it can be changed later
let x = 20;
let y = 20;
var qs = QuickSettings.create(x, y, label, parent);
// proxy all functions of quicksettings
this.prototype = qs;
// addGlobals(global1, global2, ...) to add the selected globals
this.addGlobals = function() {
qs.bindGlobals(arguments);
};
// addObject(object) to add all params of the object
// addObject(object, param1, param2, ...) to add selected params
this.addObject = function() {
// get object
object = arguments[0];
// convert arguments object to array
var params = [];
if(arguments.length > 1) {
params = Array.prototype.slice.call(arguments)
params = params.slice(1);
}
// if no arguments are provided take all keys of the object
if(params.length === 0) {
// won't work in Internet Explorer < 9 (use a polyfill)
params = Object.keys(object);
}
qs.bindParams(object, params);
};
// noLoop() to call draw every time the gui changes when we are not looping
this.noLoop = function() {
qs.setGlobalChangeHandler(sketch._draw);
};
this.loop = function() {
qs.setGlobalChangeHandler(null);
};
// pass through ...
this.show = function() { qs.show(); };
this.hide = function() { qs.hide(); };
this.toggleVisibility = function() { qs.toggleVisibility(); };
this.setPosition = function(x, y) {
qs.setPosition(x, y);
return this;
};
// Extend Quicksettings
// so it can magically create a GUI for parameters passed by name
qs.bindParams = function(object, params) {
// iterate over all the arguments
for(var i = 0; i < params.length; i++) {
var arg = params[i];
var val = object[arg];
var typ = typeof val;
//console.log(typ, arg, val);
// don't need to show the sliders for range min, max and step of a property
var sliderConfigRegEx = /^(.*min|.*max|.*step)$/i;
if( sliderConfigRegEx.test(arg)){
continue;
}
switch(typ) {
case 'object':
// color triple ?
if(val instanceof Array && val.length === 3 && typeof val[0] === 'number') {
// create color according to the current color mode of the current sketch
var c = sketch.color(val[0], val[1], val[2]);
// get decimal RGB values
var c2 = c.levels.slice(0,3);
// create HTML color code
var vcolor = '#' + c2.map(function(value) {
return ('0' + value.toString(16)).slice(-2);
}).join('');
this.bindColor(arg, vcolor, object);
} else {
// multiple choice drop down list
this.bindDropDown(arg, val, object);
object[arg] = val[0];
}
break;
case 'number':
// values as defined by magic variables or gui.sliderRange()
var vmin = object[arg + 'Min'] || object[arg + 'min'] || sliderMin;
var vmax = object[arg + 'Max'] || object[arg + 'max'] || sliderMax;
var vstep = object[arg + 'Step'] || object[arg + 'step'] || sliderStep;
// the actual values can still overrule the limits set by magic
var vmin = Math.min(val, vmin);
var vmax = Math.max(val, vmax);
// set the range
this.bindRange(arg, vmin, vmax, val, vstep, object);
break;
case 'string':
var HEX6 = /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i;
if(HEX6.test(val)) {
// HTML color value (such as #ff0000)
this.bindColor(arg, val, object);
} else {
// String value
this.bindText(arg, val, object);
}
break;
case 'boolean':
this.bindBoolean(arg, object[arg], object);
break;
}
}
};
// bind params that are defined globally
qs.bindGlobals = function(params) {
this.bindParams(window, params);
};
}
// Just a Dummy object that provides the GUI interface
function DummyGui() {
var f = function() {};
this.addGlobals = f;
this.noLoop = f;
this.addObject = f;
this.show = f;
}
})();
This diff is collapsed.
A2/nyc.gif

1.62 MB

[
{
"handInViewConfidence": 0.9999215602874756,
"boundingBox": {
"topLeft": [
145.68450434198115,
-54.83686446700975
],
"bottomRight": [
664.3052849390835,
463.78391613009273
]
},
"landmarks": [
[
408.545852831623,
393.0629005941241,
-0.0003068298101425171
],
[
357.9887781808973,
358.4686984944173,
-10.507171630859375
],
[
322.2435387823497,
312.0006999994509,
-15.294753074645996
],
[
300.41936857320906,
267.8323101997714,
-19.47587776184082
],
[
288.258813925187,
237.151021029899,
-23.784818649291992
],
[
353.4901838218966,
230.6279794985751,
-6.770031452178955
],
[
334.92900093860146,
177.58733460336086,
-8.210691452026367
],
[
326.352999507984,
139.0490207235003,
-10.113201141357422
],
[
320.92782256728094,
106.24594751589675,
-12.464366912841797
],
[
392.4532257216578,
220.62674517171843,
-5.726240158081055
],
[
390.49656681293345,
158.6774711517287,
-5.819018363952637
],
[
392.6545993909322,
113.45979173831707,
-8.001246452331543
],
[
396.12458813293836,
78.74727598981966,
-9.92093563079834
],
[
427.3001341821312,
227.33597012157603,
-6.186297416687012
],
[
439.07371885641317,
172.4498306435571,
-7.506409645080566
],
[
450.8397941624461,
131.4549142284228,
-9.784345626831055
],
[
460.1577247237583,
99.29472433825417,
-11.570198059082031
],
[
458.67144496475004,
249.02669155163179,
-8.033662796020508
],
[
484.4472315398691,
210.8041141335868,
-10.690755844116211
],
[
504.37136836041464,
181.895951979524,
-12.647753715515137
],
[
521.7309753558778,
154.0687277271923,
-13.757120132446289
]
],
"annotations": {
"thumb": [
[
357.9887781808973,
358.4686984944173,
-10.507171630859375
],
[
322.2435387823497,
312.0006999994509,
-15.294753074645996
],
[
300.41936857320906,
267.8323101997714,
-19.47587776184082
],
[
288.258813925187,
237.151021029899,
-23.784818649291992
]
],
"indexFinger": [
[
353.4901838218966,
230.6279794985751,
-6.770031452178955
],
[
334.92900093860146,
177.58733460336086,
-8.210691452026367
],
[
326.352999507984,
139.0490207235003,
-10.113201141357422
],
[
320.92782256728094,
106.24594751589675,
-12.464366912841797
]
],
"middleFinger": [
[
392.4532257216578,
220.62674517171843,
-5.726240158081055
],
[
390.49656681293345,
158.6774711517287,
-5.819018363952637
],
[
392.6545993909322,
113.45979173831707,
-8.001246452331543
],
[
396.12458813293836,
78.74727598981966,
-9.92093563079834
]
],
"ringFinger": [
[
427.3001341821312,
227.33597012157603,
-6.186297416687012
],
[
439.07371885641317,
172.4498306435571,
-7.506409645080566
],
[
450.8397941624461,
131.4549142284228,
-9.784345626831055
],
[
460.1577247237583,
99.29472433825417,
-11.570198059082031
]
],
"pinky": [
[
458.67144496475004,
249.02669155163179,
-8.033662796020508
],
[
484.4472315398691,
210.8041141335868,
-10.690755844116211
],
[
504.37136836041464,
181.895951979524,
-12.647753715515137
],
[
521.7309753558778,
154.0687277271923,
-13.757120132446289
]
],
"palmBase": [
[
408.545852831623,
393.0629005941241,
-0.0003068298101425171
]
]
}
}
]
\ No newline at end of file
// parameters
let p = {
boundBox: true,
}
// the model
let handpose;
// latest model predictions
let predictions = [];
// video capture
let video;
// curtains
let curtainx = 10;
let curtain;
let counter = 0;
function preload(){
//curtainVid = createVideo("Curtain.mp4");
curtain = loadImage("curtain.jpg");
view = loadImage("view.gif");
gallery = loadImage("gallery.gif");
forest = loadImage("forest.gif");
nyc = loadImage("nyc.gif");
beach = loadImage("beach.gif");
}
function setup() {
createCanvas(640, 480)
video = createCapture(VIDEO);
video.size(width, height);
// add params to a GUI
createParamGui(p, paramChanged);
// initialize the model
handpose = ml5.handpose(video, modelReady);
// This sets up an event that fills the global variable "predictions"
// with an array every time new predictions are made
handpose.on("predict", results => {
predictions = results;
});
// Hide the video element, and just show the canvas
video.hide();
}
function modelReady() {
console.log("Model ready!");
}
function draw() {
push();
scale(-1,1);
translate(-width, 0);
background('#0000cc')
//image(video, 0, 0, width, height);
pop();
let s = view;
//let r = random(1,5);
//if (r === 1){
//s = gallery;
//} else if (r === 2) {
//s = view;
//} else if (r === 3) {
//s = forest;
//} else if (r === 4) {
//s = nyc;
//} else if (r === 5) {
//s = beach;
//}
image(s, 0, 0, width, height);
// different visualizations
if (p.boundBox) drawBoundingBoxes()
curtains();
if (predictions.length === 0){
counter++;
}
if (counter === 8 ){