Nodes.io – A new way to create with code | Hacker News Reader

Nodes.io – A new way to create with code

nodes.io

365 pointstriptych92 comments

Been following the creators for awhile and very much happy to see them democratizing their difficult skillset.

Most designers -- think anyone using figma -- are effectively locked out of modern interactive and animated visuals due to not knowing hardcore shaders + effective js coding. To get a feel for how hard that is, look at the public timeline of Shirley Wu, another wonderful award-winning designer and experienced js coder, to pick this kind of stuff up. Nodes makes it a lot more accessible, similar to Max/msp for musicians. Once you look beyond the over-claiming, which is clearly nails-on-chalkboard for most engineers and scientists as you are seeing in the comments -- this is a wonderful and enabling project.

Extra impressive is they do not seem to try to 'dumb it down'. They are a consultancy and (seem to) try to use it for their own bespoke advanced installations. I don't know how well this will translate to others, but the success of Max msp and super collider make me optimistic that it can grow to those levels. Cycling 74 supports 20+ employees and empowers many musicians, and as Nodes can be used for commercial art (web+tv ads, music videos, landing pages, ...), I can see them being even bigger.

> look at the public timeline of Shirley Wu,

Do you have a link to this?

https://twitter.com/sxywu/media?ref_src=twsrc%5Egoogle%7Ctwc...

Being coders ourselves we focused on a programmer-first approach indeed. The idea came naturally from a gap we identified in our day-to-day practice at Variable.io (data-art, installations, generative systems, ...). It enables some collaboration with designers (through exposing some parameters of the UI) but still focus on the coding experience to bring our projects to life.

Looks like a new assembly of old ideas that’s different enough it might do better for some purposes. Very exciting.

I was about to start prototyping some tool ideas I had in it, but I can’t find it’s source or license info anywhere. By Googling, I found the GitHub repo [0], but it’s empty of code and looks to be used for issue tracking only.

I can’t see something that’s trying to be an ecosystem being very successful without being open (see: every closed-source language/runtime ever).

I couldn’t even find any example code. I tried clicking the examples on the home page. I even tried clicking “Playground” and it wasn’t a link. The only CTA I could find was “Download Nodes”!

[0] https://github.com/nodes-io/nodes-io

Wow, somehow looks similar to another site that I discovered few weeks ago: https://cables.gl/

I googled and found this: https://nodes.io/story/#background

> When we set off to create a tool of our own, there were already plenty of different node-based or visual scripting/programming tools and environments; VVVV, Houdini, TouchDesigner, Cables.gl, Vizor Patches, Lichen, MaxMSP, UE4 Blueprints and Origami were among the most popular.

Unpopular idea here (from a hobbyist programmer).

I would "kill" for a text editor/IDE/REPL shaped as a spreadsheet where each cell is a block of code with 2 possible views (text or result) linkable to other cells. This "spreadsheet" would be programming language agnostic (each cell could use a different language) and I could organize/format my cells (location, colors, size, etc) as I wish.

I am very curious about this idea of yours.

Do you have a draft drawing of the concept or could you otherwise elaborate a bit more?

As an anecdote I used to use a spreadsheet to visually "assemble"[0] HTML code for a niche blog. Some cells would compute values to be used in other cells that would compose the final HTML code. Of course existent spreadsheets are way too rudimentary to use as an "Excel Code": cells don't act as a REPL for the language of your choice nor allow a "text view" with syntax highlighting.

[0] Maybe because I have a background in Architecture, I tend to look at code as I would look at a house plan.

Sounds like microservices taken to the atomic level.

I suspect Emacs could be convinced to do this. Right now there's the Simple Emacs Spreadsheet which uses elisp as a formula language and has a grid view, but I can't imagine shelling out to alternative interpreters would be beyond the wit of man.

This is actually a great idea. I had a conversation over beers with some people in a higher intellectual realm who were discussing the details of flow-based languages. It was the general consensus among them that in the future, flow-based programming will be the way everyone learns structural thinking, and we will look back on sequential instruction programming the same way we look back on punch cards today.

this seems obviously true. but why has it failed for like 40 years so far? many attempts have been made. for some reason all tools seem to fail, no matter how simple, they cause more problems than they're worth.

I think an interface providing proper abstraction hasn’t been properly built yet. Imagine every API call to Amazon was a block in a flow based system- some of those endpoints have hundreds of options and multiple accepted input formats, so designing an abstraction layer that doesn’t add more complexity than it takes away is a difficult problem to solve.

We tend to design API calls over the net as stateless. It's more efficient to implement in a server and prevents abuse (keeping client states on servers for unknown amount of time lead to DoS attacks).

A flow based system would require more flow on the other (server) side. Imagine each sentence to be a request in the following, and how many avenues of potential service abuse it could bring. That's why we avoid designs like this today.

Here lets's begin a new (cloud?) server definition. Inside this server definition let's begin network specification. Inside this network specification let's begin open ports specification. Here, there's a batch of ports we computed we need. Here, there's another batch of ports we need. End network specification. [...] Let's get back to that port spec, because of something emergent. [...]

Thanks for this perspective, I think from my naive standpoint I would build a flow-based system at the application layer and simply code generate/translate to standard networking calls.

However even with such a paradigm I could see plenty of potential for abuse, even unwittingly - while sequential programming forces you to try-catch, flow based programmers may end up connecting the “error flow” back to the original flow that caused the error, creating an infinite loop that would be much harder to debug.

Ellx.io is doing this at the moment afaik

Ellx.io seems promising, I'll toy with it a bit, thanks! Unsurmountable objections:

- not language agnostic (JS only, AFAIK).

- lack of native desktop app to keep it fast.

- not spreadsheet view only. I would then hide/collapse syntax highlighted code inside of cells as I wish.

Yes! This concept aligns with MWeststrate's ideas about reactivity / observables, implemented in MobX

https://mobx.js.org/README.html

Replit has touched on this idea, @tylerangert on twitter

That's an idea that seems to be forming in the heads of a lot of people. I started working on something like that a couple of months ago. Blender is adding spreadsheet now. Excel is getting a more advanced language. ...

Check out this early prototype of eve mentioned here: https://youtu.be/5V1ynVyud4M?t=279

Not language agnostic, but table based.

(eve went in to a different direction afterwards though)

I'm so confused.

"Build interactive web apps"

"Create bespoke tools"

Any examples besides weird shapes?

Maybe weird shapes is the future of web? Forget about JS and React. This is future old man.

CSS regions back from the dead?

That is already here, since 2003, provided there is enough budget,

https://www.outsystems.com/

Maybe it's for creating NFTs? Every one I've seen so far is hideous yet "priceless".

Like the old saying: During a gold rush, sell shovels.

This isn't necessarily made for building enterprise web apps or social media sites.

There always seems to be a complete absence of appreciation for value to artists on HN. This is very clearly a creative tool first and foremost.

Almost all 3D softwares have ways to write shaders with node based programming. If that is how this is being posed, there is nothing special to this.

Not with web tech. I could argue there are numerous systems available to program vsts and other audio plugins visually, but maxMSP still adds something unique and useful.

I think it has other uses, being able to attach visualizations to data processing code is very helpful especially if it's simple to just drop in something like a histogram. It would be even nicer to have a way to scrub through the processed items and see them displayed in an easy to read format on the screen as you do so. Cypress allows this to a degree by recording the visual state of a page as tests are run and lets you hover over the output and see the layout change as you scroll up and down.

I somehow fail to understand what this is, but am impressed by it nonetheless. Is this purely for animation designers with coding skills? I thought animation work is done in editors with even less code required usually, but for me as a developer this seems more approachable.

I could not look at the advanced examples on my iPad though.

At least at a glance I think you’ve got this right. And I think it’s the same kind of productivity boost that came with graphics tools getting JSX/etc bridges. You can design and dev in the same environment with minimal handoff, far fewer broken expectations when they render differently due to different presentation metrics, and tons of opportunity to automate the design-build process and visual documentation.

We're more geared towards programmers as you define what each node does in their code but you can choose to expose selected node parameters when exporting, for a designer/animator to potentially tweak.

Sorry about the advanced examples, some use WebGL and might have issues on iPad Safari that we'll need to check.

I used Chrome FYI

Thanks for the answer

looks cool guys! I'm working on something similar (won't be so vulgar as to self-promote on your post though) - it's exciting to see more people exploring this space. I think there's a lot of potential in visual programming going forwards; I know it's been explored before but it feels like smart phones pre-iPhone: lots of entries but no-one has captured the essence of it into a compelling product yet (outside of specialist but great tools like Houdini and UE Blueprints).

Have you shared this with the Future of Coding community (https://futureofcoding.org/)? They're very excited by these kinds of tools.

A few of the Nodes devs are in the FoC community, yep!

This is really great,loving the whole code catalog and podcast.

Codeflow looks interesting, but is mislisted as open source in the catalog[1] although private on github, and there’s a new sign up for beta option on their page - I believe it’s no longer open source

[1] https://futureofcoding.org/catalog/codeflow.html

[2] https://github.com/codeflowlang

Hi all, Damien here, one of Nodes creators. We tried to bring our own take in the visual programming space. We're still in beta and figuring out how people are using Nodes. Happy to answer any question you might have, AMA.

For completeness, here https://github.com/ivanreese/visual-programming-codex is a pretty comprehensive list of different takes on visual/flow based programming through the ages…

>What if programming was about ideas, not semicolons?

This is like saying "What if writing was about ideas, not periods?" It already is.

Yeah are they trying to sell python?

I love this. We need to get out of the usual representations of data and get ‘out there’ a little more. Who said art and science couldn’t coalesce? Nothing wrong with a bit of wackiness. Will be following this closely.

Nodes.io is looking great!

*For other HN readers: If you're going to leave a message, can you ask yourself, if it's really worth to be so negative? *

I very seldom share anything of my own here for this reason. It’s cool to have high expectations but it’s really a shame how much people just dump on everything without any consideration for the intent or level of effort that went into something.

It’s disheartening. I have a project I’ve just launched that I’m incredibly proud of, with all the warts a just launched thing might have, and I’ve barely mentioned it here and certainly won’t Show HN because I would be heartbroken to see it trashed by a bunch of strangers.

I think the negative comments are inversely proportional to the language used to hype the product or project. If you make an app that points out carcinogens in the user's grocery list, and explain that your project's mission is curing cancer then people are going to have a lot of negative things to say about how this approach will never do that, etc. Conversely, if you describe it tightly as what it is there will be less room for people to have negative takes and more for people to appreciate the project for what it is.

I encourage you to share your project. Negative comments, even if they happen, won't diminish your accomplishments.

Why are negative comments bad? I wouldn’t mind at all. Rudeness is not acceptable but people poking holes at your project is a good thing. People poked holes at Dropbox back in the day. Just take negative comments, grow a thick skin and move on. Please don’t hesitate one iota, would love to see your work.

The thing is, HN is a pretty safe place to test and get early feedback. Are the comments tell you it sucks? Hey, they cared enough to say it sucks, so incorporate their feedback and try again.

Most people who are negative here have high expectations or are clueless. Ignore if they are the latter kind!

I agree totally. And, as a one-man-band indie developer who is totally dependent on sales of my software to make a living, the pain of low sales is much greater than the pain of any criticsm. Also a lot of the comments have been incredibly useful, even if they were a bit painful.

Trying selling software commercially online for a few years. Your skin will soon thicken up a bit. ;0)

Remember https://noflojs.org ?

Whenever I see things like this I tend to think back to this:

> Largely I think that text is already a highly-structured graphical notation, and that when people try to get "away" from it they're often doing so from a position of ignorance of how very long it took to get to where we are in textual notations, and how very many technical innovations are latent in textual notations. Visually unambiguous yet uniform symbol sets, combinatorial-positional word formation, linear spatio-temporal segregation, punctuation and structured page layout .. these are all technologies in writing that we had to laboriously invent, and they have purposes, advantages! Similarly in coding, we had to invent and adapt technologies from verbal and mathematical notations refined over millennia: lines and columns, indentation, block layout, juxtaposition and precedence, scope, evaluation order, comments, grammars, version control, diff and merge algorithms ... the pile of structuring technologies embedded in the textual representation of programs isn't free, and it isn't useless. So I'm just really cautious when people suggest throwing it all out for some hypothetical reinvention. You need those structures: so you've got an immediate problem of "what are you going to use instead", and a longer-term question of "what makes you think you're not going to wind up right back at the same place ten thousand years of refining graphemes-on-a-page wound up"?

(Taken from https://graydon2.dreamwidth.org)

I agree with some of the other posters who are saying that that it is difficult to figure out what this does or who it is for.

There's a huge headline saying "nodes for everyone". So, it's for my grandmother and my son and my uncle too?

Looking at the examples I see that there's a lot of cool looking geometry and special effects. So maybe "nodes is for everyone who wants to make cool visual things?"

Is it for artists who don't want to have do deal with code? Is it for coders who want their code to be more modular?

The best way I can understand this is maybe it's a competitor to something like Houdini, for people who are working at the intersection of art and code, it's like a procedural generation tool for art.

I thought it might be something which lets you build cool stuff without much code, but I was disappointed in the lack of modularity of some of the examples -- e.g. the "basic webGL" example in the playground. In that example almost everything interesting is going on in the one shader node.

Similarly with the boids example, the entire boid simulation is in one node with Javascript. It's not a reusable node.

I think the examples would be a lot more compelling if the nodes were each some trivial piece of functionality than anyone could look at and understand within 30 seconds, but they were put together into impressive creations. Like MIT Scratch for adults.

The problem with these examples is that there's too much complexity baked into a single node, which makes it difficult to understand those as reusable nodes. If I'm understanding it correctly, reusing nodes is the whole idea here.

It's hard to overestimate the impact of this technique, though it is 5-10 years too soon. :)

What this does is lets people reason about change in massively multivariate data sets. Like GPT level multi-variate. I look forward to seeing this applied to the state of ML models, as this is what we're going to need to express the complexity of a lot of techs we will all depend on.

There is a casting pearls before swine problem they will need to overcome, as the level of management understanding to interpret and respond to the changes this framework expresses is going to take some years to get people with that level of technical sophistication into decision making positions.

Near term, my impression is it will be amazing for getting funding for scientists of all kinds, and being used in hyper-competitive data fields like americas cup sailing, F1 racing, and spooky intelligence/social media company social engineering analysis, and I could see it being used in a new hybrid of quant trading funds, as any sufficiently advanced data vis is essentially arbitrage. All very rarefied niches with a high degree of autonomy. It may be too cool for making policy or lower level decisions in the near term, but this is super epic.

When you look at the recent history of how data viz has impacted fields, it has always been way out ahead of the industries it served. I hacked around with 3D "coral" graph viz back around 99-01 (early CAIDA stuff) for internet security analysis in govt, and in spite of its incredible analytic power, the anecdata was it didn't get traction because it was unmanageably powerful. However, I think we're just entering a data viz renaissance, and this is the bar. Amazing.

Looks like a web based TouchDesigner :) (all originating from https://en.wikipedia.org/wiki/Quartz_Composer )

How does it compare? What's new?

Certainly could say somewhere that it's one of these node-based visual programming languages made for artists. Well the node part is in the name at least :).

Tangentially related, I've been thinking about how it is somewhat difficult to describe state machines in regular textual code, and it would be nice to have a drag-and-drop visual interface for mapping out the states and transitions, then tie regular code to the transition events.

Is there anything like that out there? Or a good open source diagramming library that might lend itself to prototyping this?

You might be interested in XState[0] and its visualizer[1]. It is not drag and drop, but it does provide a nice visualization that can help debug state logic. I imagine it’s possible to extend it to support visual manipulation and code generation.

Project is JS/TS-specific, however.

[0] https://github.com/davidkpiano/xstate

[1] https://xstate.js.org/viz/?gist=bbcb4379b36edea0458f597e5eec...

Thanks for sharing!

> It is not drag and drop

> I imagine it’s possible to extend it to support visual manipulation and code generation

It will be soon ;-)

Yakindu comes to mind as one (if you aren't allergic to eclipse :-) )

https://www.itemis.com/en/yakindu/state-machine/

QtCreator has a SCXML based visual editor for state charts https://doc.qt.io/qtcreator/creator-scxml.html

Thank you! This looks very much like it would fit my needs, and I love that the output is an XML file I can integrate with other tools.

After taking a quick look at existing visual scripting tools[0], it seems like the main feature differentiating this from the others is that the nodes are code modules instead of primitives. I think this is where visual programming can really shine, write modules in a text editor and then wire them up in a visual editor. This gives you the high level, conceptual view of the program flow without the excessively verbose visual spaghetti of wiring up individual operations and control flow statements. I think UE4's blueprints can work this way as well, writing a new node in C++ and then wiring it up, but they're not really portable to the wider development ecosystem.

[0] https://github.com/ivanreese/visual-programming-codex/blob/m...

There's really nothing unique or "differentiating" about nodes.io Plenty of other visual scripting environments offer power users the ability to code their own nodes: cables.gl, TouchDesigner, vvvv, Grasshopper, Houdini.....

We tried to stay close to what you would write without it, using npm packages and all that comes with it. TBH, spaghetti cables is kind of inherent to this kind of programming when scaling up but having code modules instead of just primitives is helpful indeed, letting you give the weight you want each node to have. We're also thinking about node groups as another level of abstraction to reduce visual cluttering.

This looks like Node-Red, but with less pre-made nodes, and designed to show stuff, I love the idea. Also, maybe this is a problem with my installation, but I only see one type of block "custom". If I'm supposed to use npm to install any blocks that support anything, this isn't an ideal starting point, too little information on getting started.

Looking at the examples, I'm a bit overwhelmed with how much new boilerplate code I need to remember in order to use all the fancy GUI. I like the idea of having the code be front-and-center, but if you require me to remember how to use the UI elements, why not make some of that code auto-generated based on some UI widget? I like what you have, but it's so minimalist (or brutalist as someone else pointed out) that I find the actual utility of the visual controls... disappointing.

It took 15 years from the first versions of Context Free Art to get to this point of evolution in that kind of experimental proposals. It's interesting anyway, a cool/creative hobby (I think no more than that)

This seems interesting. It would be really cool to rapidly prototype and modify/refactor apps using this.

But it seems to me like the much harder part of this problem is 1) developing the nodes, and 2) ensuring that the nodes have the appropriate (sufficiently flexible/extensible) API for connections.

I guess what I'm saying is that this needs a "standard library" of nodes - at multiple layers of abstraction - if it is to gain traction. This is especially true, given that there are several other projects that are at least functionally equivalent.

I need something like this to let non-programmers create some basic JavaScript scripts/flows in an app I have. Obviously would need to be some level of power user but hopefully doesnt require them to know how to code. Has anyone tried this or any of the related projects and have an opinion or experience on what works best for a “normal” user?

Looks quite interesting, I always had a found spot for visual languages.

The problem with visual spaghetti is the same as with monoliths, lack of understanding how to modularize the code.

I think applying digital circuit design best practices to such tools would help more people to properly modularize their boxes.

Seems cool and very interesting. I don’t have too much to add beyond giving praise due to the sheer number of low-quality replies on this submission. If the people who made this are reading; don’t let an off-day on hn discourage you.

There is a similar project for building web services visually: http://blyss.tech/

Ohhh, this looks like Cycling 74's Max MSP.

Lot of seeming derision in the comments but I LOVE Max and this is an amazing step in that direction for visuals.

Is it (going to be) open source or not?

I love this category of thing, glad to see more of it.

How do projects like this get off the ground / get funding?

I am happy to see there are Linux native alternatives to VVVV emerging.

This looks amazing.

I'm so sick of this ironic brutalist web design. That HTML blue. It's so frequently paired with that gross salmon color.

I'm fine with brutalist web design, what I can't stand is low font-weights and small font sizes, like assuming all of your readers are on a 4K screen with the eyes of a 20 year old.

On a more substantive note, this looks really neat. However, as a data scientist of sorts I've found that what people really want is not some sort of interactive 3D visualization, but a well-computed chart showing a sort of natural experiment (e.g. the results of an A/B test) with the right axes. Has anyone used a 3D visualization outside of tech demos? I guess the NYTimes has some neat stuff that's useful.

It started with Dropbox: https://www.itsnicethat.com/news/dropbox-rebrand-collins-gra...

I’m certain that I saw similar stuff on Bloomberg well before that. But yeah it’s been a thing for a while.

I personally like seeing it because it’s still not as pervasive as a lot of design trends and feels like there’s still some variety on the web. But I pain for anyone struggling with the accessibility of these designs.

Even just directly on white, I find that Blue to be far too powerful. On that salmon, it's horrid.

Combined with the fonts and font sizes, it's rather hard to enjoy the site.

I have not thought about the irony of “HTML blue” before, but I am not a fan of its use, nor that inner-nostril shade of pink (please don’t insult salmon by calling the color that). I love Space Mono/Grotesk and I don't understand why they chose Space Mono as the body type, when it has a lower x-height and lower weight. They were already using Space Grotesk to begin with for headings and else where (albeit sparingly/unpredictably)...strange.

All of this has nothing to do with the software, which looks really interesting and may be quite successful in the future. But it's worth noting and there's nothing wrong with pointing these things out. ralusek's post should not be so grey.

Reply on news.ycombinator.com