├── img ├── cables.gif ├── canvas-sketch.mp4 ├── circles-loop.mov ├── design-code-cover.png ├── dotgrid.jpg ├── engare.jpg ├── framer.png ├── glisp-experiment.jpg ├── glisp.png ├── libfive.gif ├── libfive.jpg ├── libfive.mp4 ├── libfive.webm ├── macaw.jpg ├── nodebox-people-vis.jpg ├── nodebox.png ├── origami.png ├── paperjs-2.gif ├── paperjs.png ├── plotdevice.png ├── protoboard.jpg ├── quartz-composer.png ├── rene.png ├── ronin.jpg ├── shade.jpg └── shade.png └── readme.org /img/cables.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/cables.gif -------------------------------------------------------------------------------- /img/canvas-sketch.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/canvas-sketch.mp4 -------------------------------------------------------------------------------- /img/circles-loop.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/circles-loop.mov -------------------------------------------------------------------------------- /img/design-code-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/design-code-cover.png -------------------------------------------------------------------------------- /img/dotgrid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/dotgrid.jpg -------------------------------------------------------------------------------- /img/engare.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/engare.jpg -------------------------------------------------------------------------------- /img/framer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/framer.png -------------------------------------------------------------------------------- /img/glisp-experiment.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/glisp-experiment.jpg -------------------------------------------------------------------------------- /img/glisp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/glisp.png -------------------------------------------------------------------------------- /img/libfive.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/libfive.gif -------------------------------------------------------------------------------- /img/libfive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/libfive.jpg -------------------------------------------------------------------------------- /img/libfive.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/libfive.mp4 -------------------------------------------------------------------------------- /img/libfive.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/libfive.webm -------------------------------------------------------------------------------- /img/macaw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/macaw.jpg -------------------------------------------------------------------------------- /img/nodebox-people-vis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/nodebox-people-vis.jpg -------------------------------------------------------------------------------- /img/nodebox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/nodebox.png -------------------------------------------------------------------------------- /img/origami.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/origami.png -------------------------------------------------------------------------------- /img/paperjs-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/paperjs-2.gif -------------------------------------------------------------------------------- /img/paperjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/paperjs.png -------------------------------------------------------------------------------- /img/plotdevice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/plotdevice.png -------------------------------------------------------------------------------- /img/protoboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/protoboard.jpg -------------------------------------------------------------------------------- /img/quartz-composer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/quartz-composer.png -------------------------------------------------------------------------------- /img/rene.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/rene.png -------------------------------------------------------------------------------- /img/ronin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/ronin.jpg -------------------------------------------------------------------------------- /img/shade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/shade.jpg -------------------------------------------------------------------------------- /img/shade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prathyvsh/models-of-interaction/f00be3cf6457b2b82e23fa44f771b76dee613cb9/img/shade.png -------------------------------------------------------------------------------- /readme.org: -------------------------------------------------------------------------------- 1 | * Models of Interaction 2 | 3 | Models of Interaction is a catalogue of the different ways of interacting with computers and their underlying models. This is one segment of a trilogy. The other parts are called *Models of Computer* and *Models of Computation*. This is an attempt at trying to understand the prime factors which are involved into understanding the process of performing computation from end to end. 4 | 5 | Hope you enjoy this curation! 6 | 7 | ** Design ∩ Code 8 | 9 | [[./img/design-code-cover.png]] 10 | 11 | This is a curation of tools that blur the line between design and engineering. Check out the tweet thread here for a more fuller curation while I integrate them here: https://twitter.com/prathyvsh/status/1326687222507077637 12 | 13 | *** [[https://glisp.app][GLisp]] 14 | **** Baku Hashimoto 15 | 16 | [[./img/glisp.png]] 17 | 18 | A Lisp-based design tool that bridges graphic design and computational arts. It is a polished product that shows the power of having linguistic abstractions juxtaposed with an interactive design space. 19 | 20 | #+BEGIN_HTML 21 | 22 | #+END_HTML 23 | 24 | What is double awesome is Baku is using this to run [[https://twitter.com/_baku89/status/1322901592685699075][his own design experiments]], much like Karsten Schmidt does with his Umbrella. 25 | 26 | *** [[https://wiki.xxiivv.com/site/dotgrid.html][DotGrid]] 27 | **** Devine Lu Linvega 28 | 29 | [[./img/dotgrid.jpg]] 30 | 31 | Dotgrid is a grid based tool that uses Postscript to draw vector graphics. Yet another marvel from 100 Rabbits. 32 | 33 | *** [[https://wiki.xxiivv.com/site/ronin.html][Ronin]] 34 | 35 | [[./img/ronin.jpg]] 36 | 37 | Each tool built by [[https://100r.co/][hundredrabbits]] is worth checking out. They have this aesthetic that transports you to a parallel world that coexist with ours. They are pushing the boundaries of art and trailblazing a way of living. 38 | 39 | *** [[https://libfive.com][Libfive]] 40 | **** Matthew Keeter 41 | 42 | #+BEGIN_HTML 43 | 44 | #+END_HTML 45 | 46 | It is a solid modelling tool with a Guile Scheme based code editor that is suited for parametrized / procedural designs. 47 | 48 | *** [[https://plotdevice.io][Plotdevice]] 49 | **** Christian Swinehart 50 | 51 | [[./img/plotdevice.png]] 52 | 53 | Plotdevice by Christian Swineheart is a Python-based design ∩ coding tool that combines geometric shapes, typography, freeform Bézier curves and images. These can then be exported as images / animations: https://plotdevice.io 54 | 55 | *** [[http://rene.jon.gold/][René]] 56 | **** Jon Gold 57 | 58 | [[./img/rene.png]] 59 | 60 | René by Jon Gold is a design tool with which one can declaratively describe styles and explore their space of permutations: http://rene.jon.gold 61 | 62 | The rationale for its design can be read in this post by Jon: https://jon.gold/2016/06/declarative-design-tools/ 63 | 64 | *** [[https://en.wikipedia.org/wiki/Quartz_Composer][Quartz Composer]] 65 | **** Pietter-Oliver Latour 66 | 67 | [[./img/quartz-composer.png]] 68 | 69 | Quartz Composer was such a fun nodes and wires environment to do design + coding work in. Pierre–Oliver Latour made this tool inspired from Miller Puckette’s music synthesis environment [[https://spectrum.ieee.org/geek-life/profiles/miller-puckette-the-man-behind-the-max-and-pd-languages-and-a-lot-of-crazy-music][Max]] and Apple acquired it. 70 | 71 | *** [[https://szymonkaliski.com/projects/protoboard/][Protoboard]] 72 | **** Szymon Kaliski 73 | 74 | [[./img/protoboard.jpg]] 75 | 76 | One slick environment in this category is Protoboard by Szymon Kaliski: https://szymonkaliski.com/projects/protoboard/ 77 | 78 | Szymon makes a lot of other cool experiments and if you are interested in this space, you should definitely checkout his other stuff: https://szymonkaliski.com/projects/ 79 | 80 | *** [[https://cables.gl][Cables]] 81 | **** Undev Studio 82 | 83 | [[./img/cables.gif]] 84 | 85 | Cables is a tool for creating high end real time interactive graphics in a node-based editing environment: https://cables.gl 86 | 87 | *** [[https://paperjs.org][PaperJS]] 88 | **** Jürg Lehni, Jonathan Puckey 89 | 90 | [[./img/paperjs.png]] 91 | 92 | Paper.js (used to be known as Scriptographer) is an amazing Javascript library for creating canvas graphics. It has a sketch environment to debug drawings. It unlocked a special wave of creative stuff during 2010s. 93 | 94 | [[./img/paperjs-2.gif]] 95 | 96 | *** [[https://shade.to][Shade]] 97 | **** Two Lives Left 98 | 99 | [[./img/shade.png]] 100 | 101 | #+BEGIN_HTML 102 | 103 | #+END_HTML 104 | 105 | Shade is an amazing shader editor tool designed by Two Lives Left. It has some pretty sweet interaction design. 106 | 107 | *** [[https://origami.design][Origami]] 108 | 109 | [[./img/origami.png]] 110 | 111 | One of the cool spin offs of Quartz Composer is Origami. Brandon Walkin and team took Quartz Composer from where Apple left it to a refined product that allows for prototyping interactions for mobiles and desktops. 112 | 113 | *** [[https://framer.com][Framer]] 114 | 115 | [[./img/framer.png]] 116 | 117 | An environment that started out as a Javascript animation library but transformed into a full blown prototyping environment is Framer built by the old Made By Sofa team. 118 | 119 | *** [[http://macaw.co/][Macaw (Acquired by InVision)]] 120 | 121 | [[./img/macaw.jpg]] 122 | 123 | Macaw was a design tool built circa 2014 that enabled visually coding websites. The app was discontinued once the team joined Invision but it was a product with an interesting design direction. 124 | 125 | *** [[https://www.youtube.com/watch?v=Gy5m091fOTU][DeepUI (Prototype)]] 126 | 127 | What if you could describe your software without using text but gestures that describe the behaviours? DeepUI took a bold move in this direction. The environment hasn’t shipped yet but it was a daring take on what it means to develop software. 128 | 129 | *** [[https://store.steampowered.com/app/415170/Engare/][Engare]] 130 | 131 | Engare is a design oriented game made by Mahdi Bahrami 132 | 133 | *** [[https://nodebox.net/node/][Nodebox]] 134 | 135 | [[./img/nodebox.png]] 136 | 137 | Nodebox is a node based environment for generative data / interactive visualizations. 138 | 139 | Visualization made in Nodebox 140 | 141 | [[./img/nodebox-people-vis.jpg]] 142 | 143 | *** [[https://store.steampowered.com/app/415170/Engare/][Engare]] 144 | 145 | [[./img/engare.jpg]] 146 | 147 | #+BEGIN_HTML 148 | 149 | #+END_HTML 150 | 151 | Though not exactly a design ∩ code tool, it has great in-game pattern generators that exhibit machine/visual language duality. Lot to learn from this when creating a design ∩ code tool. 152 | Made by Mehdi Bahrami 153 | 154 | *** [[https://github.com/mattdesl/canvas-sketch][Canvas Sketch]] 155 | 156 | #+BEGIN_HTML 157 | 158 | #+END_HTML 159 | 160 | *** [[https://circles.software/][Circles]] 161 | #+BEGIN_HTML 162 | 163 | #+END_HTML 164 | --------------------------------------------------------------------------------