Skip to content

Instantly share code, notes, and snippets.

@forresto
Last active October 24, 2017 08:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save forresto/f6d1141de2833e45fb3c to your computer and use it in GitHub Desktop.
Save forresto/f6d1141de2833e45fb3c to your computer and use it in GitHub Desktop.
noflo-clmtrackr -> noflo-geometry
{
"properties": {
"name": "face",
"environment": {
"type": "noflo-browser",
"content": "<video id=\"vid\" width=\"640\" height=\"480\" style=\"position:absolute; top:0px; left:0px\" autoplay></video>\n<canvas id=\"can\" width=\"640\" height=\"480\" style=\"position:absolute; top:0px; left:0px\"></canvas>\n<div id=\"start\" style=\"position:absolute; top:0px; left:0px;\"><button id=\"start\">start camera</button><br/>\ncolor start <input id=\"colorstart\" type=\"range\" min=\"0\" max=\"360\" value=\"0\"></input><br/>\ncolor end<input id=\"colorend\" type=\"range\" min=\"0\" max=\"360\" value=\"360\"></input><br />\ncolor count<input id=\"colorcount\" type=\"range\" min=\"1\" max=\"100\" value=\"50\"></input><br/>\n"
}
},
"inports": {},
"outports": {},
"groups": [
{
"name": "geometry",
"nodes": [
"track",
"voronoi",
"wireframe"
],
"metadata": {
"description": ""
}
},
{
"name": "ui",
"nodes": [
"change",
"change_eg3qo",
"change_hxfzl",
"color count",
"color end",
"color start",
"get #start",
"listen click"
],
"metadata": {
"description": ""
}
},
{
"name": "drawing",
"nodes": [
"bg fill",
"fill",
"stroke",
"white fg stroke"
],
"metadata": {
"description": ""
}
},
{
"name": "colors",
"nodes": [
"alpha colors",
"fill colors",
"random hues",
"stroke colors"
],
"metadata": {
"description": ""
}
}
],
"processes": {
"webcam": {
"component": "gum/GetUserMedia",
"metadata": {
"label": "webcam",
"x": 360,
"y": 360,
"width": 72,
"height": 72
}
},
"set src": {
"component": "dom/SetAttribute",
"metadata": {
"label": "set src",
"x": 540,
"y": 288,
"width": 72,
"height": 72
}
},
"get #vid": {
"component": "dom/GetElement",
"metadata": {
"label": "get #vid",
"x": 360,
"y": 252,
"width": 72,
"height": 72
}
},
"track": {
"component": "clmtrackr/TrackFace",
"metadata": {
"label": "track",
"x": 720,
"y": 360,
"width": 72,
"height": 72
}
},
"get canvas": {
"component": "dom/GetElement",
"metadata": {
"label": "get canvas",
"x": 1440,
"y": 216,
"width": 72,
"height": 72
}
},
"canvas/Draw_8p8qe": {
"component": "canvas/Draw",
"metadata": {
"label": "canvas/Draw",
"x": 1656,
"y": 576,
"width": 72,
"height": 72
}
},
"fill colors": {
"component": "canvas/MakeColor",
"metadata": {
"label": "fill colors",
"x": 936,
"y": 792,
"width": 72,
"height": 72
}
},
"random hues": {
"component": "canvas/MakeRandom",
"metadata": {
"label": "random hues",
"x": 720,
"y": 792,
"width": 72,
"height": 72
}
},
"fill": {
"component": "canvas/Fill",
"metadata": {
"label": "fill",
"x": 1404,
"y": 612,
"width": 72,
"height": 72
}
},
"get #start": {
"component": "dom/GetElement",
"metadata": {
"label": "get #start",
"x": 72,
"y": 360,
"width": 72,
"height": 72
}
},
"listen click": {
"component": "dom/Listen",
"metadata": {
"label": "listen click",
"x": 216,
"y": 360,
"width": 72,
"height": 72
}
},
"voronoi": {
"component": "geometry/Voronoi",
"metadata": {
"label": "voronoi",
"x": 900,
"y": 432,
"width": 72,
"height": 72
}
},
"white fg stroke": {
"component": "canvas/Stroke",
"metadata": {
"label": "white fg stroke",
"x": 1404,
"y": 828,
"width": 72,
"height": 72
}
},
"wireframe": {
"component": "clmtrackr/WireframeFace",
"metadata": {
"label": "wireframe",
"x": 900,
"y": 288,
"width": 72,
"height": 72
}
},
"stroke": {
"component": "canvas/Stroke",
"metadata": {
"label": "stroke",
"x": 1404,
"y": 720,
"width": 72,
"height": 72
}
},
"stroke colors": {
"component": "canvas/MakeColor",
"metadata": {
"label": "stroke colors",
"x": 936,
"y": 936,
"width": 72,
"height": 72
}
},
"bg fill": {
"component": "canvas/Fill",
"metadata": {
"label": "bg fill",
"x": 1404,
"y": 396,
"width": 72,
"height": 72
}
},
"alpha colors": {
"component": "canvas/MakeColor",
"metadata": {
"label": "alpha colors",
"x": 936,
"y": 648,
"width": 72,
"height": 72
}
},
"color count": {
"component": "dom/GetElement",
"metadata": {
"label": "color count",
"x": 72,
"y": 864,
"width": 72,
"height": 72
}
},
"color start": {
"component": "dom/GetElement",
"metadata": {
"label": "color start",
"x": 72,
"y": 576,
"width": 72,
"height": 72
}
},
"color end": {
"component": "dom/GetElement",
"metadata": {
"label": "color end",
"x": 72,
"y": 720,
"width": 72,
"height": 72
}
},
"change_hxfzl": {
"component": "interaction/ListenChange",
"metadata": {
"label": "change",
"x": 216,
"y": 720,
"width": 72,
"height": 72
}
},
"change_eg3qo": {
"component": "interaction/ListenChange",
"metadata": {
"label": "change",
"x": 216,
"y": 864,
"width": 72,
"height": 72
}
},
"change": {
"component": "interaction/ListenChange",
"metadata": {
"label": "change",
"x": 216,
"y": 576,
"width": 72,
"height": 72
}
}
},
"connections": [
{
"src": {
"process": "webcam",
"port": "url"
},
"tgt": {
"process": "set src",
"port": "value"
},
"metadata": {
"route": 4
}
},
{
"src": {
"process": "get #vid",
"port": "element"
},
"tgt": {
"process": "set src",
"port": "element"
},
"metadata": {
"route": 4
}
},
{
"src": {
"process": "set src",
"port": "element"
},
"tgt": {
"process": "track",
"port": "image"
},
"metadata": {
"route": 4
}
},
{
"src": {
"process": "get canvas",
"port": "element"
},
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "canvas"
},
"metadata": {}
},
{
"src": {
"process": "random hues",
"port": "numbers"
},
"tgt": {
"process": "fill colors",
"port": "hue"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "fill colors",
"port": "color"
},
"tgt": {
"process": "fill",
"port": "fillstyle"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "get #start",
"port": "element"
},
"tgt": {
"process": "listen click",
"port": "element"
},
"metadata": {
"route": 4
}
},
{
"src": {
"process": "listen click",
"port": "event"
},
"tgt": {
"process": "webcam",
"port": "start"
},
"metadata": {
"route": 4
}
},
{
"src": {
"process": "voronoi",
"port": "paths"
},
"tgt": {
"process": "white fg stroke",
"port": "items"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "track",
"port": "points"
},
"tgt": {
"process": "wireframe",
"port": "points"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "wireframe",
"port": "paths"
},
"tgt": {
"process": "fill",
"port": "items"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "wireframe",
"port": "paths"
},
"tgt": {
"process": "stroke",
"port": "items"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "random hues",
"port": "numbers"
},
"tgt": {
"process": "stroke colors",
"port": "hue"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "stroke colors",
"port": "color"
},
"tgt": {
"process": "stroke",
"port": "strokestyle"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "track",
"port": "points"
},
"tgt": {
"process": "voronoi",
"port": "points"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "track",
"port": "points"
},
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "tick"
},
"metadata": {
"route": 0
}
},
{
"src": {
"process": "voronoi",
"port": "paths"
},
"tgt": {
"process": "bg fill",
"port": "items"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "random hues",
"port": "numbers"
},
"tgt": {
"process": "alpha colors",
"port": "hue"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "bg fill",
"port": "fill"
},
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "commands"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "fill",
"port": "fill"
},
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "commands"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "stroke",
"port": "stroke"
},
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "commands"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "white fg stroke",
"port": "stroke"
},
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "commands"
},
"metadata": {
"route": 9
}
},
{
"src": {
"process": "color count",
"port": "element"
},
"tgt": {
"process": "change_eg3qo",
"port": "element"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "color start",
"port": "element"
},
"tgt": {
"process": "change",
"port": "element"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "color end",
"port": "element"
},
"tgt": {
"process": "change_hxfzl",
"port": "element"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "change_eg3qo",
"port": "value"
},
"tgt": {
"process": "random hues",
"port": "count"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "change",
"port": "value"
},
"tgt": {
"process": "random hues",
"port": "min"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "change_hxfzl",
"port": "value"
},
"tgt": {
"process": "random hues",
"port": "max"
},
"metadata": {
"route": 2
}
},
{
"src": {
"process": "alpha colors",
"port": "color"
},
"tgt": {
"process": "bg fill",
"port": "fillstyle"
},
"metadata": {
"route": 2
}
},
{
"data": true,
"tgt": {
"process": "webcam",
"port": "video"
}
},
{
"data": false,
"tgt": {
"process": "webcam",
"port": "audio"
}
},
{
"data": "src",
"tgt": {
"process": "set src",
"port": "attribute"
}
},
{
"data": "#vid",
"tgt": {
"process": "get #vid",
"port": "selector"
}
},
{
"data": "#can",
"tgt": {
"process": "get canvas",
"port": "selector"
}
},
{
"data": true,
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "clearevery"
}
},
{
"data": 0,
"tgt": {
"process": "random hues",
"port": "min"
}
},
{
"data": 360,
"tgt": {
"process": "random hues",
"port": "max"
}
},
{
"data": 100,
"tgt": {
"process": "fill colors",
"port": "saturation"
}
},
{
"data": "click",
"tgt": {
"process": "listen click",
"port": "type"
}
},
{
"data": true,
"tgt": {
"process": "white fg stroke",
"port": "closepath"
}
},
{
"data": {
"point": {
"x": 0,
"y": 0
},
"width": 640,
"height": 480
},
"tgt": {
"process": "voronoi",
"port": "bbox"
}
},
{
"data": true,
"tgt": {
"process": "stroke",
"port": "closepath"
}
},
{
"data": 100,
"tgt": {
"process": "stroke colors",
"port": "saturation"
}
},
{
"data": "white",
"tgt": {
"process": "white fg stroke",
"port": "strokestyle"
}
},
{
"data": 0.5,
"tgt": {
"process": "stroke",
"port": "linewidth"
}
},
{
"data": 25,
"tgt": {
"process": "stroke colors",
"port": "lightness"
}
},
{
"data": false,
"tgt": {
"process": "canvas/Draw_8p8qe",
"port": "drawevery"
}
},
{
"data": 100,
"tgt": {
"process": "alpha colors",
"port": "saturation"
}
},
{
"data": 5,
"tgt": {
"process": "random hues",
"port": "count"
}
},
{
"data": "#colorcount",
"tgt": {
"process": "color count",
"port": "selector"
}
},
{
"data": "#colorstart",
"tgt": {
"process": "color start",
"port": "selector"
}
},
{
"data": "#colorend",
"tgt": {
"process": "color end",
"port": "selector"
}
},
{
"data": 1,
"tgt": {
"process": "fill colors",
"port": "alpha"
}
},
{
"data": 50,
"tgt": {
"process": "alpha colors",
"port": "lightness"
}
},
{
"data": 0.5,
"tgt": {
"process": "white fg stroke",
"port": "linewidth"
}
},
{
"data": 50,
"tgt": {
"process": "fill colors",
"port": "lightness"
}
},
{
"data": "rgba(0,0,0,0.5)",
"tgt": {
"process": "bg fill",
"port": "fillstyle"
}
},
{
"data": 0.5,
"tgt": {
"process": "alpha colors",
"port": "alpha"
}
},
{
"data": "#start",
"tgt": {
"process": "get #start",
"port": "selector"
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment