What do creative coding toolkit of the future look like?

This is the slide for the event organized by Future Sketches group in MediaLab.

https://www.media.mit.edu/events/future-sketches-talks/

Transcript

1. May 19, 2021 Future Sketches Group @ MediaLab What do creative tools of the future look like? Baku Hashimoto ڮຊ
   ഴ
   Video Director / Visual Artist / (Wannabe) Software Developer ~ ~ ~ ~ ~ (In my humble opinion)
2. In This Talk My background (in briefly) Glisp - Lisp-based graphic design toolkit UI/UX for creative tool My attitude for creating generative thingy And so on...
3. < = = = = Hokkaido < = = = = = = = = = =
15. Creative Coding Is not necessarily... Interactive / Playable / Automated For new media (xR, mobile app, web) I'm interested in... Static / For viewing / Repetitive & Manual coding_by_keyboardI For traditional techniques (drawing, graphic design, stop-motion) < = = = > < = = = > < = = = >
16. Glisp
17. * Lisp-based programming language for design * Creative coding toolkit Gisp is Graphical LISP This is the boring logo which I designed based on lambda symbol..) * Series of prototypes I've been trying
18. (background "#F5F5F5") (transform (mat2d / * (translate [0 -100]) (scale [2 1]) (pivot [50 50] (rotate (deg 45)))) (style (stroke "royalblue" 10) (path/transform (mat2d / * (rotate 0) (scale [1 2])) (rect [0 0 100 200])))) Lots of Irritating Stupid Parentheses Lisp ~ ~ 🤔
19. ((((Why Lisp?))))) * Easy to implement parser/evaluator * ((Explicit hierarchy) of (syntax tree)) ... And as it just looks cool * The nature of “Code as Data”
20. (+ 1 (pow 2 2) (if ( ! = "a" "b") 4 5)) LISt Processor (func 1 2 3) func(1, 2, 3) Every form (incl. operators and conditionals) is function application with prefix notation 1 + pow(2, 2) + "a" ! = "b" ? 4 : 5 < = = = > < = = = > ~~~~~ ~ ~
21. 5 ; Integer 1.2 ; F l oat "string" ; String true false ; Boolean nil ; = = null PI ; Symbol (variable) :keyword ; Keyword Symbol (identif i er, key for object, enum) [0 1 2 3] ; Vector ( = = array) {:key "value" :key2 123} ; Hash Map (fn - symbol arg0 arg1 arg2) ; List (function application)
22. (+ 1 (pow 2 2) (if ( ! = "a" "b") 4 5)) (+ 1 4 (if ( ! = "a" "b") 4 5)) (+ 1 4 (if true 4 5)) (+ 1 4 4) 9 ~~~~~~~~~ ~~~~~~~~~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~ - - > - - > - - > - - >
23. Code as Data f i ll("royalblue"); circle(50, 50, 100); textAlign(CENTER); text("Code as Data", 150, 50); (style (f i ll "royalblue") (circle [50 50] 50) (text "Code as Data" [150 50])) p5 = A sequence of orders to change drawing context's state = An expression returning the content of graphics Open in Glisp
24. (style (f i ll "royalblue") (circle [50 50] 50)) The function circle just returns an array representing a circular path ~ >
25. (style (f i ll "royalblue") [:path : M [100 50] : C [100 77.6] [77.6 100] [50 100] : C [22.4 100] [0 77.6] [0 50] : C [0 22.4] [22.4 0] [50 0] : C [77.6 0] [100 22.4] [100 50] : Z]) Returns a CSS-like object data for styling ~ >
26. (style {:f i ll true :f i ll - color "royalblue"} [:path : M [100 50] : C [100 77.6] [77.6 100] [50 100] : C [22.4 100] [0 77.6] [0 50] : C [0 22.4] [22.4 0] [50 0] : C [77.6 0] [100 22.4] [100 50] : Z]) Returns a group that styles at 1st arg is applied to ~ >
27. [:style {:f i ll true :f i ll - color "royalblue"} [:path : M [100 50] : C [100 77.6] [77.6 100] [50 100] : C [22.4 100] [0 77.6] [0 50] : C [0 22.4] [22.4 0] [50 0] : C [77.6 0] [100 22.4] [100 50] : Z]]
28. <g f i ll="royalblue"> <path="M 100,50 C 100,77.6 77.6,100 . . . "> < / g> < = > [:style {:f i ll true :f i ll - color "royalblue"} [:path : M [100 50] : C [100 77.6] [77.6 100] [50 100] : C [22.4 100] [0 77.6] [0 50] : C [0 22.4] [22.4 0] [50 0] : C [77.6 0] [100 22.4] [100 50] : Z]]
29. (style (f i ll "royalblue") (circle [50 50] 50) (text "Code as Data" [150 50])) Code View Data * Fast to write * Friendly for nerds * Easy to bind to GUI * Able to use as a project format * Intuitive for designers * WYSWYG * Provides various ways to tweak
30. path/ellipse Tweak UI mat2d path/trim rect path/ngon vec2/lerp mat2d/rotate path/offset
31. Open in Glisp User-defined tweak UI
33. Let an algorithm draw something how we draw something how we (unconsciously) came up with graphics to draw Let an algorithm alter... ~ > ⎧ | ⎩ * *
34. Programmable Pen Tool https://s.baku89.com/pentool/
35. Programming By Hand Stereotyped image for the intersection of Art and Tech
36. Hand Programming I'm rather interested in... Programming Programming Programming Programming
37. The nature of tools alter what/how we make Ferrule Easel
38. Tony Hill Is creating camera rigs
39. < - > Parameter's value < - - Fitness of 👍❤ Every design process is an optimization problem o + < < ~ ~ > Coding Slider Touchpad The usability/behavior of user interface constraints how we can move in the "fitness landscape"
40. Further more on UX/UI for Design "Tweak Mode" for every type of input field
41. Support for various input devices This is sort of like DAW/VJ-ing software MIDI/OSC/Leap Motion/Gamepad...
42. Let the program computes the result by providing parameters Inverse Evaluation Let the program calculate the parameters inversely by providing the result. ** a =? =2 2 ** a = 25 =? 2
43. By implementing the inverse for the function, artists can manipulate the returned value of expression directly. Open in Glisp
44. Expanding Programmability User-defined Color Space (might be useful for risograph, CGI texturing)
45. Higher-order functionality * Custom Functions * User-defined Primitives * Defining Inverse function * Programmable Pen Tool / Color Space = = Functionality to create functionalities
46. Douglas Engelbart https://www.dougengelbart.org/content/view/192/165/ "Business as Usual" "Improving how we do that" "Improving how we improve" Bootstrapping A activity B activity C activity < ~ < ~
47. Bootstrapping https://www.dougengelbart.org/content/view/192/165/ "Making stuff" "Making how we make" "Making how we make ways to make" (In creative process) The Future of creative coding might be laying here A activity B activity C activity But I still love daily repetitive work Douglas Engelbart < ~ < ~ What I do with developing Glisp < ~
48. * Be a just a way for meta-drawing * Dissolves into various genres of art/design * Be more physical/intuitive than logical The Future of Creative Coding will...
49. Thank you