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.
The 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.
- Neuronal Synchrony – WebApp as visual performance Neuronal Synchrony is a local web application for performance created using node.js and two.js to dynamically generate animations in […]
- The Carp and the Seagull – Interactive short film by Evan Boehm The Carp and the Seagull is an interactive short film about one man’s encounter with the spirit world and his fall from grace. It is a user driven narrative that tells a single story through the prism of two connected spaces. One space is the natural world and the other is the spirit or nether […]
- Generative Machines by Michael Chang A few months ago Michael Chang at Google Creative Labs was asked to make some visuals for Google IO, building on from the procedural circuit-board diagrams he did in the past. After spending few weeks experimenting in both Three.js and Processing, he gravitated towards one concept - the idea of a procedural exploding view diagram of "Generative Machines". It wasn’t enough that I simply had rivets and slots coming together, I also wanted to make an overall structure that looked as if, when assembled, became a machine that forms a whole that was more than the sum of its parts.This got me thinking about creating procedural shapes that I can cut up. My first exploration into this was creating a one dimensional exploding axis, where elements can fly forward or back, and adding a radial dimension where elements could be chopped up and exploded outwards. The result is a collection of self-assembling machines which live on a skeleton. By modifying controls, the new machine assembles itself looking slightly different then the previous one. You can read more about the process with detail examples and steps taken to create "Generative Machines" on Michael's blog. Generative Machines via Cedric […]
- Elements – Interactive Installation by Britzpetermann for BDF Britzpetermann was commissioned to create an installation for the entrance hall that draws attention to the topic energy. The team decided to break down the topic energy and chose the 4 elements, the basis of all energy extractions which are used in the park and present in an elegant and interactive […]
- Cyclic Vacuum Cannon by James Paterson – Presstube Not many artist working with code share their process. This is particularly unfortunate since most of the time the process plays an integral part in the project. To this day, and it's been around 11 years, the work of James Paterson aka Presstube still puzzles me, how it is derived and made. "Cyclic Vacuum Cannonis" is James' new project, in process, documented in detail as it's developing. All of us at CAN are very excited to see where it goes, not to mention a ton of useful tips are included for anyone that wondered how this (art/code) work is made. Wtf is a Cyclic Vacuum Cannon? Good question! Here's the original drawing that sparked the idea: it depicts a swirling vortex of detritus contained by a membrane. As the contents of the membrane make their way around on a circular breeze they come in contact with a launch pad that shoots them outward with great force. The recoil of each launch propels the cannon in the opposite direction (picture a 2 year old firing a 12 gauge). I imagine the Cyclic Vacuum Cannon as a thruster that can be strapped on to things to make them move around, or as a weapon, or both. Now that this is crystal clear, lets have a look what has happened since. In the first (0) part, or the initial screencast, James breaks up the concept of drawing the Cyclic Vacuum Cannon into its constituent parts, take a crack at naming them, and think out loud about their responsibilities & relationships. This process of imagining a potential cast of objects helps him get a better understanding of what he is doing design-wise. This is followed by by the project setup dirty work (1): Setting up an open source repo, getting familiar with the tools, and putting together a workspace / workflow so he can start building the fun stuff! It is still early days and by the looks of it there is yet so much to come. He'll continue to publish the progression of the project in bite-sized screencasts and git pushes. Stay tuned for updates:@presstube or follow on GitHub. Of course if you are unfamiliar with James' work, I suggest taking a few days off from everything and digging into to the Presstube archive asap. presstube.com/cyclic-vacuum-cannon Cyclic Vacuum Cannon - Part 0: Brainstorming from Presstube on Vimeo. Cyclic Vacuum Cannon - Part 1: Setup from Presstube on […]
Posted on: 16/01/2013
- Engineering Lead at Wieden+Kennedy
- Web Developer at the Minneapolis Institute of Arts
- Junior Production Assistant at Resonate
- WebGL/3D Creative Prototyping Devs at TheSupply
- Freelance Interactive Producers at Psyop
- Art Director/Senior Designer at Stinkdigital
- Creative Technologist, The ZOO at Google
- Jr. / Sr. Software Developer at Minivegas
- Web Developer at Minivegas
- Digital Producer at Minivegas
- 3D Technologist at INDG
- Creative Director at INDG