Compare commits
4 commits
dc5fba2e5a
...
10ed1de810
Author | SHA1 | Date | |
---|---|---|---|
|
10ed1de810 | ||
|
793d7e6521 | ||
|
21a5d698b1 | ||
|
a548e6937c |
11 changed files with 306 additions and 219 deletions
|
@ -17,7 +17,8 @@ import { metaKeyName, } from '../utils/metaKey';
|
|||
|
||||
import CaretLeftIcon from '../images/left-arrow.svg';
|
||||
import TriangleIcon from '../images/down-filled-triangle.svg';
|
||||
import LogoIcon from '../images/p5js-logo-small.svg';
|
||||
// import LogoIcon from '../images/p5js-logo-small.svg';
|
||||
import LogoIcon from '../images/dp-logo-line-drawing.svg';
|
||||
|
||||
class Nav extends React.PureComponent {
|
||||
constructor(props) {
|
||||
|
@ -351,7 +352,7 @@ class Nav extends React.PureComponent {
|
|||
{ getConfig('EXAMPLES_ENABLED') &&
|
||||
<li className="nav__dropdown-item">
|
||||
<Link
|
||||
to="/p5/sketches"
|
||||
to={`/${getConfig('EXAMPLE_USERNAME')}/sketches`}
|
||||
onFocus={this.handleFocusForFile}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.setDropdownForNone}
|
||||
|
|
1
client/images/dp-logo-line-drawing.svg
Normal file
1
client/images/dp-logo-line-drawing.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 7.7 KiB |
|
@ -321,7 +321,6 @@ class Editor extends React.Component {
|
|||
'editor--options': this.props.editorOptionsVisible
|
||||
});
|
||||
|
||||
console.log(this.props.file);
|
||||
const editorHolderClass = classNames({
|
||||
'editor-holder': true,
|
||||
'editor-holder--hidden': this.props.file.fileType === 'folder' || this.props.file.url
|
||||
|
|
|
@ -23,6 +23,8 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
|
|||
from '../../../utils/consoleUtils';
|
||||
|
||||
|
||||
// let lastUpdate = null;
|
||||
|
||||
const shouldRenderSketch = (props, prevProps = undefined) => {
|
||||
const { isPlaying, previewIsRefreshing, fullView } = props;
|
||||
|
||||
|
@ -327,17 +329,77 @@ class PreviewFrame extends React.Component {
|
|||
|
||||
renderSketch() {
|
||||
const doc = this.iframeElement;
|
||||
const localFiles = this.injectLocalFiles();
|
||||
if (this.props.isPlaying) {
|
||||
this.props.clearConsole();
|
||||
srcDoc.set(doc, localFiles);
|
||||
if (this.props.endSketchRefresh) {
|
||||
this.props.endSketchRefresh();
|
||||
}
|
||||
// const localFiles = this.injectLocalFiles();
|
||||
console.log('renderSketch()', this.props);
|
||||
|
||||
const changedFiles = this.props.files.filter(file => file.changed);
|
||||
const filesRequiringReload = changedFiles.filter(file => !file.content.startsWith('// liveUpdate'));
|
||||
const filesToHotSwap = changedFiles.filter(file => filesRequiringReload.indexOf(file) === -1);
|
||||
console.log('changed and requiring reload:', changedFiles, filesRequiringReload, filesToHotSwap);
|
||||
|
||||
let saving;
|
||||
if (changedFiles.length > 0) {
|
||||
saving = this.props.saveProject();
|
||||
} else {
|
||||
doc.srcdoc = '';
|
||||
srcDoc.set(doc, ' ');
|
||||
// can be done pretier: a promise that always resolves
|
||||
saving = new Promise((resolve, err) => resolve());
|
||||
}
|
||||
|
||||
saving.catch(() => {
|
||||
console.log('Error saving... not authenticated?');
|
||||
window.location.href = '/login';
|
||||
});
|
||||
|
||||
saving.then(() => {
|
||||
if (this.props.isPlaying) {
|
||||
this.props.clearConsole();
|
||||
doc.removeAttribute('srcdoc');
|
||||
const source = `${window.location.origin}/${this.props.project.owner.username}/sketches/${this.props.project.id}/index.html`;
|
||||
// console.log('FILES', this.props.files, doc.src, source, lastUpdate);
|
||||
if (doc.src === source) {
|
||||
// const newFiles = this.props.files.filter(file => new Date(file.updatedAt) > lastUpdate);
|
||||
if (this.props.unsavedChanges) {
|
||||
// console.log('unsaved changes');
|
||||
}
|
||||
|
||||
|
||||
console.log('doc', doc);
|
||||
// we need a hard reload
|
||||
if (filesRequiringReload.length > 0) {
|
||||
doc.src = source; // for now...
|
||||
} else {
|
||||
// if (doc.contentWindow.document.querySelector('script[src="/assets/hotswap.js"]') == null) {
|
||||
// const headEl = doc.contentWindow.document.querySelector('head');
|
||||
// const srcEl = doc.contentWindow.document.createElement('script');
|
||||
// srcEl.src = '/assets/hotswap.js';
|
||||
// headEl.appendChild(srcEl);
|
||||
// }
|
||||
|
||||
console.log('Hot swap (..append):', filesToHotSwap);
|
||||
const headEl = doc.contentWindow.document.querySelector('head');
|
||||
const updatevar = Date.now();
|
||||
filesToHotSwap.forEach((file) => {
|
||||
// doc.contentWindow.postMessage({ 'action': 'code', 'contents': file.content }, '*');
|
||||
const srcEl = doc.contentWindow.document.createElement('script');
|
||||
srcEl.src = `${file.name}?changed=${updatevar}`;
|
||||
headEl.appendChild(srcEl);
|
||||
});
|
||||
}
|
||||
// if ( this.props.htmlFile.content === doc.contentWindow)
|
||||
// TODO: don't set, but update only (will be hard... :-P)
|
||||
} else {
|
||||
doc.src = source;
|
||||
}
|
||||
// lastUpdate = new Date();
|
||||
if (this.props.endSketchRefresh) {
|
||||
this.props.endSketchRefresh();
|
||||
}
|
||||
} else {
|
||||
doc.removeAttribute('src');
|
||||
doc.srcdoc = '';
|
||||
srcDoc.set(doc, ' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -384,7 +446,18 @@ PreviewFrame.propTypes = {
|
|||
setBlobUrl: PropTypes.func.isRequired,
|
||||
stopSketch: PropTypes.func.isRequired,
|
||||
expandConsole: PropTypes.func.isRequired,
|
||||
saveProject: PropTypes.func.isRequired,
|
||||
project: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string.isRequired,
|
||||
owner: PropTypes.shape({
|
||||
username: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
}),
|
||||
updatedAt: PropTypes.string,
|
||||
}).isRequired,
|
||||
clearConsole: PropTypes.func.isRequired,
|
||||
unsavedChanges: PropTypes.bool,
|
||||
cmController: PropTypes.shape({
|
||||
getContent: PropTypes.func
|
||||
}),
|
||||
|
@ -392,6 +465,7 @@ PreviewFrame.propTypes = {
|
|||
|
||||
PreviewFrame.defaultProps = {
|
||||
fullView: false,
|
||||
unsavedChanges: false,
|
||||
cmController: {}
|
||||
};
|
||||
|
||||
|
|
|
@ -173,6 +173,21 @@ class IDEView extends React.Component {
|
|||
clearTimeout(this.autosaveInterval);
|
||||
this.autosaveInterval = null;
|
||||
}
|
||||
saveProject() {
|
||||
// return a Promise to save or null
|
||||
if (
|
||||
isUserOwner(this.props) ||
|
||||
(this.props.user.authenticated && !this.props.project.owner)
|
||||
) {
|
||||
console.log('project to save:', this.props.project);
|
||||
return this.props.saveProject(this.cmController.getContent());
|
||||
} else if (this.props.user.authenticated) {
|
||||
return this.props.cloneProject();
|
||||
}
|
||||
|
||||
this.props.showErrorModal('forceAuthentication');
|
||||
return null;
|
||||
}
|
||||
handleGlobalKeydown(e) {
|
||||
// 83 === s
|
||||
if (
|
||||
|
@ -181,16 +196,7 @@ class IDEView extends React.Component {
|
|||
) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (
|
||||
isUserOwner(this.props) ||
|
||||
(this.props.user.authenticated && !this.props.project.owner)
|
||||
) {
|
||||
this.props.saveProject(this.cmController.getContent());
|
||||
} else if (this.props.user.authenticated) {
|
||||
this.props.cloneProject();
|
||||
} else {
|
||||
this.props.showErrorModal('forceAuthentication');
|
||||
}
|
||||
this.saveProject();
|
||||
// 13 === enter
|
||||
} else if (
|
||||
e.keyCode === 13 &&
|
||||
|
@ -387,8 +393,11 @@ class IDEView extends React.Component {
|
|||
setBlobUrl={this.props.setBlobUrl}
|
||||
expandConsole={this.props.expandConsole}
|
||||
clearConsole={this.props.clearConsole}
|
||||
saveProject={this.saveProject.bind(this)}
|
||||
project={this.props.project}
|
||||
cmController={this.cmController}
|
||||
language={this.props.preferences.language}
|
||||
unsavedChanges={this.props.ide.unsavedChanges}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -147,8 +147,21 @@ const files = (state, action) => {
|
|||
return file;
|
||||
}
|
||||
|
||||
return Object.assign({}, file, { content: action.content });
|
||||
return Object.assign({}, file, { content: action.content, changed: true });
|
||||
});
|
||||
case ActionTypes.SET_UNSAVED_CHANGES:
|
||||
if (action.value) {
|
||||
// ignore.
|
||||
return state;
|
||||
}
|
||||
|
||||
return state.map((file) => {
|
||||
if (file.changed) {
|
||||
return Object.assign({}, file, { changed: false });
|
||||
}
|
||||
return file;
|
||||
});
|
||||
// return Object.assign({}, state, { unsavedChanges: action.value });
|
||||
case ActionTypes.SET_BLOB_URL:
|
||||
return state.map((file) => {
|
||||
if (file.id !== action.id) {
|
||||
|
@ -173,7 +186,8 @@ const files = (state, action) => {
|
|||
content: action.content,
|
||||
url: action.url,
|
||||
children: action.children,
|
||||
fileType: action.fileType || 'file'
|
||||
fileType: action.fileType || 'file',
|
||||
changed: false,
|
||||
}];
|
||||
return newState.map((file) => {
|
||||
if (file.id === action.parentId) {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
$base-font-size: 12;
|
||||
|
||||
//colors
|
||||
$p5js-pink: #ed225d;
|
||||
$p5js-pink: #FFE117; /*DP Colours*/
|
||||
$processing-blue: #007BBB;
|
||||
$p5js-active-pink: #f10046;
|
||||
$white: #fff;
|
||||
|
|
|
@ -166,12 +166,23 @@
|
|||
|
||||
.nav__item-logo {
|
||||
position: relative;
|
||||
height: #{42 / $base-font-size}rem;
|
||||
height: #{(42 - 1) / $base-font-size}rem;
|
||||
width: #{56 / $base-font-size}rem;
|
||||
background:$p5js-pink;
|
||||
|
||||
& span {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
svg{
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
padding-top: 5%;
|
||||
|
||||
path{
|
||||
stroke: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.svg__logo g > path {
|
||||
@include themify() {
|
||||
|
|
|
@ -7,7 +7,7 @@ export const Theme = {
|
|||
};
|
||||
|
||||
export const colors = {
|
||||
p5jsPink: '#ed225d',
|
||||
p5jsPink: '#FFE117', // DP Colours
|
||||
processingBlue: '#007BBB',
|
||||
p5jsActivePink: '#f10046',
|
||||
white: '#fff',
|
||||
|
|
318
dist/static/assets/webcam.js
vendored
318
dist/static/assets/webcam.js
vendored
|
@ -1,110 +1,113 @@
|
|||
console.log('p5 version:', p5);
|
||||
console.log('ml5 version:', ml5);
|
||||
console.log(location.origin);
|
||||
|
||||
let assets = {};
|
||||
|
||||
var draw = function () {
|
||||
// //test
|
||||
// background(parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255));
|
||||
// image(video, -width/2, -height/2, width, height);
|
||||
// console.log(detections)
|
||||
};
|
||||
|
||||
var gotResults = function(err, result) {
|
||||
if (err) {
|
||||
console.log(err)
|
||||
return
|
||||
}
|
||||
};
|
||||
// var gotResults = function(err, result) {
|
||||
// if (err) {
|
||||
// console.log(err)
|
||||
// return
|
||||
// }
|
||||
// };
|
||||
|
||||
function code_error(type, error) {
|
||||
window.parent.postMessage({
|
||||
'type': type,
|
||||
'error': error.message,
|
||||
'name': error.name,
|
||||
'line': error.lineNumber - 2, // seems it giveswrong line numbers
|
||||
'column': error.columnNumber
|
||||
}, '*');
|
||||
// function code_error(type, error) {
|
||||
// window.parent.postMessage({
|
||||
// 'type': type,
|
||||
// 'error': error.message,
|
||||
// 'name': error.name,
|
||||
// 'line': error.lineNumber - 2, // seems it giveswrong line numbers
|
||||
// 'column': error.columnNumber
|
||||
// }, '*');
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
function no_code_error(type){
|
||||
window.parent.postMessage({
|
||||
'type': type,
|
||||
'error': null
|
||||
}, '*');
|
||||
}
|
||||
// function no_code_error(type){
|
||||
// window.parent.postMessage({
|
||||
// 'type': type,
|
||||
// 'error': null
|
||||
// }, '*');
|
||||
// }
|
||||
|
||||
window.addEventListener("message", function (e) {
|
||||
if (event.origin !== window.location.origin) {
|
||||
console.error("Invalid origin of message. Ignored");
|
||||
return;
|
||||
}
|
||||
// window.addEventListener("message", function (e) {
|
||||
// if (event.origin !== window.location.origin) {
|
||||
// console.error("Invalid origin of message. Ignored");
|
||||
// return;
|
||||
// }
|
||||
|
||||
console.debug("receive", e.data);
|
||||
// console.debug("receive", e.data);
|
||||
|
||||
switch (e.data.action) {
|
||||
case 'asset':
|
||||
if(e.data.content === null){
|
||||
delete assets[e.data.id];
|
||||
} else {
|
||||
assets[e.data.id] = loadImage(e.data.content);
|
||||
}
|
||||
// switch (e.data.action) {
|
||||
// case 'asset':
|
||||
// if(e.data.content === null){
|
||||
// delete assets[e.data.id];
|
||||
// } else {
|
||||
// assets[e.data.id] = loadImage(e.data.content);
|
||||
// }
|
||||
|
||||
break;
|
||||
case 'code':
|
||||
let f = new Function("");
|
||||
try {
|
||||
f = new Function(e.data.draw);
|
||||
no_code_error('syntax');
|
||||
} catch (error) {
|
||||
code_error('syntax', error);
|
||||
// window.parent.postMessage({'syntax': error.lineNumber});
|
||||
}
|
||||
handleResults = f;
|
||||
break;
|
||||
// break;
|
||||
// case 'code':
|
||||
// let f = new Function("");
|
||||
// try {
|
||||
// f = new Function(e.data.draw);
|
||||
// no_code_error('syntax');
|
||||
// } catch (error) {
|
||||
// code_error('syntax', error);
|
||||
// // window.parent.postMessage({'syntax': error.lineNumber});
|
||||
// }
|
||||
// handleResults = f;
|
||||
// break;
|
||||
|
||||
default:
|
||||
console.error("Invalid action", e.data.action);
|
||||
break;
|
||||
}
|
||||
// default:
|
||||
// console.error("Invalid action", e.data.action);
|
||||
// break;
|
||||
// }
|
||||
|
||||
});
|
||||
// });
|
||||
|
||||
|
||||
let faceapi;
|
||||
var video;
|
||||
var detections;
|
||||
var graphics;
|
||||
var lastFrame;
|
||||
var detections = [];
|
||||
|
||||
let running = true;
|
||||
|
||||
function pause() {
|
||||
if (running)
|
||||
running = false;
|
||||
else {
|
||||
running = true;
|
||||
faceapi.detect(gotResults);
|
||||
}
|
||||
}
|
||||
// function pause() {
|
||||
// if (running)
|
||||
// running = false;
|
||||
// else {
|
||||
// running = true;
|
||||
// faceapi.detect(gotResults);
|
||||
// }
|
||||
// }
|
||||
|
||||
// by default all options are set to true
|
||||
const detection_options = {
|
||||
withLandmarks: true,
|
||||
withDescriptors: false,
|
||||
minConfidence: 0.5,
|
||||
Mobilenetv1Model: '/assets/faceapi',
|
||||
FaceLandmarkModel: '/assets/faceapi',
|
||||
FaceLandmark68TinyNet: '/assets/faceapi',
|
||||
FaceRecognitionModel: '/assets/faceapi',
|
||||
Mobilenetv1Model: window.parent.location.origin + '/assets/faceapi',
|
||||
FaceLandmarkModel: window.parent.location.origin + '/assets/faceapi',
|
||||
FaceLandmark68TinyNet: window.parent.location.origin + '/assets/faceapi',
|
||||
FaceRecognitionModel: window.parent.location.origin + '/assets/faceapi',
|
||||
TinyFaceDetectorModel: window.parent.location.origin + '/assets/faceapi',
|
||||
}
|
||||
|
||||
|
||||
|
||||
function setup() {
|
||||
createCanvas(1280,720, WEBGL);
|
||||
// createCanvas(1280,720, WEBGL);
|
||||
createCanvas(540,420, WEBGL);
|
||||
smooth();
|
||||
noFill();
|
||||
|
||||
|
||||
push();
|
||||
translate(-width/2, -height/2);
|
||||
|
||||
let constraints = {
|
||||
video: {
|
||||
width: { min: 720 },
|
||||
|
@ -113,9 +116,9 @@ function setup() {
|
|||
audio: false
|
||||
};
|
||||
|
||||
// graphics = createGraphics();
|
||||
video = createCapture(constraints);
|
||||
console.log(video.videoWidth);
|
||||
lastFrame = createGraphics(video.width, video.height);
|
||||
|
||||
console.log(video);
|
||||
// HeadGazeSetup(video);
|
||||
// video.size(width, height);
|
||||
|
@ -133,90 +136,27 @@ var handleResults = function(){
|
|||
background((millis()/100)%255,0,0);
|
||||
image(video, -width/2 + 10, -height/2 + 10, width - 20, height -20);
|
||||
};
|
||||
|
||||
|
||||
gotResults = function(err, result) {
|
||||
if (err) {
|
||||
console.log(err)
|
||||
return
|
||||
}
|
||||
// console.log(result)
|
||||
detections = result;
|
||||
|
||||
try{
|
||||
push();
|
||||
translate(-width/2, -height/2);
|
||||
handleResults();
|
||||
pop();
|
||||
|
||||
no_code_error('runtime');
|
||||
}catch(error){code_error('runtime', error);}
|
||||
|
||||
// // background(220);
|
||||
// background(255);
|
||||
|
||||
// push();
|
||||
// // with WEBGL, the coordinate system is 0,0 in the center.
|
||||
// translate(-width / 2, -height / 2, 0);
|
||||
// image(video, 0, 0, width, height);
|
||||
|
||||
// // image(video, 0,0, width, height)
|
||||
// if (detections) {
|
||||
// if (detections.length > 0) {
|
||||
// // console.log(detections)
|
||||
// drawBox(detections)
|
||||
// drawLandmarks(detections)
|
||||
// for (let detection of detections) {
|
||||
// let t = HeadGazeDetect(detection);
|
||||
|
||||
// let rot = vecToRotation(t.rotation);
|
||||
|
||||
// document.getElementById('yaw').value = rot[0];
|
||||
// document.getElementById('roll').value = rot[1];
|
||||
// document.getElementById('pitch').value = rot[2];
|
||||
// // let gaze = getMappedVectors()
|
||||
// // noFill();
|
||||
// // stroke(161, 255, 0,100);
|
||||
// // strokeWeight(2);
|
||||
// // beginShape();
|
||||
// // vertex(gaze[0].x,gaze[0].y);
|
||||
// // vertex(gaze[1].x,gaze[1].y);
|
||||
// // endShape();
|
||||
// // stroke(255, 255, 0,100);
|
||||
// // beginShape();
|
||||
// // vertex(gaze[0].x,gaze[0].y);
|
||||
// // vertex(gaze[2].x,gaze[2].y);
|
||||
// // endShape();
|
||||
// // stroke(0, 0, 255,100);
|
||||
// // beginShape();
|
||||
// // vertex(gaze[0].x,gaze[0].y);
|
||||
// // vertex(gaze[3].x,gaze[3].y);
|
||||
// // endShape();
|
||||
|
||||
|
||||
// // normalMaterial();
|
||||
// push();
|
||||
// console.log('translate', t.translation.data64F);
|
||||
|
||||
// // texture(graphics);
|
||||
// translate(width/2, height/2, 10);
|
||||
// // plane(70);
|
||||
// // translate(t.translation.data64F[0], t.translation.data64F[1], t.translation.data64F[2])
|
||||
// // rotateX(-rot[2]);
|
||||
// rotateY(rot[0]);
|
||||
// // rotateZ(rot[1]);
|
||||
|
||||
// stroke(255, 0, 0);
|
||||
// // texture(graphics);
|
||||
// plane(70);
|
||||
// pop();
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
// pop();
|
||||
|
||||
if (running)
|
||||
faceapi.detect(gotResults);
|
||||
// store data for async draw function
|
||||
detections = result;
|
||||
|
||||
// size of video becomes known only after camera approval
|
||||
if(lastFrame.width != video.width || lastFrame.height != video.height){
|
||||
console.log('Resizing canvas');
|
||||
lastFrame.resizeCanvas(video.width, video.height);
|
||||
}
|
||||
|
||||
// lastFrame.background('red');
|
||||
lastFrame.image(video, 0,0, video.width, video.height);
|
||||
|
||||
faceapi.detect(gotResults);
|
||||
}
|
||||
|
||||
function drawBox(detections) {
|
||||
|
@ -236,36 +176,36 @@ function drawBox(detections) {
|
|||
|
||||
}
|
||||
|
||||
function drawLandmarks(detections) {
|
||||
// noFill();
|
||||
// stroke(161, 95, 251)
|
||||
// strokeWeight(2)
|
||||
function drawLandmarks(detection) {
|
||||
// for (let i = 0; i < detections.length; i++) {
|
||||
const mouth = detection.parts.mouth;
|
||||
const nose = detection.parts.nose;
|
||||
const leftEye = detection.parts.leftEye;
|
||||
const rightEye = detection.parts.rightEye;
|
||||
const rightEyeBrow = detection.parts.rightEyeBrow;
|
||||
const leftEyeBrow = detection.parts.leftEyeBrow;
|
||||
const jawOutline = detection.parts.jawOutline;
|
||||
|
||||
for (let i = 0; i < detections.length; i++) {
|
||||
const mouth = detections[i].parts.mouth;
|
||||
const nose = detections[i].parts.nose;
|
||||
const leftEye = detections[i].parts.leftEye;
|
||||
const rightEye = detections[i].parts.rightEye;
|
||||
const rightEyeBrow = detections[i].parts.rightEyeBrow;
|
||||
const leftEyeBrow = detections[i].parts.leftEyeBrow;
|
||||
const jawOutline = detections[i].parts.jawOutline;
|
||||
drawPart(mouth, true);
|
||||
drawPart(nose, true);
|
||||
drawPart(leftEye, true);
|
||||
drawPart(leftEyeBrow, false);
|
||||
drawPart(rightEye, true);
|
||||
drawPart(rightEyeBrow, false);
|
||||
drawPart(jawOutline, false);
|
||||
|
||||
drawPart(mouth, true);
|
||||
drawPart(nose, true);
|
||||
drawPart(leftEye, true);
|
||||
drawPart(leftEyeBrow, false);
|
||||
drawPart(rightEye, true);
|
||||
drawPart(rightEyeBrow, false);
|
||||
drawPart(jawOutline, false);
|
||||
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
function drawPart(feature, closed) {
|
||||
beginShape();
|
||||
|
||||
const factor_x = width / video.width;
|
||||
const factor_y = height / video.height;
|
||||
|
||||
for (let i = 0; i < feature.length; i++) {
|
||||
const x = feature[i]._x
|
||||
const y = feature[i]._y
|
||||
const x = feature[i]._x *factor_x;
|
||||
const y = feature[i]._y * factor_y;
|
||||
vertex(x, y)
|
||||
}
|
||||
|
||||
|
@ -275,4 +215,36 @@ function drawPart(feature, closed) {
|
|||
endShape();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper around p5.js color class
|
||||
* @param {*} c color, either as array, or string (css name or HEX string)
|
||||
*/
|
||||
function getColor(c) {
|
||||
if(!Array.isArray(c)) c = [c];
|
||||
return new p5.Color(p5.instance, c);
|
||||
}
|
||||
|
||||
var colors = {
|
||||
red: getColor('red'),
|
||||
blue: getColor('blue'),
|
||||
green: getColor('green'),
|
||||
};
|
||||
|
||||
function faceDistance(face1, face2){
|
||||
// distance between faces, in pixels, not meters.. for now
|
||||
|
||||
}
|
||||
|
||||
function getBoundingBox(){
|
||||
// arguments contains points, or sets of points. Find bbox
|
||||
console.log(arguments)
|
||||
|
||||
// return {
|
||||
// top:
|
||||
// left:
|
||||
// width:
|
||||
// height:
|
||||
// }
|
||||
}
|
|
@ -6,7 +6,7 @@ services:
|
|||
- dbdata:/data/db
|
||||
app:
|
||||
build:
|
||||
context: .
|
||||
context: ./
|
||||
dockerfile: Dockerfile
|
||||
target: production
|
||||
# uncomment the following line to pull the image from docker hub
|
||||
|
@ -17,36 +17,42 @@ services:
|
|||
# - "$PWD/.env.production"
|
||||
environment:
|
||||
- API_URL
|
||||
- MONGO_URL
|
||||
- PORT
|
||||
- SESSION_SECRET
|
||||
- AWS_ACCESS_KEY
|
||||
- AWS_SECRET_KEY
|
||||
- S3_BUCKET
|
||||
- AWS_REGION
|
||||
- GITHUB_ID
|
||||
- GITHUB_SECRET
|
||||
- MAILGUN_DOMAIN
|
||||
- MAILGUN_KEY
|
||||
- AWS_SECRET_KEY
|
||||
- CORS_ALLOW_LOCALHOST
|
||||
- EMAIL_SENDER
|
||||
- EMAIL_VERIFY_SECRET_TOKEN
|
||||
- S3_BUCKET_URL_BASE
|
||||
- GG_EXAMPLES_USERNAME
|
||||
- GG_EXAMPLES_PASS
|
||||
- GG_EXAMPLES_EMAIL
|
||||
- GOOGLE_ID
|
||||
- GOOGLE_SECRET
|
||||
- EXAMPLE_USERNAME
|
||||
- EXAMPLE_USER_EMAIL
|
||||
- EXAMPLE_USER_PASSWORD
|
||||
- GG_EXAMPLES_USERNAME
|
||||
- GG_EXAMPLES_EMAIL
|
||||
- GG_EXAMPLES_PASS
|
||||
- ML5_EXAMPLES_USERNAME
|
||||
- ML5_EXAMPLES_PASS
|
||||
- ML5_EXAMPLES_EMAIL
|
||||
- ML5_EXAMPLES_PASS
|
||||
- GITHUB_ID
|
||||
- GITHUB_SECRET
|
||||
- GOOGLE_ID
|
||||
- GOOGLE_SECRET
|
||||
- MAILGUN_DOMAIN
|
||||
- MAILGUN_KEY
|
||||
- MONGO_URL
|
||||
- PORT
|
||||
- S3_BUCKET
|
||||
- S3_BUCKET_URL_BASE
|
||||
- SESSION_SECRET
|
||||
- UI_ACCESS_TOKEN_ENABLED
|
||||
- UPLOAD_LIMIT
|
||||
- MOBILE_ENABLED
|
||||
|
||||
# you can either set this in your .env or as an environment variables
|
||||
# or here YOU CHOOSE
|
||||
# - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
|
||||
volumes:
|
||||
- .:/opt/node/app
|
||||
- /opt/node/app/node_modules
|
||||
- .:/usr/src/app
|
||||
- /usr/src/app/node_modules
|
||||
ports:
|
||||
- '8000:8000'
|
||||
depends_on:
|
||||
|
|
Loading…
Reference in a new issue