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

Motion Plus Design in Paris 2018

Motion Plus Design in Paris 2018

Baku Hashimoto

May 21, 2021
Tweet

More Decks by Baku Hashimoto

Other Decks in Design

Transcript

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

    View full-size slide

  2. Motion Design
    Web
    Creative Coding
    My Skills:

    View full-size slide

  3. Making New Ways to Make
    My Theme:

    View full-size slide

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

    View full-size slide

  5. 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 full-size slide

  6. Kinect


    3DCG


    Rotoscope
    +
    +

    View full-size slide

  7. Cinema4D




    Ae
    StreetView™
    Pixilation

    View full-size slide

  8. VR Position Tracking


    +


    Stop-Motion

    View full-size slide

  9. Google Chrome





    Houdini





    Cinema4D





    Ae

    View full-size slide

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

    View full-size slide

  11. TECHNE - The Visual Workshop
    Educational TV show

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Z-depth Rotoscoping
    High
    Low

    View full-size slide

  16. Make a Mount for Projector & Kinect

    View full-size slide

  17. Make a Mount for Projector & Kinect

    View full-size slide

  18. Projection System Built with oF

    View full-size slide

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

    View full-size slide

  20. 4th Album - “MAP”

    View full-size slide

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

    View full-size slide

  22. “Location Hunting” on Street View

    View full-size slide

  23. Develop Utilities to Download Street View

    View full-size slide

  24. Pre-Visualization

    View full-size slide

  25. Build the Shooting & Lighting Control System

    View full-size slide

  26. Test Shooting

    View full-size slide

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

    View full-size slide

  28. 😥😥😥

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Motion Control Rig in Stop-motion

    View full-size slide

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

    View full-size slide

  34. 1. Track the camera position
    2. Visualize the camera movement
    3. Move the tripod by hand


    in reference to the visualization
    Workflow:

    View full-size slide

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

    View full-size slide

  36. Visualize the Camera Movement on Every Frame

    View full-size slide

  37. 👵👴🏠

    View full-size slide

  38. Haru-chan
    Tabe-chan

    View full-size slide

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

    View full-size slide

  40. New Chitose Airport


    International Animation


    Festival 2018

    View full-size slide

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

    View full-size slide

  42. sketch_07152018

    View full-size slide

  43. Extrude Drawings to 3D Space

    View full-size slide

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

    View full-size slide

  45. Programmable Drawing Tool

    View full-size slide

  46. 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 full-size slide

  47. My Background
    (Very usual, though…)

    View full-size slide

  48. Windows XP - TV Ad
    by STARDUST

    View full-size slide

  49. 😇
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 🏃💨
    Pioneers of MoGraph

    View full-size slide

  53. 🤷
    Pioneers of MoGraph

    View full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

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

    View full-size slide

  57. Thank You
    Merci

    Baku Hashimoto

    View full-size slide