nodebased
ブラウザで動くノードベースプログラミング環境のプロトタイプを作ったmiyamonz.icon
2021頃のもの
https://nodebased.netlify.app/
https://github.com/miyamonz/nodebased
↑動くものですがめっちゃ不安定で、説明もなんもない、ごめん！！！
今は完全に新しく作り直してます
面白ポイント
この環境上で「ドラッグアンドドロップ」の実装ができる nodebased#6123ab02385a9200003465fd
ノードのUI自体をこの環境上で作れる nodebased#6123aae3385a9200003465fa
操作方法
double clickまたはspaceを押すとノード一覧が出る
キーボード入力で絞り込み
output to inputをdragして線をつなぐ
逆は無理です
接続した線は消せないです
他の仮ノードとつないでノードを消すとかすればなんとかなったりする
ドラッグで範囲選択、ctrl cとかでコピペ
ノードはjsonで表現されてて、テキストとしてコピーできる
json貼り付けるとノードも貼り付けられる
範囲選択して右上のボタン押すとサブグラフに格納できる
inlet, outletノードを使うとサブグラフの入出力として露出できる
注意
不安定
循環参照せたり
変なことやるとすぐ重くなったり無限ループなる
適度にreloadしてぶっ飛ばそう
作りかけのときはコピーしてクリップボードに入れてからぶっ飛ばす
例(jsonコピペすると動くよ
ドラッグできるcircle
https://gyazo.com/0a1642f9f9eaac2faaca81dc597b23c6
ポイントは、circle, press, hold, mouse等のノードを使って、「ドラッグアンドドロップ」という仕組みを実現できているところ
単純なノードの組み合わせて、UIの機能を作る、ということ
code:json
{"nodes":[{"name":"hold","id":"0","position":{"x":588,"y":205},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"circle","id":"1","position":{"x":374,"y":104},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"r"},"osockets":{"type":"output","name":0}},{"name":"press","id":"2","position":{"x":590,"y":112},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"render","id":"3","position":{"x":815,"y":134},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":[]},{"name":"unpack","id":"4","position":{"x":222,"y":109},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"mouse","id":"5","position":{"x":436,"y":263},"isockets":[],"osockets":{"type":"output","name":0}},{"name":"slider","id":"6","position":{"x":237,"y":205},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":25}],"edges":{"from":{"nodeId":"1","socketName":0},"to":{"nodeId":"2","socketName":0}},{"from":{"nodeId":"2","socketName":1},"to":{"nodeId":"0","socketName":0}},{"from":{"nodeId":"2","socketName":0},"to":{"nodeId":"3","socketName":2}},{"from":{"nodeId":"4","socketName":0},"to":{"nodeId":"1","socketName":"x"}},{"from":{"nodeId":"4","socketName":1},"to":{"nodeId":"1","socketName":"y"}},{"from":{"nodeId":"5","socketName":0},"to":{"nodeId":"0","socketName":1}},{"from":{"nodeId":"0","socketName":0},"to":{"nodeId":"4","socketName":0}},{"from":{"nodeId":"6","socketName":0},"to":{"nodeId":"1","socketName":"r"}}}
サブグラフ機能を用いた、2dスライダーの自作
https://gyazo.com/0884c00daa3d7cb8dd8465ee30e0b653
ノードのUI自体を、この環境内で作ってしまう
subGraphノード内で、上記のドラッグアンドドロップの仕組みが入っている
重いし動かしまくってると落ちる
code:json
{"nodes":[{"name":"subGraph","id":"0","position":{"x":222.81818181818187,"y":161.72727272727272},"isockets":[],"osockets":{"type":"output","name":0},"data":{"nodes":[{"name":"rect","id":"504843780538","position":{"x":216,"y":109},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"width"},{"type":"input","name":"height"},"osockets":{"type":"output","name":0}},{"name":"g","id":"831055740182","position":{"x":770,"y":122},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":{"type":"output","name":0}},{"name":"expose","id":"310875547309","position":{"x":940,"y":122},"isockets":{"type":"input","name":"element"},{"type":"input","name":"width"},{"type":"input","name":"height"},"osockets":{"type":"output","name":"element"},{"type":"output","name":"size"}},{"name":"slider","id":"740793246283","position":{"x":47,"y":121},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":100},{"name":"circle","id":"514990025154","position":{"x":332,"y":321},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"r"},"osockets":{"type":"output","name":0}},{"name":"slider","id":"872840628494","position":{"x":170,"y":446},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":11},{"name":"onMouse","id":"186645442335","position":{"x":562,"y":126},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"unpack","id":"963664057677","position":{"x":175,"y":328},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"press","id":"235743271733","position":{"x":374,"y":124},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"hold","id":"846975335022","position":{"x":682,"y":323},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"124445316994","position":{"x":896,"y":458},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"button","id":"13109648368","position":{"x":476,"y":236},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"740793246283","socketName":0},"to":{"nodeId":"504843780538","socketName":"width"}},{"from":{"nodeId":"740793246283","socketName":0},"to":{"nodeId":"504843780538","socketName":"height"}},{"from":{"nodeId":"872840628494","socketName":0},"to":{"nodeId":"514990025154","socketName":"r"}},{"from":{"nodeId":"963664057677","socketName":0},"to":{"nodeId":"514990025154","socketName":"x"}},{"from":{"nodeId":"963664057677","socketName":1},"to":{"nodeId":"514990025154","socketName":"y"}},{"from":{"nodeId":"235743271733","socketName":1},"to":{"nodeId":"846975335022","socketName":0}},{"from":{"nodeId":"186645442335","socketName":1},"to":{"nodeId":"846975335022","socketName":1}},{"from":{"nodeId":"846975335022","socketName":0},"to":{"nodeId":"963664057677","socketName":0}},{"from":{"nodeId":"846975335022","socketName":0},"to":{"nodeId":"124445316994","socketName":0}},{"from":{"nodeId":"514990025154","socketName":0},"to":{"nodeId":"831055740182","socketName":0}},{"from":{"nodeId":"831055740182","socketName":0},"to":{"nodeId":"310875547309","socketName":"element"}},{"from":{"nodeId":"235743271733","socketName":1},"to":{"nodeId":"13109648368","socketName":0}},{"from":{"nodeId":"504843780538","socketName":0},"to":{"nodeId":"235743271733","socketName":0}},{"from":{"nodeId":"235743271733","socketName":0},"to":{"nodeId":"186645442335","socketName":0}},{"from":{"nodeId":"186645442335","socketName":0},"to":{"nodeId":"831055740182","socketName":1}}}},{"name":"unpack","id":"1","position":{"x":537,"y":136},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"slider","id":"2","position":{"x":732,"y":153},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":0},{"name":"slider","id":"3","position":{"x":730,"y":292},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":0}],"edges":{"from":{"nodeId":"1","socketName":0},"to":{"nodeId":"2","socketName":0}},{"from":{"nodeId":"1","socketName":1},"to":{"nodeId":"3","socketName":0}},{"from":{"nodeId":"0","socketName":0},"to":{"nodeId":"1","socketName":0}}}
クリックしたときだけ当たり判定を生やす
https://gyazo.com/ad8c9e7cc75b1d912cd20763b010b809
code:json
{"nodes":[{"name":"circle","id":"0","position":{"x":513,"y":168},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"r"},"osockets":{"type":"output","name":0}},{"name":"render","id":"1","position":{"x":1204,"y":123},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":[]},{"name":"unpack","id":"2","position":{"x":239,"y":179},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"select","id":"3","position":{"x":1023,"y":167},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"g","id":"4","position":{"x":873,"y":166},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":{"type":"output","name":0}},{"name":"if","id":"5","position":{"x":810,"y":367},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},"osockets":{"type":"output","name":0}},{"name":"press","id":"6","position":{"x":638,"y":399},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"hold","id":"7","position":{"x":805,"y":517},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"mouse","id":"8","position":{"x":638,"y":569},"isockets":[],"osockets":{"type":"output","name":0}},{"name":"circle","id":"9","position":{"x":507,"y":402},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"r"},"osockets":{"type":"output","name":0}},{"name":"slider","id":"10","position":{"x":192,"y":374},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":71},{"name":"div","id":"11","position":{"x":343,"y":427},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"slider","id":"12","position":{"x":193,"y":503},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":2}],"edges":{"from":{"nodeId":"2","socketName":0},"to":{"nodeId":"0","socketName":"x"}},{"from":{"nodeId":"2","socketName":1},"to":{"nodeId":"0","socketName":"y"}},{"from":{"nodeId":"3","socketName":0},"to":{"nodeId":"1","socketName":2}},{"from":{"nodeId":"4","socketName":0},"to":{"nodeId":"3","socketName":0}},{"from":{"nodeId":"3","socketName":1},"to":{"nodeId":"5","socketName":0}},{"from":{"nodeId":"6","socketName":0},"to":{"nodeId":"5","socketName":1}},{"from":{"nodeId":"6","socketName":1},"to":{"nodeId":"7","socketName":0}},{"from":{"nodeId":"7","socketName":0},"to":{"nodeId":"2","socketName":0}},{"from":{"nodeId":"8","socketName":0},"to":{"nodeId":"7","socketName":1}},{"from":{"nodeId":"0","socketName":0},"to":{"nodeId":"4","socketName":1}},{"from":{"nodeId":"5","socketName":0},"to":{"nodeId":"4","socketName":2}},{"from":{"nodeId":"2","socketName":0},"to":{"nodeId":"9","socketName":"x"}},{"from":{"nodeId":"2","socketName":1},"to":{"nodeId":"9","socketName":"y"}},{"from":{"nodeId":"10","socketName":0},"to":{"nodeId":"11","socketName":0}},{"from":{"nodeId":"12","socketName":0},"to":{"nodeId":"11","socketName":1}},{"from":{"nodeId":"11","socketName":0},"to":{"nodeId":"9","socketName":"r"}},{"from":{"nodeId":"10","socketName":0},"to":{"nodeId":"0","socketName":"r"}},{"from":{"nodeId":"9","socketName":0},"to":{"nodeId":"6","socketName":0}}}
二点からrectを作る
https://gyazo.com/2a49377bb99a9b38333bad9fceae5394
ついでに要素の選択もやってる
code:json
{"nodes":[{"name":"subGraph","id":"0","position":{"x":407.57142857142856,"y":165.57142857142856},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1},"data":{"nodes":[{"name":"circle","id":"224333267049","position":{"x":723,"y":267},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},"osockets":{"type":"output","name":0}},{"name":"press","id":"626464038996","position":{"x":905,"y":272},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"unpack","id":"981242344716","position":{"x":545,"y":271},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"hold","id":"840398734568","position":{"x":907,"y":498},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"mouse","id":"680638373903","position":{"x":685,"y":519},"isockets":[],"osockets":{"type":"output","name":0}},{"name":"outlet","id":"94895288961","position":{"x":1109,"y":269},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"slider","id":"142033406608","position":{"x":497,"y":414},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":19},{"name":"inlet","id":"287300964766","position":{"x":298,"y":355},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"188372643686","position":{"x":1162,"y":467},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"981242344716","socketName":0},"to":{"nodeId":"224333267049","socketName":0}},{"from":{"nodeId":"981242344716","socketName":1},"to":{"nodeId":"224333267049","socketName":1}},{"from":{"nodeId":"626464038996","socketName":1},"to":{"nodeId":"840398734568","socketName":0}},{"from":{"nodeId":"680638373903","socketName":0},"to":{"nodeId":"840398734568","socketName":1}},{"from":{"nodeId":"840398734568","socketName":0},"to":{"nodeId":"981242344716","socketName":0}},{"from":{"nodeId":"626464038996","socketName":0},"to":{"nodeId":"94895288961","socketName":0}},{"from":{"nodeId":"287300964766","socketName":0},"to":{"nodeId":"224333267049","socketName":2}},{"from":{"nodeId":"224333267049","socketName":0},"to":{"nodeId":"626464038996","socketName":0}},{"from":{"nodeId":"840398734568","socketName":0},"to":{"nodeId":"188372643686","socketName":0}}}},{"name":"render","id":"1","position":{"x":1218,"y":130},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":[]},{"name":"slider","id":"2","position":{"x":212,"y":162},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":19},{"name":"subGraph","id":"3","position":{"x":409.57142857142856,"y":252.57142857142856},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1},"data":{"nodes":[{"name":"circle","id":"224333267049","position":{"x":723,"y":267},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},"osockets":{"type":"output","name":0}},{"name":"press","id":"626464038996","position":{"x":905,"y":272},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"unpack","id":"981242344716","position":{"x":545,"y":271},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"hold","id":"840398734568","position":{"x":907,"y":498},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"mouse","id":"680638373903","position":{"x":685,"y":519},"isockets":[],"osockets":{"type":"output","name":0}},{"name":"outlet","id":"94895288961","position":{"x":1109,"y":269},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"slider","id":"142033406608","position":{"x":497,"y":414},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":19},{"name":"inlet","id":"287300964766","position":{"x":298,"y":355},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"188372643686","position":{"x":1162,"y":467},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"981242344716","socketName":0},"to":{"nodeId":"224333267049","socketName":0}},{"from":{"nodeId":"981242344716","socketName":1},"to":{"nodeId":"224333267049","socketName":1}},{"from":{"nodeId":"626464038996","socketName":1},"to":{"nodeId":"840398734568","socketName":0}},{"from":{"nodeId":"680638373903","socketName":0},"to":{"nodeId":"840398734568","socketName":1}},{"from":{"nodeId":"840398734568","socketName":0},"to":{"nodeId":"981242344716","socketName":0}},{"from":{"nodeId":"626464038996","socketName":0},"to":{"nodeId":"94895288961","socketName":0}},{"from":{"nodeId":"287300964766","socketName":0},"to":{"nodeId":"224333267049","socketName":2}},{"from":{"nodeId":"224333267049","socketName":0},"to":{"nodeId":"626464038996","socketName":0}},{"from":{"nodeId":"840398734568","socketName":0},"to":{"nodeId":"188372643686","socketName":0}}}},{"name":"subGraph","id":"4","position":{"x":652.7777777777778,"y":333.44444444444446},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0},"data":{"nodes":[{"name":"rect","id":"912539008222","position":{"x":896,"y":254},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},"osockets":{"type":"output","name":0}},{"name":"min","id":"639377077281","position":{"x":585,"y":207},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"unpack","id":"574553113968","position":{"x":302,"y":218},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"unpack","id":"462356719608","position":{"x":315,"y":320},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"min","id":"130150767088","position":{"x":595,"y":285},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"sub","id":"606844401144","position":{"x":558,"y":397},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"abs","id":"635260235830","position":{"x":745,"y":404},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"sub","id":"638086152560","position":{"x":567,"y":495},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"abs","id":"597574424470","position":{"x":754,"y":502},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"721604527483","position":{"x":44,"y":214},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"368017732383","position":{"x":67,"y":382},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"367490258356","position":{"x":1172,"y":269},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"574553113968","socketName":0},"to":{"nodeId":"639377077281","socketName":0}},{"from":{"nodeId":"462356719608","socketName":0},"to":{"nodeId":"639377077281","socketName":1}},{"from":{"nodeId":"574553113968","socketName":1},"to":{"nodeId":"130150767088","socketName":0}},{"from":{"nodeId":"462356719608","socketName":1},"to":{"nodeId":"130150767088","socketName":1}},{"from":{"nodeId":"639377077281","socketName":0},"to":{"nodeId":"912539008222","socketName":0}},{"from":{"nodeId":"130150767088","socketName":0},"to":{"nodeId":"912539008222","socketName":1}},{"from":{"nodeId":"574553113968","socketName":0},"to":{"nodeId":"606844401144","socketName":0}},{"from":{"nodeId":"462356719608","socketName":0},"to":{"nodeId":"606844401144","socketName":1}},{"from":{"nodeId":"606844401144","socketName":0},"to":{"nodeId":"635260235830","socketName":0}},{"from":{"nodeId":"635260235830","socketName":0},"to":{"nodeId":"912539008222","socketName":2}},{"from":{"nodeId":"638086152560","socketName":0},"to":{"nodeId":"597574424470","socketName":0}},{"from":{"nodeId":"574553113968","socketName":1},"to":{"nodeId":"638086152560","socketName":0}},{"from":{"nodeId":"462356719608","socketName":1},"to":{"nodeId":"638086152560","socketName":1}},{"from":{"nodeId":"597574424470","socketName":0},"to":{"nodeId":"912539008222","socketName":3}},{"from":{"nodeId":"721604527483","socketName":0},"to":{"nodeId":"574553113968","socketName":0}},{"from":{"nodeId":"368017732383","socketName":0},"to":{"nodeId":"462356719608","socketName":0}},{"from":{"nodeId":"912539008222","socketName":0},"to":{"nodeId":"367490258356","socketName":0}}}},{"name":"g","id":"5","position":{"x":665,"y":135},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":{"type":"output","name":0}},{"name":"subGraph","id":"6","position":{"x":976,"y":147.75},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},"osockets":{"type":"output","name":0},{"type":"output","name":1},"data":{"nodes":[{"name":"select","id":"594591832303","position":{"x":666,"y":104},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"if","id":"724784007467","position":{"x":333,"y":191},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},"osockets":{"type":"output","name":0}},{"name":"g","id":"433759368356","position":{"x":513,"y":110},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":{"type":"output","name":0}},{"name":"button","id":"184555527635","position":{"x":672,"y":321},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"522454592185","position":{"x":59,"y":129},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"870973402854","position":{"x":848,"y":96},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"617182347326","position":{"x":70,"y":240},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"or","id":"845589114118","position":{"x":537,"y":326},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"584916211770","position":{"x":395,"y":397},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"254979939545","position":{"x":887,"y":332},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"724784007467","socketName":0},"to":{"nodeId":"433759368356","socketName":1}},{"from":{"nodeId":"433759368356","socketName":0},"to":{"nodeId":"594591832303","socketName":0}},{"from":{"nodeId":"184555527635","socketName":0},"to":{"nodeId":"724784007467","socketName":0}},{"from":{"nodeId":"594591832303","socketName":0},"to":{"nodeId":"870973402854","socketName":0}},{"from":{"nodeId":"522454592185","socketName":0},"to":{"nodeId":"433759368356","socketName":0}},{"from":{"nodeId":"617182347326","socketName":0},"to":{"nodeId":"724784007467","socketName":1}},{"from":{"nodeId":"594591832303","socketName":1},"to":{"nodeId":"845589114118","socketName":0}},{"from":{"nodeId":"845589114118","socketName":0},"to":{"nodeId":"184555527635","socketName":0}},{"from":{"nodeId":"584916211770","socketName":0},"to":{"nodeId":"845589114118","socketName":1}},{"from":{"nodeId":"184555527635","socketName":0},"to":{"nodeId":"254979939545","socketName":0}}}},{"name":"button","id":"7","position":{"x":896,"y":313},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"button","id":"8","position":{"x":1088,"y":299},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"2","socketName":0},"to":{"nodeId":"0","socketName":0}},{"from":{"nodeId":"2","socketName":0},"to":{"nodeId":"3","socketName":0}},{"from":{"nodeId":"0","socketName":1},"to":{"nodeId":"4","socketName":0}},{"from":{"nodeId":"3","socketName":1},"to":{"nodeId":"4","socketName":1}},{"from":{"nodeId":"0","socketName":0},"to":{"nodeId":"5","socketName":0}},{"from":{"nodeId":"3","socketName":0},"to":{"nodeId":"5","socketName":1}},{"from":{"nodeId":"4","socketName":0},"to":{"nodeId":"6","socketName":0}},{"from":{"nodeId":"5","socketName":0},"to":{"nodeId":"6","socketName":1}},{"from":{"nodeId":"6","socketName":0},"to":{"nodeId":"1","socketName":0}},{"from":{"nodeId":"7","socketName":0},"to":{"nodeId":"6","socketName":2}},{"from":{"nodeId":"6","socketName":1},"to":{"nodeId":"8","socketName":0}}}
円運動
https://gyazo.com/131923fbcbc2f3d2c743ec2d527424de
code:json
{"nodes":[{"name":"add vec2","id":"0","position":{"x":533,"y":326},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"render","id":"1","position":{"x":958,"y":310},"isockets":{"type":"input","name":0},{"type":"input","name":1},{"type":"input","name":2},{"type":"input","name":3},{"type":"input","name":4},"osockets":[]},{"name":"circle","id":"2","position":{"x":809,"y":313},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"r"},"osockets":{"type":"output","name":0}},{"name":"unpack","id":"3","position":{"x":683,"y":318},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"subGraph","id":"4","position":{"x":339.57142857142856,"y":581.5714285714286},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1},"data":{"nodes":[{"name":"circle","id":"96757230","position":{"x":322,"y":75},"isockets":{"type":"input","name":"x"},{"type":"input","name":"y"},{"type":"input","name":"r"},"osockets":{"type":"output","name":0}},{"name":"press","id":"85921847561","position":{"x":461,"y":75},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"unpack","id":"163421420462","position":{"x":183,"y":75},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},{"type":"output","name":1}},{"name":"hold","id":"118371741101","position":{"x":463,"y":164},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"mouse","id":"89625016512","position":{"x":321,"y":192},"isockets":[],"osockets":{"type":"output","name":0}},{"name":"inlet","id":"300140770345","position":{"x":60,"y":156},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"225659774564","position":{"x":609,"y":72},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"576582062305","position":{"x":647,"y":182},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"96757230","socketName":0},"to":{"nodeId":"85921847561","socketName":0}},{"from":{"nodeId":"85921847561","socketName":1},"to":{"nodeId":"118371741101","socketName":0}},{"from":{"nodeId":"89625016512","socketName":0},"to":{"nodeId":"118371741101","socketName":1}},{"from":{"nodeId":"118371741101","socketName":0},"to":{"nodeId":"163421420462","socketName":0}},{"from":{"nodeId":"85921847561","socketName":0},"to":{"nodeId":"225659774564","socketName":0}},{"from":{"nodeId":"163421420462","socketName":0},"to":{"nodeId":"96757230","socketName":"x"}},{"from":{"nodeId":"163421420462","socketName":1},"to":{"nodeId":"96757230","socketName":"y"}},{"from":{"nodeId":"300140770345","socketName":0},"to":{"nodeId":"96757230","socketName":"r"}},{"from":{"nodeId":"118371741101","socketName":0},"to":{"nodeId":"576582062305","socketName":0}}}},{"name":"slider","id":"5","position":{"x":225,"y":597},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":21},{"name":"subGraph","id":"6","position":{"x":308.55555555555554,"y":328.1111111111111},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0},"data":{"nodes":[{"name":"sin","id":"804673415809","position":{"x":318,"y":254},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"cos","id":"67670753426","position":{"x":311,"y":346},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"mul","id":"162201717868","position":{"x":572,"y":224},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"mul","id":"903316006027","position":{"x":570,"y":355},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"slider","id":"508855974763","position":{"x":450,"y":302},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":68},{"name":"pack","id":"354156643068","position":{"x":743,"y":258},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}},{"name":"outlet","id":"130340096402","position":{"x":960,"y":249},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"553382392211","position":{"x":151,"y":297},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}},{"name":"inlet","id":"412533613584","position":{"x":86,"y":496},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"67670753426","socketName":0},"to":{"nodeId":"903316006027","socketName":1}},{"from":{"nodeId":"804673415809","socketName":0},"to":{"nodeId":"162201717868","socketName":0}},{"from":{"nodeId":"508855974763","socketName":0},"to":{"nodeId":"162201717868","socketName":1}},{"from":{"nodeId":"508855974763","socketName":0},"to":{"nodeId":"903316006027","socketName":0}},{"from":{"nodeId":"162201717868","socketName":0},"to":{"nodeId":"354156643068","socketName":0}},{"from":{"nodeId":"903316006027","socketName":0},"to":{"nodeId":"354156643068","socketName":1}},{"from":{"nodeId":"354156643068","socketName":0},"to":{"nodeId":"130340096402","socketName":0}},{"from":{"nodeId":"412533613584","socketName":0},"to":{"nodeId":"508855974763","socketName":0}},{"from":{"nodeId":"553382392211","socketName":0},"to":{"nodeId":"804673415809","socketName":0}},{"from":{"nodeId":"553382392211","socketName":0},"to":{"nodeId":"67670753426","socketName":0}}}},{"name":"slider","id":"7","position":{"x":27,"y":378},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":30},{"name":"slider","id":"8","position":{"x":202,"y":468},"isockets":{"type":"input","name":0},"osockets":{"type":"output","name":0},"data":96},{"name":"elapsed","id":"9","position":{"x":27,"y":303},"isockets":[],"osockets":{"type":"output","name":0}},{"name":"div","id":"10","position":{"x":161,"y":308},"isockets":{"type":"input","name":0},{"type":"input","name":1},"osockets":{"type":"output","name":0}}],"edges":{"from":{"nodeId":"3","socketName":0},"to":{"nodeId":"2","socketName":"x"}},{"from":{"nodeId":"3","socketName":1},"to":{"nodeId":"2","socketName":"y"}},{"from":{"nodeId":"0","socketName":0},"to":{"nodeId":"3","socketName":0}},{"from":{"nodeId":"2","socketName":0},"to":{"nodeId":"1","socketName":1}},{"from":{"nodeId":"5","socketName":0},"to":{"nodeId":"4","socketName":0}},{"from":{"nodeId":"4","socketName":0},"to":{"nodeId":"1","socketName":2}},{"from":{"nodeId":"4","socketName":1},"to":{"nodeId":"0","socketName":1}},{"from":{"nodeId":"6","socketName":0},"to":{"nodeId":"0","socketName":0}},{"from":{"nodeId":"9","socketName":0},"to":{"nodeId":"10","socketName":0}},{"from":{"nodeId":"7","socketName":0},"to":{"nodeId":"10","socketName":1}},{"from":{"nodeId":"10","socketName":0},"to":{"nodeId":"6","socketName":0}},{"from":{"nodeId":"8","socketName":0},"to":{"nodeId":"6","socketName":1}}}