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)
   

   View Slide

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

   View Slide

3. < = = = =
   Hokkaido
   < = = = = = = = = = =
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

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

    View Slide

16. Glisp
    

    View Slide

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
    

    View Slide

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
    ~ ~
    🤔
    

    View Slide

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”
    

    View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

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
    

    View Slide

24. (style (f
    i
    ll "royalblue")
    
    
    (circle [50 50] 50))
    The function circle just returns an array representing a circular path
    ~ >
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. i
    ll="royalblue">
    
    
    . . .
    ">
    
    
    < /
    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]]
    

    View Slide

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
    

    View Slide

30. path/ellipse
    Tweak UI
    mat2d
    path/trim rect
    path/ngon
    vec2/lerp
    mat2d/rotate
    path/offset
    

    View Slide

31. Open in Glisp
    User-defined tweak UI
    

    View Slide

32. View Slide

33. Let an algorithm draw something
    how we draw something
    how we (unconsciously) came up
    
    
    with graphics to draw
    Let an algorithm alter...
    ~ >
    ⎧
    
    
    |
    
    
    ⎩
    *
    *
    

    View Slide

34. Programmable Pen Tool
    https://s.baku89.com/pentool/
    

    View Slide

35. Programming By Hand
    Stereotyped image for the intersection of Art and Tech
    

    View Slide

36. Hand
    Programming
    I'm rather interested in...
    Programming
    Programming
    Programming
    Programming
    

    View Slide

37. The nature of tools alter what/how we make
    Ferrule
    Easel
    

    View Slide

38. Tony Hill
    Is creating camera rigs
    

    View Slide

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"
    

    View Slide

40. Further more on UX/UI for Design
    "Tweak Mode" for every type of input field
    

    View Slide

41. Support for various input devices
    This is sort of like DAW/VJ-ing software
    MIDI/OSC/Leap Motion/Gamepad...
    

    View Slide

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
    

    View Slide

43. By implementing the inverse for the function,
    
    
    artists can manipulate the returned value
    
    
    of expression directly.
    Open in Glisp
    

    View Slide

44. Expanding Programmability
    User-defined Color Space (might be useful for risograph, CGI texturing)
    

    View Slide

45. Higher-order functionality
    * Custom Functions
    
    
    * User-defined Primitives
    
    
    * Defining Inverse function
    
    
    * Programmable Pen Tool / Color Space
    = =
    Functionality to create functionalities
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. Thank you
    

    View Slide