Graphite

Inspiration

I wanted to build something similar to Unity's Shader Graph or Blender's Node Editor -- I think graph-based interfaces are very interesting while also being very aesthetically pleasing.

How I built it

I wrote the entire thing in TypeScript, using two.js to handle the nodes and pure HTML to handle the component drawer; I like working with pure HTML when I can, as it tends to be significantly more accessible to people using screen readers or similar technology while also requiring less programming overhead (even if it is occasionally more cumbersome).

Challenges we ran into

Writing UI code is probably the bane of my existence. It sucked up a big chunk of programming time I could have spent on functionality.

Accomplishments that we're proud of

I'm very proud of how I managed my type system for describing how the nodes interact with one another -- there's a lot going on under the hood, and orchestrating all the moving parts in such a way that they interact seamlessly was a huge challenge that I'm glad I managed to pull off.

What we learned

Writing code to draw a clean curve between two points is likely more challenging than any P=NP? problem.

What's next for Graphite

I'd like to add more functions and functionality -- things like trigonometric functions and variables, and even some kind of visual or more interesting output would really demonstrate the potential of this idea.

Built With

• two.js
• typescript
• webpack