ncase / loopy Goto Github PK

i would like to choose node visual size and capacity

• tiny node (for logic gate)
• normal node
• big node
  and why not small and giant node.

And a scale for the capacity :

• 0.0001 : switch from 0 to 1 on each signal like a boolean
• 1 : default like now
• 2 : need 2 time more signal to go from empty to full
• 4 : need 4 time more signal to go from empty to full
• 10 : need 10 time more signal to go from empty to full
• 100 : need 100 time more signal to go from empty to full

zooming out, i.e. via browser isn't supported.
Creating system flows that require more than say, ten nodes (which is the current maximum capacity of the current canvas)

I would like to make monetary system simulation.
For this use-case, in most case i would like to preserve the amount between inbound and outbound.

What about a node behavior where :

1. what enter is stored a little time to aggregate multiple input value
2. the output value is equally divided between each output arrow

so node could have a switch in config with 2 modes :
signal cloning mode (default) || value preservation mode
and a scale [ 0, 0.1, 0.5, 1, 5 ] seconds of retention time to aggregate signal. (or other value in the scale)

Why not adding Markdown like link in Label text ?

I'd like to embed parts of a loop as visualizations into a longer journalistic-academic paper. I'd like to use it as an argumentation map where readers can follow parts of the loop dynamic and jump between paragraphs. The whole loop, though, should only be visible at the very end. Is something like this doable?

This wonderful little tool isn't that accessible from a mobile device. The elements are poorly sized and arranged, making them difficult to use.

At a cursory glance, this should only require CSS changes and a few minor tweaks to JS files for revealing/hiding elements.

it would be great to have at least 2 camera mode :

• free cam (in edit and play mode, you can zoom in and out, and drag/scroll in the scene (like #6) )
• scene cam (in play mode, the camera gently zoom in/out to the visible scene)

and why not a 3rd mode :

• signal cam (in play mode, center on signal(s) and change the zoom to include neighbor nodes)

to support larger model, it would be great if the canvas can be panned and/or zoomed.
This could be an useful example.

https://gist.github.com/dzhang123/2a3a611b3d75a45a3f41

Thanks for this excellent too. A nicely done KISS-Tool with huge impact.

Please add a checkbox for node to set it as "non negative" node and cap the node amount to zero if the value is less than zero. This will reflect real life condition, e.g. Amount of Rabbit can't be negative.

For nodes with negative amount, it would be helpful, if the color of the node would reflect it. E.g. by inversing its color or double / dasshed outlined circle, etc.

Keep up the good work.

I would like to save the loopy as a gif, is that possible?

Really cool what you did here, dude!

I don't see any references to the academic principles of it, but in case if you want to go a bit deeper(or if you just didn't know about it) these diagrams/models loopy does are called SODA maps (Strategic Options Development & Analysis Maps) .

When I was in university we had a very old and cluncky desktop app that did what Loopy does in an old 90s style see here. and it costs a fortune!

It's really cool to see a similar thing with much better visuals!

I would like a new entity type : groups.

With pencil, if a form start in empty area and go arround some nodes, then go back near the start, it could create a group including every node in the area.
A group could have :

• a color
• a name

A node could be in more than one groupe and the color will merge in common area

Is there also a standalone desktop application of loopy capable to run on a Linux-based operating system?

It would be great if an initial model generated by an outside tool could be loaded in Loopy. A user could then manually modify and simulate the initial model through the Loopy UI. Is there some data format in which one could pass an initial model to Loopy?

group features in the edition UI

• behaviors feat in a tab
• visibility/display feat in an other tab

-> to make a delayed relationship draw longer arrows
Yes ! but displaying the time need for a signal to go from the beginning of the arrow to the end could be useful in edit mode to sync some stuff.

Perhaps it could help #12 with more explicit behavior ?

in colorLogic mode, a signal with node color will interact with the node like node options are set.
but if a node recive a signal with an other color, 2 behaviors make sense to me :

• drop the signal
• transmit the signal as is to each arrow allowing it (no storage, no aggregation, no explosion...).

This two case could be a node option in colorLogic mode.

In each feature in the UI, we could add^*doc link or^*help link or^*what? link or ^(O.ô) link to a page with extra explanation about the feat, and especially the feat in current state, and some embed example.

I would like comment to remember extra info in edit mode
but without invade readability in play mode.

To do this, why not on label a scale switch :
Display :
allways || edit mode only

Right now, loopy data are stored in json with a serialize / deserialize process.
I think we can do better to store big system in small url (even without url reducer)

Here is the binary data scheme :

• ThisVersionStartWith0:1bit, to allow evolution starting with 1
• nodeNumber: 16bit (max 65535)
• edgeNumber: 16bit (max 65535)
• labelNumber: 16bit (max 65535)
• globalOptions: 32bit (actually 2 boolean -> 2 bit, soon 5 bool -> 5bit used over 32)
• bitForStringIndex: 5bit (to define how many bit to link to a string max is 31bit index so 2 000 000 000 strings)
• bitByNode: 16bit (to define how many bit by node so the max is 2^16-1 bit)
• bitByEdge: 16bit (to define how many bit by node so the max is 2^16-1 bit)
• bitByLabel: 16bit (to define how many bit by node so the max is 2^16-1 bit)
• for each node:
  • each props with associated bit number depending of the option number or numeric limit
  • a bitForStringIndex bit index number for string.
• for each edge:
  • each props with associated bit number depending of the option number or numeric limit
  • a bitForStringIndex bit index number for string.
• for each label:
  • each props with associated bit number depending of the option number or numeric limit
  • a bitForStringIndex bit index number for string.

this stored in binary then gzipped (or lzma) then b64 for URL
and the string part :
string are dedup and sorted by size ASC then stored in a json array escaped for url.
the index of this array is used in the binary part to target strings.

the parser try to rebuild and allow the json array string to be erroneous/partial, in this case, it add at the end "] or ] and retry parsing. the missing string in index a replaced by ? so the graph can be used with less text but still usable.

What's your feeling about this ?

PS : this change can be done with compatibility for actual json storage by detecting the url scheme post ?char

PS2: embed setting can be stored in globalOptions, same for autoplay if not handled as special node.

Node visibility could be :

• always visible
• always hidden in play mode
• hidden when dead (in play mode)

a hidden node hide all linked edges

why not an option to make functionnal group :
like visual group but with a switch to activate functionnal logic :
in a functional group, some nodes are named input, output or anything else.
if there is more than 1 input node, it should have different colors.
only one node should be named output.
it could be some wiring logic between input nodes, commons nodes and output nodes of the functionnal group, and with outside nodes also.
the name of the functionnal group can be used in other nodes like a prefix.

Nodes prefixed with the name of the functionnal group will act like if there was the group (with near instant internal transmissions).
colored signal will be handled by the same color input (or the only input if only one input it created).

When running the functionnal group, all inside group nodes will perform as instance specific node, and linked outside nodes will act like globals.

functionnal group can be displayed in play and edit mode or can be hided in play mode for lisibility.

Hi! How can we contribute to the translation of this project?
Is there any list for translations? (To know if a translation is done before or not.)

To keep it stupid simple... But also powerful, i'm thinking about adding an advanced mode and move my contrib in it.

How are you about that ?

How i see it :

In the main screen, on edit mode, adding a scale with 2 options :

Loopy mode : 
Simple || Advanced

-Simple: Show only essentials options
-Advanced: Show all options

if simple mode is activated in a project using advanced features, nodes and edges with active advanced features will be shown prepended by the mention :

Advanced feature active :

This is an awesome tool, thank you!

I have a suspicion, that with one addition this could be turing-complete (I don't have proof, just gut feeling). Also, this feature would help people to mirror and demonstrate simple natural networks like prototypical neural networks or simple gene-regulatory networks.

The idea, simply, is to allow nodes to 'decide' whether to pass through, or consume, an arrow. The two most useful 'functions' I can imagine are to simply filter arrows by polarity (e.g., nodes that can consume but not pass-through negative arrows, but pass-through positive arrows), and to pass-through only if the node is fuller than a certain threshold, or less-full than a threshold.

For neurons, for example, you could then mimic threshold-firing behaviour using a pattern like:

(input)--->(threshold 0.9)---(filter(positive))--->(output)
                ^   |
                |   V
(feed-back emits positive *and* negative)

So, when input pushes threshold over fullness 0.9, it starts to pass-through, and the next input triggers a cascade of positive and negative arrows (more negative than positive, though). The positives are allowed through by the filter, and hit output. The negatives pull the neuron back below its threshold, and the cycle begins again.

This is a bit of a big ask, so I'd understand if it's overcomplicated for what loopy's designed to do.

I do feel that these thresholds would improve some of the example simulations, though; for example, in the automation/job scenario, you can use these to model how social unrest only starts to cause political upheaval above a certain threshold, or how tax income only increases until unemployment hits a certain threshold, and then may start to crash as consumer spending halts.

gear or scriptable : Special Nodes and Edges with a textarea to add custom behavior in JS (or other)

It feel more simple to me than functionnal group, but less secure.
I don't know how to make scriptable node or edge really safe :
User can add code in a demo and make it run in other user browser, so it's a XSS / CSRF paradize.
Perhaps browser are secure enouth and this is not a problem, but i'm not sure.

What's your feeling about making scriptable nodes and edges in loopy ?

As a retired usability/accessibility person, I'd be glad to help with any form of usage testing for 2.0.

For some use case (COVID-19 for exemple), i would like an arrow type who, in colorLogic mode convert the target node to it signal color.

I'm thinking about a type system based on color.
In this mode :

• a signal keep the color of the first node that emit it.
• link have 2 color scales, a signal input color filter, and a target color signal converter
• grey link are color agnostic (all signal color/type can go throw them)
• grey link transfer signal as is (the signal input value is preserved)
• colored node change there internal value only with the value of same color signal.
• colored link filter signal to only let pass same color signals
• the value of a signal, in a node that split it between link, will only split it between same color output links.

To preserve actual behavior, it could be a global setting (not node or link dependent) :

Color : only aesthetic
Color : logic significant
Aesthetic || Logic Gates

How could it be be used in VScode?
Has anyone tried?
Could it be an extension similar to the draw.io/mermaid/foam?

Use case:
I'm interested in drawing up quick diagrams in VScode while doing research, writing and thinking, without needed to switch programs, open a browser, work through iterations, save a gif, return to vscode, paste image.

I'd like to be able to use external data from a spreadsheet or text file to set starting conditions, and preferably to use live changes to that data source.

Hi,

First of all: awesome KiSS tool.

I've been tinkering with some system dynamics tools (like insightmaker,mentalmodeler, imodeler).
I noticed that these diagrams contain thresholds (i saw a PR of that? awesome), and delays.

My question: is this easy to implement (is the graph synchronous or async?).

to better visualize nodes' behaviour please add sparklines / charts options.
something similiar to this might suffice.
https://omnipotent.net/jquery.sparkline/#s-about

i've seen in code an auto-play mode, and i add it in the embed ui #20
But i'm thinking about an other way :
A node named autoplay. If exist, when loopy is in embed or switched in play-mode, the auto-play node is hidden but a signal is emitted from this node following it's edges.

I can only hope I'm doing this right....

I'd like to be able to load different images for nodes. (Not that I hate circles!) For the purpose of building policy visualizations, it's be great to, say, have an image for housing, another for healthcare, etc., and have them grow/change color/change fill % or even change to another image, based on the usual dynamics. Think of this as an interactive infographic.

i'm thinking about 2 kind of randomness :

• An arrow type who have 50% chance to transmit input signal, 50% chance to deny it.
• An arrow type who convert signal to any random color (in colorLogic mode)
• An arrow type who convert signal to a random color from 2, or 3 specific colors (in colorLogic mode)

I made a complex system here http://bit.ly/2o2KbM5

If I look at one of the circles as a bucket that gets more and more full, the following features would be useful

1. Have an inc/dec stop at one of the buckets. eg. I have a dec Movement => Muskelprotein But this means it gets used up and should not continue into the cycle
2. Only continue an ouput (inc arrow) when the bucket is full/about to overflow. so the cycle does not continue automatically but only after it reaches a certain point

Hi, I sadly do not know much about css/js/html, however I am slowly starting to learn. I am working on a project with a friend at the minute and we would like to add colours to connections like you can with the nodes. Could you put me in the right direction in what to change to include this? Thanks. Ps really love the app it's so much more intuitive than anything similar.

I was chatting with a friend recently, whether he thought, loopy could work together with Mermaid.

He said that would be possible in general, but requires SVG output.

Is that feasible?

Actually, in play mode, the user can launch +/- signals from any node.

This feature could be disabled by a switch to only allow the user to interact with some nodes.

For those who use Chinese as their native language, if you want to download loopy and use it locally, you can refer to my blog article as below >
loopy本地化 How use loopy locally | 张诗颖的作品积累

auto-detect user lang and switch to it.