Motion Plus Design in Paris 2018

https://www.motion-plus-design.com/events/talks/41

Transcript

1. Baku Hashimoto
   ڮຊഴ
   Motion Designer / Creative Coder
   

   View Slide

2. View Slide

3. 😨
   

   View Slide

4. Motion Design
   Web
   Creative Coding
   My Skills:
   

   View Slide

5. Making New Ways to Make
   My Theme:
   

   View Slide

6. Making New Ways to Make
   Trying
   Workflow
   Combination of tools/libraries
   Moderately
   (Technically)
   

   View Slide

7. Kinect
   
   
   +
   
   
   Weird Meshing
   Gasoline
   Visualizing
   
   
   4D Geometry
   Hand Drawing
   
   
   in 3D Space
   Bénard Cell
   Cinema4D
   
   
   +
   
   
   openFrameworks
   Ae to Browser
   Reaction-Diffusion
   
   
   +
   
   
   GPU Renderer
   GLSL + C4D
   C4D to WebGL
   Cellular
   
   
   Automata
   Face Detection
   
   
   +
   
   
   Data Moshing
   Gradient Mesh
   
   
   +
   
   
   PixelBlender
   Keyframe Animation
   
   
   on Web
   Unicode
   
   
   +
   
   
   Image Similarity
   

   View Slide

8. Kinect
   
   
   3DCG
   
   
   Rotoscope
   +
   +
   

   View Slide

9. Cinema4D
   
   
   
   
   Ae
   StreetView™
   Pixilation
   

   View Slide

10. VR Position Tracking
    
    
    +
    
    
    Stop-Motion
    

    View Slide

11. Google Chrome
    
    
    ↓
    
    
    Houdini
    
    
    ↓
    
    
    Cinema4D
    
    
    ↓
    
    
    Ae
    

    View Slide

12. Z-depth Rotoscoping
    1 / 4
    Collaboration with Hu Yu & Laurent Grey
    Clay Animation w/ Kinect + Projector
    

    View Slide

13. TECHNE - The Visual Workshop
    Educational TV show
    

    View Slide

14. Programming Multi-screen Wipe Loop
    Match Frame Rotoscope Optical Illusion Projection
    Stop-motion Synchro One Take Shadow
    Rotoscope
    

    View Slide

15. “What would rotoscope in 2010s be?”
    

    View Slide

16. Animation
    Mixture with Live Footage
    Digital Software
    1951 Alice in Wonderland
    1985 a-ha / Take On Me
    2006 The Scanner Darkly
    ?
    

    View Slide

17. Z-depth Rotoscoping
    High
    Low
    

    View Slide

18. Make a Mount for Projector & Kinect
    

    View Slide

19. Make a Mount for Projector & Kinect
    

    View Slide

20. Projection System Built with oF
    

    View Slide

21. High
    Good
    Low
    

    View Slide

22. High
    Good
    Low
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Pixilation on Street View
    Music video for group_inou
    2 / 4
    Co-directed with Katsuki Nogami
    

    View Slide

28. View Slide

29. 4th Album - “MAP”
    

    View Slide

30. Hyperlapse.js
    JavaScript utility to create time-lapse using Street View
    ©Teehan + Lax
    

    View Slide

31. “Location Hunting” on Street View
    

    View Slide

32. Develop Utilities to Download Street View
    

    View Slide

33. Pre-Visualization
    

    View Slide

34. Build the Shooting & Lighting Control System
    

    View Slide

35. Test Shooting
    

    View Slide

36. View Slide

37. View Slide

38. Stop-motion w/ VR Device
    Dancing Rice Cakes🍡 on Table
    3 / 4
    

    View Slide

39. 😥😥😥
    

    View Slide

40. Imai
    

    View Slide

41. View Slide

42. Nothing good comes out of having an in
    fl
    exible body
    
    
    though I guess the same goes for our mind
    
    
    I played it cool and shied away from talking about love in the past
    
    
    But my life today is full of bliss
    
    
    My family, friends, and homies give me love
    
    
    My baby is smiling right by my side
    
    
    I know that you know the answer
    
    
    I know that you know that everything is just an opinion
    
    
    What brings me joy is making those around me happy
    
    
    I realized I’m always asking myself, “what can I do?”
    
    
    Th
    ese lyrics too is just an opinion
    
    
    It’s something that I can do
    
    
    ʢFly Fly Fly...ʣ
    
    
    We are all actors and actresses
    
    
    Getting by acting like everything is just
    fi
    ne
    
    
    Just as my friend Shunta told me,
    
    
    Fly
    
    
    🍡
    

    View Slide

43. 🍡Rice cakes
    🎑
    ΋ͪ - “Mochi”
    

    View Slide

44. View Slide

45. Stop-Motion with Mochi
    Dynamic Camera Movement
    No Pre-vis
    Challenges:
    

    View Slide

46. Motion Control Rig in Stop-motion
    

    View Slide

47. How can I smoothly move the tripod by hand?
    “Onionskin of Camera Movement”
    “Onionskin of Camera Movement”
    “Onionskin of Camera Movement”
    ……
    

    View Slide

48. 1. Track the camera position
    2. Visualize the camera movement
    3. Move the tripod by hand
    
    
    in reference to the visualization
    Workflow:
    

    View Slide

49. www.vrheads.com/everything-we-know-about-vive-tracker
    Vive Tracker - Position Tracking Device for VR
    

    View Slide

50. Visualize the Camera Movement on Every Frame
    

    View Slide

51. View Slide

52. View Slide

53. 👵👴🏠
    

    View Slide

54. View Slide

55. Haru-chan
    Tabe-chan
    

    View Slide

56. View Slide

57. 😭
    

    View Slide

58. Hand-drawn 3D Animation
    Title Sequence for Animation Festival
    4 / 4
    

    View Slide

59. New Chitose Airport
    
    
    International Animation
    
    
    Festival 2018
    

    View Slide

60. “Animation”
    Clay
    Adobe Flash
    Hand-drawn
    (Animate)
    3DCG
    

    View Slide

61. sketch_07152018
    

    View Slide

62. Extrude Drawings to 3D Space
    

    View Slide

63. Laggy
    Not Designed for Animation
    Hard to Hack
    Draw an Animation as Vector Data
    (I really love ActionScript, though…)
    😞
    

    View Slide

64. 🤩
    

    View Slide

65. View Slide

66. Programmable Drawing Tool
    

    View Slide

67. View Slide

68. 😱
    

    View Slide

69. View Slide

70. Kinect
    
    
    +
    
    
    Weird Meshing
    Gasoline
    Visualizing
    
    
    4D Geometry
    Hand Drawing
    
    
    in 3D Space
    Bénard Cell
    Cinema4D
    
    
    +
    
    
    openFrameworks
    Ae to Browser
    Reaction-Diffusion
    
    
    +
    
    
    GPU Renderer
    GLSL + C4D
    C4D to WebGL
    Cellular
    
    
    Automata
    Face Detection
    
    
    +
    
    
    Data Moshing
    Gradient Mesh
    
    
    +
    
    
    PixelBlender
    Keyframe Animation
    
    
    on Web
    Unicode
    
    
    +
    
    
    Image Similarity
    

    View Slide

71. My Background
    (Very usual, though…)
    

    View Slide

72. Windows XP - TV Ad
    by STARDUST
    

    View Slide

73. 🙇
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. 😰
    

    View Slide

79. 😇
    Figure out
    
    
    How to Make
    😞
    Brush it up to
    Commercial Quality
    Enhance UI Usability
    😂
    Start Making
    😐
    Deadline
    ☺
    Come up with
    New Technique
    Develop a New Tool
    😆
    Motivation
    

    View Slide

80. ✍ Design Skills
    ✨ Interest in Commercial Quality
    🚀 Influence from Sci-Fi Aesthetics
    I’m Lack of…
    

    View Slide

81. Pioneers of MoGraph
    Ref: “Goodbye Uncanny Valley”
    

    View Slide

82. 🏃💨
    Pioneers of MoGraph
    

    View Slide

83. 🤷
    Pioneers of MoGraph
    

    View Slide

84. Motion Infographics
    w/ Flat Design
    Sci-Fi Style
    Classic
    MoGraph
    Oddly
    Pleasing Gifs
    Weird Sims
    Digital
    Grotesque
    Memphis
    
    
    Inspired
    2018
    Photorealism
    Frontier f
    GPU Renderer
    

    View Slide

85. Failed
    Photogrammetry
    Twixtor Error
    Hacking
    
    
    Game Device
    Glitch
    Aesthetics
    Wilderness of
    
    
    CGI Experimentalism
    Pixel-sorting
    Integration w/
    Creative Coding
    Z-
    fi
    ghting
    Th
    e “New Ugly”
    Hackers’
    Spirit
    

    View Slide

86. View Slide

87. My Dream
    “To become a tool developer, and create an unique video with the tool I made”
    

    View Slide

88. Thank You
    Merci
    ☺
    Baku Hashimoto
    

    View Slide