Last active
August 29, 2015 14:06
-
-
Save forresto/a1096a406131e109f836 to your computer and use it in GitHub Desktop.
noflo-canvas demo: yin-yang
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "properties": { | |
| "name": "yin-yang", | |
| "environment": { | |
| "type": "noflo-browser", | |
| "content": "<style>body{background-color:grey;}</style>\nradius <input id=\"radius\" type=\"range\" min=\"1\" max=\"150\" value=\"150\"></input><br>\nhole <input id=\"hole\" type=\"range\" min=\"0\" max=\"1\" step=\"0.001\" value=\"0.6\"></input><br>" | |
| }, | |
| "id": "a1096a406131e109f836" | |
| }, | |
| "inports": {}, | |
| "outports": {}, | |
| "groups": [ | |
| { | |
| "name": "shapes", | |
| "nodes": [ | |
| "circle_f70jm", | |
| "concave arc", | |
| "convex arc", | |
| "hole", | |
| "outer arc" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "points", | |
| "nodes": [ | |
| "canvas/MakePoint_lzo5j", | |
| "canvas/MakePoint_thssz" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "inputs", | |
| "nodes": [ | |
| "change", | |
| "change_splsh", | |
| "hole range", | |
| "radius range" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| }, | |
| { | |
| "name": "math", | |
| "nodes": [ | |
| "* -1", | |
| "* size", | |
| "/2" | |
| ], | |
| "metadata": { | |
| "description": "" | |
| } | |
| } | |
| ], | |
| "processes": { | |
| "canvas": { | |
| "component": "canvas/CreateCanvas", | |
| "metadata": { | |
| "label": "canvas", | |
| "x": 1728, | |
| "y": 360, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/Draw_tbmsa": { | |
| "component": "canvas/Draw", | |
| "metadata": { | |
| "label": "canvas/Draw", | |
| "x": 1836, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "append": { | |
| "component": "dom/AppendChild", | |
| "metadata": { | |
| "label": "append", | |
| "x": 1836, | |
| "y": 216, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "body": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "body", | |
| "x": 1728, | |
| "y": 216, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "outer arc": { | |
| "component": "canvas/MakeArc", | |
| "metadata": { | |
| "label": "outer arc", | |
| "x": 972, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "white fill": { | |
| "component": "canvas/Fill", | |
| "metadata": { | |
| "label": "white fill", | |
| "x": 1584, | |
| "y": 576, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "shape": { | |
| "component": "canvas/MakePath", | |
| "metadata": { | |
| "label": "shape", | |
| "x": 1152, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "convex arc": { | |
| "component": "canvas/MakeArc", | |
| "metadata": { | |
| "label": "convex arc", | |
| "x": 972, | |
| "y": 756, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "concave arc": { | |
| "component": "canvas/MakeArc", | |
| "metadata": { | |
| "label": "concave arc", | |
| "x": 972, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "center": { | |
| "component": "canvas/Transform", | |
| "metadata": { | |
| "label": "center", | |
| "x": 1728, | |
| "y": 612, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "hole": { | |
| "component": "canvas/MakeArc", | |
| "metadata": { | |
| "label": "hole", | |
| "x": 972, | |
| "y": 900, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "circle_f70jm": { | |
| "component": "canvas/MakeArc", | |
| "metadata": { | |
| "label": "circle", | |
| "x": 972, | |
| "y": 612, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "rotate": { | |
| "component": "canvas/Transform", | |
| "metadata": { | |
| "label": "rotate", | |
| "x": 1440, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "black fill": { | |
| "component": "canvas/Fill", | |
| "metadata": { | |
| "label": "black fill", | |
| "x": 1584, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "half": { | |
| "component": "canvas/Group", | |
| "metadata": { | |
| "label": "half", | |
| "x": 1296, | |
| "y": 576, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "debug": { | |
| "component": "core/Output", | |
| "metadata": { | |
| "label": "debug", | |
| "x": 1836, | |
| "y": 612, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "change": { | |
| "component": "interaction/ListenChange", | |
| "metadata": { | |
| "label": "change", | |
| "x": 180, | |
| "y": 612, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "radius range": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "radius range", | |
| "x": 36, | |
| "y": 612, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "/2": { | |
| "component": "math/Divide", | |
| "metadata": { | |
| "label": "/2", | |
| "x": 396, | |
| "y": 288, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakePoint_thssz": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "canvas/MakePoint", | |
| "x": 756, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "* -1": { | |
| "component": "math/Multiply", | |
| "metadata": { | |
| "label": "* -1", | |
| "x": 540, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakePoint_lzo5j": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "canvas/MakePoint", | |
| "x": 756, | |
| "y": 324, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "* size": { | |
| "component": "math/Multiply", | |
| "metadata": { | |
| "label": "* size", | |
| "x": 540, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "hole range": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "hole range", | |
| "x": 36, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "change_splsh": { | |
| "component": "interaction/ListenChange", | |
| "metadata": { | |
| "label": "change", | |
| "x": 180, | |
| "y": 468, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "canvas", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "append", | |
| "port": "child" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_tbmsa", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "body", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "append", | |
| "port": "parent" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "outer arc", | |
| "port": "arc" | |
| }, | |
| "tgt": { | |
| "process": "shape", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "convex arc", | |
| "port": "arc" | |
| }, | |
| "tgt": { | |
| "process": "shape", | |
| "port": "items" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "concave arc", | |
| "port": "arc" | |
| }, | |
| "tgt": { | |
| "process": "shape", | |
| "port": "items" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "hole", | |
| "port": "arc" | |
| }, | |
| "tgt": { | |
| "process": "shape", | |
| "port": "items" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "rotate", | |
| "port": "transform" | |
| }, | |
| "tgt": { | |
| "process": "black fill", | |
| "port": "items" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "shape", | |
| "port": "path" | |
| }, | |
| "tgt": { | |
| "process": "half", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "circle_f70jm", | |
| "port": "arc" | |
| }, | |
| "tgt": { | |
| "process": "half", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "half", | |
| "port": "group" | |
| }, | |
| "tgt": { | |
| "process": "rotate", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "black fill", | |
| "port": "fill" | |
| }, | |
| "tgt": { | |
| "process": "center", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "half", | |
| "port": "group" | |
| }, | |
| "tgt": { | |
| "process": "white fill", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "white fill", | |
| "port": "fill" | |
| }, | |
| "tgt": { | |
| "process": "center", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "center", | |
| "port": "transform" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_tbmsa", | |
| "port": "commands" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "center", | |
| "port": "transform" | |
| }, | |
| "tgt": { | |
| "process": "debug", | |
| "port": "in" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "radius range", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "change", | |
| "port": "element" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "change", | |
| "port": "value" | |
| }, | |
| "tgt": { | |
| "process": "/2", | |
| "port": "dividend" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "/2", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "concave arc", | |
| "port": "radius" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "/2", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "convex arc", | |
| "port": "radius" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "change", | |
| "port": "value" | |
| }, | |
| "tgt": { | |
| "process": "outer arc", | |
| "port": "radius" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "/2", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakePoint_thssz", | |
| "port": "y" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakePoint_thssz", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "convex arc", | |
| "port": "center" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "/2", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "* -1", | |
| "port": "multiplicand" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "* -1", | |
| "port": "product" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakePoint_lzo5j", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakePoint_lzo5j", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "concave arc", | |
| "port": "center" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakePoint_thssz", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "circle_f70jm", | |
| "port": "center" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakePoint_thssz", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "hole", | |
| "port": "center" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "/2", | |
| "port": "quotient" | |
| }, | |
| "tgt": { | |
| "process": "* size", | |
| "port": "multiplicand" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "* size", | |
| "port": "product" | |
| }, | |
| "tgt": { | |
| "process": "hole", | |
| "port": "radius" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "* size", | |
| "port": "product" | |
| }, | |
| "tgt": { | |
| "process": "circle_f70jm", | |
| "port": "radius" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "hole range", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "change_splsh", | |
| "port": "element" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "change_splsh", | |
| "port": "value" | |
| }, | |
| "tgt": { | |
| "process": "* size", | |
| "port": "multiplier" | |
| } | |
| }, | |
| { | |
| "data": 300, | |
| "tgt": { | |
| "process": "canvas", | |
| "port": "width" | |
| } | |
| }, | |
| { | |
| "data": 300, | |
| "tgt": { | |
| "process": "canvas", | |
| "port": "height" | |
| } | |
| }, | |
| { | |
| "data": "body", | |
| "tgt": { | |
| "process": "body", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 1.571, | |
| "tgt": { | |
| "process": "outer arc", | |
| "port": "end" | |
| } | |
| }, | |
| { | |
| "data": "white", | |
| "tgt": { | |
| "process": "white fill", | |
| "port": "fillstyle" | |
| } | |
| }, | |
| { | |
| "data": -1.571, | |
| "tgt": { | |
| "process": "outer arc", | |
| "port": "start" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_tbmsa", | |
| "port": "clearevery" | |
| } | |
| }, | |
| { | |
| "data": 1.571, | |
| "tgt": { | |
| "process": "convex arc", | |
| "port": "start" | |
| } | |
| }, | |
| { | |
| "data": -1.571, | |
| "tgt": { | |
| "process": "convex arc", | |
| "port": "end" | |
| } | |
| }, | |
| { | |
| "data": 1.571, | |
| "tgt": { | |
| "process": "concave arc", | |
| "port": "start" | |
| } | |
| }, | |
| { | |
| "data": 150, | |
| "tgt": { | |
| "process": "outer arc", | |
| "port": "radius" | |
| } | |
| }, | |
| { | |
| "data": -1.571, | |
| "tgt": { | |
| "process": "concave arc", | |
| "port": "end" | |
| } | |
| }, | |
| { | |
| "data": { | |
| "x": 0, | |
| "y": 0 | |
| }, | |
| "tgt": { | |
| "process": "outer arc", | |
| "port": "center" | |
| } | |
| }, | |
| { | |
| "data": false, | |
| "tgt": { | |
| "process": "outer arc", | |
| "port": "reverse" | |
| } | |
| }, | |
| { | |
| "data": { | |
| "x": 150, | |
| "y": 150 | |
| }, | |
| "tgt": { | |
| "process": "center", | |
| "port": "translate" | |
| } | |
| }, | |
| { | |
| "data": 75, | |
| "tgt": { | |
| "process": "convex arc", | |
| "port": "radius" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "convex arc", | |
| "port": "reverse" | |
| } | |
| }, | |
| { | |
| "data": false, | |
| "tgt": { | |
| "process": "concave arc", | |
| "port": "reverse" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "hole", | |
| "port": "start" | |
| } | |
| }, | |
| { | |
| "data": 30, | |
| "tgt": { | |
| "process": "hole", | |
| "port": "radius" | |
| } | |
| }, | |
| { | |
| "data": 75, | |
| "tgt": { | |
| "process": "concave arc", | |
| "port": "radius" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "hole", | |
| "port": "reverse" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_tbmsa", | |
| "port": "drawevery" | |
| } | |
| }, | |
| { | |
| "data": 30, | |
| "tgt": { | |
| "process": "circle_f70jm", | |
| "port": "radius" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "circle_f70jm", | |
| "port": "start" | |
| } | |
| }, | |
| { | |
| "data": 6.28, | |
| "tgt": { | |
| "process": "circle_f70jm", | |
| "port": "end" | |
| } | |
| }, | |
| { | |
| "data": -3.1415, | |
| "tgt": { | |
| "process": "rotate", | |
| "port": "rotate" | |
| } | |
| }, | |
| { | |
| "data": -6.28, | |
| "tgt": { | |
| "process": "hole", | |
| "port": "end" | |
| } | |
| }, | |
| { | |
| "data": "black", | |
| "tgt": { | |
| "process": "black fill", | |
| "port": "fillstyle" | |
| } | |
| }, | |
| { | |
| "data": "#radius", | |
| "tgt": { | |
| "process": "radius range", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 2, | |
| "tgt": { | |
| "process": "/2", | |
| "port": "divisor" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "canvas/MakePoint_thssz", | |
| "port": "x" | |
| } | |
| }, | |
| { | |
| "data": -1, | |
| "tgt": { | |
| "process": "* -1", | |
| "port": "multiplier" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "canvas/MakePoint_lzo5j", | |
| "port": "x" | |
| } | |
| }, | |
| { | |
| "data": -75, | |
| "tgt": { | |
| "process": "canvas/MakePoint_lzo5j", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "data": 75, | |
| "tgt": { | |
| "process": "canvas/MakePoint_thssz", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "data": 0.6, | |
| "tgt": { | |
| "process": "* size", | |
| "port": "multiplier" | |
| } | |
| }, | |
| { | |
| "data": "#hole", | |
| "tgt": { | |
| "process": "hole range", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 75, | |
| "tgt": { | |
| "process": "* -1", | |
| "port": "multiplicand" | |
| } | |
| }, | |
| { | |
| "data": 75, | |
| "tgt": { | |
| "process": "* size", | |
| "port": "multiplicand" | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment