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.
via Cedric Kiefer
- Drop Experiment by Manny Tan 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. Project Page | Manny […]
- 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 […]
- 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 […]
- 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 […]
- This Exquisite Forest – Project by Aaron Koblin and Chris Milk This Exquisite Forest is a new collaborative project by Aaron Koblin and Chris Milk produced by Google and Tate. Following the opening party last night at the Tate Modern where we had a chance to get a first look at the project, This Exquisite Forest is now live and awaiting your contributions. In the tradition of collaborative projects between Aaron and Chris (3 Dreams Of Black, The Wilderness Downtown, The Johnny Cash Project), "This Exquisite Forest" is primarily a crowd sourced animation drawings tool which combines drawings into ever growing trees. Each animated drawing is a branch to a tree and each response is yet another branch to the same tree. Someone may start a drawing, you may respond to it, making the tree grow larger. The installation at the Tate Modern includes a room with projections on each wall, showing a tree or two per wall. Each tree can be browsed using the provided infra-red pointer and similar to the website when pointer is located over a branch, animation stored in this branch is shown. Likewise, at the main entrance of the Turbine Hall, visitors are greeted by two projections at the end of the ramp, showing a selection of trees from the archive. Visitors can also create drawings on the third floor of the gallery using installed Wacom tablets. The team behind the project tells CAN, the selection of trees shown in the Tate have been "approved" by the Tate whereas the website contains all other trees "grown" by the users around the world. The project makes use of several HTML5 features in Google Chrome. The HTML5 Canvas element is showcased in the site’s drawing tool. Canvas is hardware-accelerated in Google Chrome, offloading rendering to the GPU and reducing CPU load, which improves performance. The Web Audio API provides music playback when the user views an animation. Music is dynamically generated for each tree based on the input of the contributors. Many of the project’s styling and transitions utilize CSS3. All animations are played back using the HTML5 video player. Here are some of our favorite featured artists: Casey Reas, Olafur Eliasson, Miroslaw Balka and Aaron Koblin himself. Try it for yourself at exquisiteforest.com Aaron Koblin | Chris Milk | […]
- Dokfest Forest Identity [Processing] For the 26th edition of the Kassel Documentary Film and Video Festival, FIELD designed an identity based on the festival’s film submission database. Set in a thick and obscure forest like the wooded surroundings of Kassel, the colourful spheres form a sculptural representation of the programme – each of them represents a film, video, or installation work shown at the festival. A unique structure emerges from the forest when hundreds of these individual objects come together – like the festival brings together artists and visitors from all over the world, regional talent and established filmmakers, professionals and interested locals. Each film is represented by a sphere, with the size showing the length of the work. When two films coincide in all 3 parameters, meaning their spheres would sit in the same position, they cluster around this position like grapes on a vine. A generative colour palette assigns a unique shade to each represented work, which it keeps throughout all diagrams. The forest in the images was rendered using luxrender and took about 8 hours on a large amazon ec2 instance. Geometry was generated in a custom Processing application and then imported into Blender. See images below + make sure you visit field.io for more wonderful work by the London based studio. For more great Processing projects on CAN, see […]
Posted on: 01/10/2012
- Senior Digital Designer at CLEVER°FRANKE
- Interaction Designer at Carlo Ratti Associati
- Creative Technologist at Deeplocal
- HTML / CSS Developer at Resn
- Climate Service Data Visualiser at FutureEverything
- Web Developer at &Associates
- Creative Technologist at Rewind FX
- Coder to collaborate with Agnes Chavez
- Data Scientist at Seed Scientific
- Data Engineer at Seed Scientific
- Design Technologist at Seed Scientific
- Creative Technologist, The ZOO at Google