Javascript, Three Js
comments 3

Drop Experiment by Manny Tan

drop_03 copy

drop_03

Driven by the idea of a droplet of water following a line, Manny Tan created this Three.Js experiment that explores a droplet shape and it’s associated views in 3d space. The web application allows you to click and drag to rotate the shape. Alternatively, you can use the scroll wheel or right click and drag to move the shape to a particular view.

drop_inspirationThe experiment includes a series of points that orbit around a center point. It began with creating the center line that uses perlin noise to create and update the shape of the line. This is followed by droplets which move along the string with dividing it into 2 parts – first part uses math to create and parse data in real time and second that draws different shapes based off of that data. Although at first Manny envisioned a toggle allowing you to switch from one view to another but after checking through some of the Three.js examples (specifically the multiple canvases example), he thought it was much more interesting to show all views at the same time side by side.

The step by step development and final versions are available here. The full explanation of the process including different stages are at the link below.

Project Page | Manny Tan

drop_collagedrop_04drop_06drop_05drop_02drop_07

  • http://twitter.com/__imm__ David A. Viramontes

    beautiful

  • braitsch

    Gorgeous. Great work Manny.

  • Ricardo

    It’s so fluid, lovely visuals