Tweet
Tweet

Slide 1

Slide 1 text

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)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

< = = = = Hokkaido < = = = = = = = = = =

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Glisp

Slide 17

Slide 17 text

* 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

((((Why Lisp?))))) * Easy to implement parser/evaluator * ((Explicit hierarchy) of (syntax tree)) ... And as it just looks cool * The nature of “Code as Data”

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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)

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

(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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Open in Glisp User-defined tweak UI

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Tony Hill Is creating camera rigs

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Thank you