Created
June 17, 2014 09:55
-
-
Save forresto/986202ea7739f445e2d7 to your computer and use it in GitHub Desktop.
noflo-canvas demo: bezier curves follow mouse
This file contains hidden or 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": "mousebez", | |
| "id": "af975fd9fd7408002676", | |
| "environment": { | |
| "type": "noflo-browser", | |
| "content": "" | |
| } | |
| }, | |
| "inports": {}, | |
| "outports": {}, | |
| "groups": [], | |
| "processes": { | |
| "canvas/CreateCanvas_c5vvn": { | |
| "component": "canvas/CreateCanvas", | |
| "metadata": { | |
| "label": "canvas/CreateCanvas", | |
| "x": 36, | |
| "y": 648 | |
| } | |
| }, | |
| "body": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "body", | |
| "x": 36, | |
| "y": 468 | |
| } | |
| }, | |
| "append": { | |
| "component": "dom/AppendChild", | |
| "metadata": { | |
| "label": "append", | |
| "x": 144, | |
| "y": 468 | |
| } | |
| }, | |
| "canvas/Draw_jvwtx": { | |
| "component": "canvas/Draw", | |
| "metadata": { | |
| "label": "canvas/Draw", | |
| "x": 900, | |
| "y": 540 | |
| } | |
| }, | |
| "strokes": { | |
| "component": "canvas/Stroke", | |
| "metadata": { | |
| "label": "strokes", | |
| "x": 792, | |
| "y": 576 | |
| } | |
| }, | |
| "curve start": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "curve start", | |
| "x": 540, | |
| "y": 216 | |
| } | |
| }, | |
| "c1s": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "c1s", | |
| "x": 396, | |
| "y": 108 | |
| } | |
| }, | |
| "random xs": { | |
| "component": "canvas/MakeRandom", | |
| "metadata": { | |
| "label": "random xs", | |
| "x": 288, | |
| "y": 36 | |
| } | |
| }, | |
| "random ys": { | |
| "component": "canvas/MakeRandom", | |
| "metadata": { | |
| "label": "random ys", | |
| "x": 288, | |
| "y": 144 | |
| } | |
| }, | |
| "curves": { | |
| "component": "canvas/MakeBezierCurve", | |
| "metadata": { | |
| "label": "curves", | |
| "x": 540, | |
| "y": 360 | |
| } | |
| }, | |
| "curve end": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "curve end", | |
| "x": 396, | |
| "y": 576 | |
| } | |
| }, | |
| "paths": { | |
| "component": "canvas/MakePath", | |
| "metadata": { | |
| "label": "paths", | |
| "x": 648, | |
| "y": 360 | |
| } | |
| }, | |
| "c2s": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "c2s", | |
| "x": 396, | |
| "y": 360 | |
| } | |
| }, | |
| "random xs_jsrxs": { | |
| "component": "canvas/MakeRandom", | |
| "metadata": { | |
| "label": "random xs", | |
| "x": 288, | |
| "y": 252 | |
| } | |
| }, | |
| "random ys_6zery": { | |
| "component": "canvas/MakeRandom", | |
| "metadata": { | |
| "label": "random ys", | |
| "x": 288, | |
| "y": 360 | |
| } | |
| }, | |
| "colors": { | |
| "component": "canvas/MakeColor", | |
| "metadata": { | |
| "label": "colors", | |
| "x": 648, | |
| "y": 576 | |
| } | |
| }, | |
| "hue range": { | |
| "component": "canvas/MakeRange", | |
| "metadata": { | |
| "label": "hue range", | |
| "x": 540, | |
| "y": 540 | |
| } | |
| }, | |
| "dom/Listen_xzh6x": { | |
| "component": "dom/Listen", | |
| "metadata": { | |
| "label": "dom/Listen", | |
| "x": 144, | |
| "y": 540 | |
| } | |
| }, | |
| "clientX": { | |
| "component": "objects/ExtractProperty", | |
| "metadata": { | |
| "label": "clientX", | |
| "x": 288, | |
| "y": 468 | |
| } | |
| }, | |
| "clientY": { | |
| "component": "objects/ExtractProperty", | |
| "metadata": { | |
| "label": "clientY", | |
| "x": 288, | |
| "y": 576 | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "body", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "append", | |
| "port": "parent" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/CreateCanvas_c5vvn", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "append", | |
| "port": "child" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/CreateCanvas_c5vvn", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_jvwtx", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "strokes", | |
| "port": "stroke" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_jvwtx", | |
| "port": "commands" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "random xs", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "c1s", | |
| "port": "x" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "random ys", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "c1s", | |
| "port": "y" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "curve end", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "curves", | |
| "port": "end" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "curve start", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "paths", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "random xs_jsrxs", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "c2s", | |
| "port": "x" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "random ys_6zery", | |
| "port": "numbers" | |
| }, | |
| "tgt": { | |
| "process": "c2s", | |
| "port": "y" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "c1s", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "curves", | |
| "port": "control1" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "c2s", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "curves", | |
| "port": "control2" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "curves", | |
| "port": "beziercurve" | |
| }, | |
| "tgt": { | |
| "process": "paths", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "paths", | |
| "port": "path" | |
| }, | |
| "tgt": { | |
| "process": "strokes", | |
| "port": "items" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "hue range", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "colors", | |
| "port": "hue" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "colors", | |
| "port": "color" | |
| }, | |
| "tgt": { | |
| "process": "strokes", | |
| "port": "strokestyle" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/CreateCanvas_c5vvn", | |
| "port": "canvas" | |
| }, | |
| "tgt": { | |
| "process": "dom/Listen_xzh6x", | |
| "port": "element" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "dom/Listen_xzh6x", | |
| "port": "event" | |
| }, | |
| "tgt": { | |
| "process": "clientX", | |
| "port": "in" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "dom/Listen_xzh6x", | |
| "port": "event" | |
| }, | |
| "tgt": { | |
| "process": "clientY", | |
| "port": "in" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "clientX", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "curve end", | |
| "port": "x" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "src": { | |
| "process": "clientY", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "curve end", | |
| "port": "y" | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "data": "body", | |
| "tgt": { | |
| "process": "body", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_jvwtx", | |
| "port": "drawevery" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "curve start", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_jvwtx", | |
| "port": "clearevery" | |
| } | |
| }, | |
| { | |
| "data": 100, | |
| "tgt": { | |
| "process": "colors", | |
| "port": "saturation" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "random xs", | |
| "port": "min" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "random xs_jsrxs", | |
| "port": "min" | |
| } | |
| }, | |
| { | |
| "data": 200, | |
| "tgt": { | |
| "process": "random xs_jsrxs", | |
| "port": "max" | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "random xs", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "random ys", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "hue range", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "colors", | |
| "port": "lightness" | |
| } | |
| }, | |
| { | |
| "data": 0.9, | |
| "tgt": { | |
| "process": "colors", | |
| "port": "alpha" | |
| } | |
| }, | |
| { | |
| "data": 2, | |
| "tgt": { | |
| "process": "strokes", | |
| "port": "linewidth" | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "random ys_6zery", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": 50, | |
| "tgt": { | |
| "process": "random xs_jsrxs", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "hue range", | |
| "port": "to" | |
| } | |
| }, | |
| { | |
| "data": 120, | |
| "tgt": { | |
| "process": "hue range", | |
| "port": "from" | |
| } | |
| }, | |
| { | |
| "data": 100, | |
| "tgt": { | |
| "process": "curve end", | |
| "port": "x" | |
| } | |
| }, | |
| { | |
| "data": 20, | |
| "tgt": { | |
| "process": "random ys", | |
| "port": "min" | |
| } | |
| }, | |
| { | |
| "data": 180, | |
| "tgt": { | |
| "process": "random ys", | |
| "port": "max" | |
| } | |
| }, | |
| { | |
| "data": 20, | |
| "tgt": { | |
| "process": "random ys_6zery", | |
| "port": "min" | |
| } | |
| }, | |
| { | |
| "data": 180, | |
| "tgt": { | |
| "process": "random ys_6zery", | |
| "port": "max" | |
| } | |
| }, | |
| { | |
| "data": 200, | |
| "tgt": { | |
| "process": "curve end", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "data": 200, | |
| "tgt": { | |
| "process": "random xs", | |
| "port": "max" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "curve start", | |
| "port": "x" | |
| } | |
| }, | |
| { | |
| "data": "clientX", | |
| "tgt": { | |
| "process": "clientX", | |
| "port": "key" | |
| } | |
| }, | |
| { | |
| "data": "clientY", | |
| "tgt": { | |
| "process": "clientY", | |
| "port": "key" | |
| } | |
| }, | |
| { | |
| "data": "mousemove", | |
| "tgt": { | |
| "process": "dom/Listen_xzh6x", | |
| "port": "type" | |
| } | |
| }, | |
| { | |
| "data": 300, | |
| "tgt": { | |
| "process": "canvas/CreateCanvas_c5vvn", | |
| "port": "width" | |
| } | |
| }, | |
| { | |
| "data": 300, | |
| "tgt": { | |
| "process": "canvas/CreateCanvas_c5vvn", | |
| "port": "height" | |
| } | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment