Skip to content

Instantly share code, notes, and snippets.

@forresto

forresto/noflo.json

Created June 17, 2014 09:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save forresto/986202ea7739f445e2d7 to your computer and use it in GitHub Desktop.
Save forresto/986202ea7739f445e2d7 to your computer and use it in GitHub Desktop.
Download ZIP
noflo-canvas demo: bezier curves follow mouse
Raw
noflo.json
{
"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