Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Prathyush Profile picture
@prathyvsh
Nov 12, 2020 • 76 tweets • 30 min read • Read on X
Design ∩ Code Systems: Curating a thread on a topic I’m really interested in. Tools that blur the line between designing and engineering. Hope you find something inspiring here: patternatlas.com/v0/models-of-i…
Cover design for Design ∩ Code Systems
@bahrami_ Nodebox (@nodebox) is a node based environment for generative data / interactive visualizations:

This people generator is an interesting application of it:

h/t to @tautau_co for reminding me. nodebox.net/node/
nodebox.net/gallery/2014/0…

Screenshot of Nodebox3
Generated graphics
Matt (@mattdesl) is one of my favourite generative artists and he has produced a slew of great art and software products over the years. Here is him testing out a new environment for his canvas-sketch toolkit:
Sketch-n-Sketch by @ravi_chugh, @brianhempel, @jplubin, @NickMCThree, and @MikaelMayer is a direct manipulation programming environment for creating HTML/SVG documents. It is a pleasure to watch them continuously improve the tool for the past 5 years!: ravichugh.github.io/sketch-n-sketc…
Screenshot of Sketch-n-Sketch
Nodes (@nodes_io) by @marcinignac, @dmnsgn, @nicknikolov and their team @variable_io is a visual programming environment for creating generative graphics and web applications: nodes.io
Screenshot of Nodes.io app
vvvv is a node based visual programming environment initially made by @mesounimpressed that allows for rapid prototyping to final production: visualprogramming.net
A great entry in this category is PANE by @qualmist. The choice of going for the dual of data flow paradigm with functions as edges instead of nodes makes it an interesting design ∩ code environment:
@qualmist Cameron Burgess’ (@supercgeek) and Maayan Albert’s (@maayan_albert) Stamper is a pretty cool environment for doing processing visualizations with structured code editors called “stamps”:
Another really cool tool in this space, I got notified of recently while running this thread is Vuo. Hat tip to @Bodys0ulspirit for this one. It is made by people who used to make some kick ass plugins for Quartz Composer:
An intriguing application still in its early phases is Loglo by @avibryant. It uses the spreadsheet paradigm for rendering SVG graphics. Read more about it here: loglo.app



Screenshots of Loglo
Screenshots of Loglo
Screenshots of Loglo
Screenshots of Loglo
@avibryant Ait by @mollerse is a web based concatenative language for creative programming: functional-art.org/2017/ait
Screenshot of Ait
There is much to be said about @toxi’s digital empire called @thing_umbrella which just had a full blown launch: but in this context, let me link to his concatenative language Pointfree, which he uses to build some slick graphics: thi.ng
One of the seminal works in this niche is “Drawing Dynamic Visualizations” by @worrydream:

His note that describes the rationale is also great: vimeo.com/66085662
worrydream.com/DrawingDynamic…
Screenshot of the environment Bret Victor uses in the talk
Apparatus by @mandy3284 is an amazing environment that blurs the line between designing and engineering. This is definitely one of the best takes I have seen on braiding together the power of designing and programming in a single unified environment: aprt.us
Screenshot of Apparatus by Toby Schachman
There are a few apps in this space that ease building web sites using libraries like React.

React Studio by @neontostudio: and Alva @meetalva: are two apps that has caught my eye in this space. reactstudio.com
meetalva.io

Screenshot of React Studio
Screenshot of Alva
Theatre.js by @ariaminaei is a slick Javascript animation library with a GUI to build the animations. It is still in development, but whatever has been put out is sheer 🔥. Check it out here: theatrejs.com
In:verse by @playdo_ is an intriguing experimental environment that maps shader language constructs to poetic vocabulary. Check it out here: inverse.website
@playdo_ Toby Schachman (@mandy3284)’s second tool in this series: Cuttle (@CuttleXYZ) is a pretty intriguing vector editor + programming environment that lets you design parametric designs: cuttle.xyz
Smoothstep by @matthen2 is an awesome animation tool that intertwines a bunch of themes in this thread. There’s some kick ass visualizations made with this tool out there:
@matthen2 One I loved recently is this Julia to Mandelbrot fractal animation by @vi_ne_te:
Kite Compositor (@kitecompositor) is an interesting animation and prototyping environment that exports visuals as code for the mac. Check it out here: kiteapp.co
Screenshot of Kite Composer
g9.js by @biject is a pretty interesting approach for generating automatically interactive graphics. It allows for constraining certain parameters on manipulating the generated graphics. Really worth checking out the tree and dragon curve examples here: omrelli.ug/g9/gallery/
Screenshot of tree example from the gallery page of g9.js
Steve Ruiz (@steveruizok) is building something up this alley. Check out his feed for more awesomeness design/dev stuff:
Interstate by @from_soney, @bradamyers, and Joel Brandt is an interactive environment for expressing UI behaviours using state charts and constraints: dl.acm.org/doi/abs/10.114…
Screenshot of Interstate from the video in the ACM page at 2:10
@from_soney @bradamyers Looks like Azlen is building some cool subjunctive design tool in this niche. Watch his space for updates:
@from_soney @bradamyers Grant makes some of the coolest keyboard driven design tools with a dev-like bent from . Check out his latest: Constraint.Systems
Demystified Dynamic brushes by @jsquare @jingyitweets @joelrbrandt @magrawala and Radomir Mech is an amazing procedural drawing environment where you can parametrize your brushes using code. This leads to some awesome results. Check it out here: hci.stanford.edu/publications/p…
@jsquare @jingyitweets @joelrbrandt @magrawala Interesting live interaction details on this live GUI tool by @disconcision, @neurocy , @dm_0ney, @NickMCThree, @ravi_chugh and Ian Voysey. A lovely step in the direction of making programmable design tools:
@jsquare @jingyitweets @joelrbrandt @magrawala @disconcision @neurocy @dm_0ney @NickMCThree @ravi_chugh Lattice like multi-way tree hierarchies are structures seen rarely in UI design. Though they find frequent use in computational logic. Here is @szymon_k’s prototype thread subjunctively visualizing multiple layers of operations:
@jsquare @jingyitweets @joelrbrandt @magrawala @disconcision @neurocy @dm_0ney @NickMCThree @ravi_chugh @szymon_k Nicky Case has made a pretty neat direct manipulation interface to the LOGO turtle:
Cuttle is easily one of the most promising parametric tools in the design ∩ code space. It is open for public now!
Vogo by Matthias Graf is Papert’s Logo with direct manipulation. It allows for some pretty cool (global) transformations of the drawing commands which lead to some interesting interactions. Check it out here: mgrf.de/vogo/
Scheme Bricks by @nebogeo looks like a fun visual programming environment with a quirky s-expression visualization: pawfal.org/dave/index.cgi…
Screenshot of SchemeBricks in action with cubes floating around. Image from: http://www.pawfal.org/dave/blog/2010/05/scheme-bricks-for-graphics/
@nebogeo The kind of attention being paid to TLDraw by @steveruizok is incredible. You guys need to check it out: tldraw.com
@nebogeo @steveruizok Have tweeted about Smoothstep in this thread before, but it’s worth highlighting again for @matthen2 is putting it to great use for visualizations lately. Check out this 3D Fibonacci fractal made in it:
Cute tool for visually exploring how SVG attributes work by @Wattenberger here:
Something cool worth looking forward to is brewing in this space from @wolkenmachine:
@wolkenmachine Aria Minaei just launched Theatre.js. Check it out for a really nice environment that lets you create rich animations for the web! (HTML/SVG/Three.js):
Grant continues playing with quirky visual production tools. Here’s his latest called Push:
Glad to see an update to @DeepUINews after 4 years long wait! Check out their new direction here:
Step out of the line with this new design tool by Grant:
TLDraw by @steveruizok is finally out! Slick doodling experience with this one and pays such good attention to the interactions:
Papaya by @ApoorvaJ looks like a fun — both aesthetically and functionally —  image editor in the browser with a node based compositing system:

Check it out here:
papaya.io
Adding Circles by @heestand_xyz: a fresh take with a circular node based editor for graphic coding. Check it out: circles.software
@heestand_xyz Love how Amelia is making steady progress on this tool:
@heestand_xyz Paul is improving Natto continuously and how! I think this is turning into a super testbed for some novel interaction ideas for doing computation:
@xlamone Once you get a grasp on how to think about the design, learn a programming language well. Anything from Lisp to Javascript to Lisp will be good here. The idea is to turn your ideas into code swiftly. Use any of the popular books here.
@xlamone One of the reasons I dont suggest any particular language is because the best language for your problem space is one you build after intimate understanding of the tradeoffs involved in the problems of your space.
@xlamone To a good degree, you can see how Ronin and Libfive are their own DSLs for creating graphics. Towards this end, there is a list of intro tutorials here:
@xlamone In parallel to developing skills in constructing DSLs, you would need a way to manage complexity of the project. For this learning how to create a good architecture for the project would become crucial.
@xlamone My experience comes from getting my hand burnt quite a few times, but this resource might be handy as it conveys the global structure in few lines: aosabook.org/en/index.html
Adding Drama, a prototyping tool with its own interesting in-built version history: drama.app
Screenshot of Drama app from: https://www.drama.app/
Check out this video to see Drama (@DramaApp)’s version history in action:

Documentation here:
drama.app/documentation/…
@DramaApp Azlen’s recent typographic experiments belong here. Love how the text is parametrized by time:
@DramaApp Not sure how I missed this one, but I totally dig this arc tool interaction design by @_baku89. This is the kind of innovation graphic design space needs!
@DramaApp @_baku89 Some pretty cool interaction design is being done over @inkandswitch. Makes one reevaluate opinions on the wire and boxes model: inkandswitch.com/crosscut/
Seems like @rikarends and @ejpbruel’s Makepad will have a live GUI editor! Bridging the gap between design and code will be a big leg up!

Design by @sebmichailidis
A cool node based shader creation tool up here:
Love such tools that push the envelope of what is possible in design environments:

A world of such cool interactions remains unexplored in design tools while most design tools are busy recreating the 1970s mould of Bézier/fill/stroke tools.
Definitely got to add TouchType by @schultzschultz_ to this thread. They have been putting up some 🔥 energy in user interactions space recently:
Loominous is a neat weaving pattern maker by @yuinchien. Play with it here: yuinchien.com/loominous/
Think a demo is not available yet, and it was a proof of concept, but adding Playful Palette that nicely brings a playful way to smoosh together color palettes and interactively generate new combinations:
Intriguing tool to explore SVG filters up here:
Natto now has a gallery of cool stuff to browse!
Lovely spreadsheet interaction for exploring latent spaces by @dribnet and @_bryanisms up here: vusd.github.io/spacesheet/
@dribnet @_bryanisms This person is so incredibly creative. I should also add their fractal painter experiments in this thread:
@dribnet @_bryanisms Here is Lu’s fractal maker. Indefinite amount of fun in this fractal pond:
@dribnet @_bryanisms Love the lo-fi sketchy vibe of Inkbase by @inkandswitch and how it enables a lot of cool mini interactive gadgets in it: inkandswitch.com/inkbase/
@dribnet @_bryanisms @inkandswitch Adding Aatish’s PatternCollider to the list:
@dribnet @_bryanisms @inkandswitch Alma by @emilwidlund is a neat node based generative graphics editor for the web: alma.sh
Screenshot from the “Creation” example on the page: https://alma.sh/
@dribnet @_bryanisms @inkandswitch @emilwidlund Really beautiful prototype blurring the distinction between the visual layer and database layer up here:
@dribnet @_bryanisms @inkandswitch @emilwidlund Paul (@_paulshen) keeps making this environment so much fun to use:
@dribnet @_bryanisms @inkandswitch @emilwidlund @_paulshen Bauble by @ianthehenry looks like an amazing environment to do 3D graphs with code:
@dribnet @_bryanisms @inkandswitch @emilwidlund @_paulshen @ianthehenry Another interesting tool inspired from Bret Victor’s Dynamic Visualizations! Mosaic from Jérémy (@jvuillermet):
@dribnet @_bryanisms @inkandswitch @emilwidlund @_paulshen @ianthehenry @jvuillermet Discovered Diagrammar from @pnutus which is being used @brilliantorg for their interactive diagrams:
@dribnet @_bryanisms @inkandswitch @emilwidlund @_paulshen @ianthehenry @jvuillermet @pnutus @brilliantorg Another interesting experiment brewing in this direction:

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Prathyush

Prathyush Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @prathyvsh

Prathyush Profile picture
Feb 16, 2022
TIL that light is an eigenvector of a Lorentz Transformation! I think this means that light plays the role of an invariant when you try to shift between two bases. For example: something like say truth value of an expression when you shift between two logical systems studying it.
I am right now in the middle of researching something else and will have to return to this later, but this page has some real nice pedagogic material on Special Relativity: jila.colorado.edu/~ajsh/sr/sr.ht…
Here is another animation from Wikipedia. Line crossing the vertical axis are sequential events and the line crossing horizontal axis simultaneous ones. The diagonals that remains invariant indicates light. Funny how this shows connections with linear algebra and order theory.
Read 8 tweets
Prathyush Profile picture
Dec 29, 2021
Can’t claim to have even remotely understood this article with the intended precision, but I just loved the exposition of ”Are deep networks just kernel machines?” here: m0nads.wordpress.com/2021/05/09/are… Figure 2. Kernel method fro...Figure 3. Kernel trick from...Figure 4. Weights paths fro...Figure 6. Deep network weig...
Stumbled on this discrete visualization of fundamental theorem of calculus by @PeterSaveliev and thought it was amazing!

There is more of such goodness in his lecture notes: dropbox.com/s/p8hxmgaygbb7… Visualization of fundamenta...
This is a neat video to watch on how Leibniz conceived his version of fundamental theorem of calculus using the harmonic triangle and telescoping sums:
Read 4 tweets
Prathyush Profile picture
Dec 23, 2021
A really cool visualization of Fermat’s Last Theorem by Andrew J. Hanson from 1990! (Part 1/2)

Source: legacy.cs.indiana.edu/~hansona/Ferma…
This is the second part where Fermat surfaces are used to create a different visualization (Part 2/2).

Key takeaway: You can vary the geometric framework in which visualization is conducted to generate distinct forms for the curves.
Also, totally worth exploring is this awesome WebGL environment made by Hanson for exploring Fermat surfaces: cgi.soic.indiana.edu/~hansona/4D/4D… Image showing a Fermat surf...
Read 4 tweets
Prathyush Profile picture
Nov 14, 2021
Matrices can be visualized as functions! This enables us to see matrix multiplication as function composition. In this thread let us take a visual tour of these mathematical ideas. To get this thread as a PDF: patternatlas.com/v0/matrices-as… Cover image with the title ...
I stumbled on this idea as a part of my logical explorations. I saw how the matrix way of representing things has an intertwining between simultaneity and sequentiality which is awesome! Let us start uncovering the ideas here by representing matrices as pixel grids. Matrices as Pixel Grids. Sh...
Let us label the matrix and understand how to represent arbitrary connections. A dark square in the pixel grid means a connection exists between a row element and a column element. A row element can be thought as an input and the corresponding column elements its outputs. Matrix Mappings: Shows a pi...
Read 37 tweets
Prathyush Profile picture
Jan 24, 2021
Catalog of Programming Languages for the Enthusiast: Starting a curation on some of the cool indie / lesser known programming language projects I have been stumbling on.

You can get the full listing here: patternatlas.com/v0/pl/ Cover art of Programming la...
Starting off with Pikelet by @brendanzab. It is a continuous source of inspiration to see Brendan starting from game dev and getting into deep type theory stuff! Check out his language Pikelet: github.com/pikelet-lang/p… and his twitter stream for updates on his work. Logo of Pikelet from the Gi...
@brendanzab Koka is a strongly typed functional-style language with effect types and handlers: koka-lang.github.io/koka/doc/index…

I encountered Koka when researching about algebraic effects. Papers from Daan Leijen on its semantics and technical details are available here: microsoft.com/en-us/research… Screenshot of Koka Language
Read 26 tweets
Prathyush Profile picture
Nov 9, 2020
Awesome ontology map of Mathematics by Daniel Tubbenhauer here: dtubbenhauer.com/Talk-Dublin-20…

After my explorations in the last few years, I arrived at an almost same global partitioning except that I had geometry and topology united and number theory featuring as a prominent circle. Map of mathematics
I found out previously that Category Theory derives from Kant’s work: but looks like Lawvere was attempting to formalize Hegel, who was inspired by Kant’s work!

Have a look at this nLab page to see how deep the rabbit hole runs: ncatlab.org/nlab/show/Scie… Screenshot from nLab
This is in the philosophical realm but use of “relay signs” by artists and mathematicians as sharing the same protogeometry is an interesting take in this article. It draws links between the work of Peirce, Grothendieck, Riemann among others: glass-bead.org/article/multil…
Read 76 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(