Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What do creative coding toolkit of the future look like?

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/

4658e84352d90a710786e7dcc88788bd?s=128

Baku Hashimoto

May 20, 2021
Tweet

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 < = = =

    = = = = = = =
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  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

  32. None
  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