Dune - Nodes process breakdown
Dune - Night at Arrakis is an experiment I developed during Codevember'18 using Nodes creative coding environment that we are developing at Variable.
Clearly inspired by Frank Herber's Dune the image features a desert landscape with two moons on the horizon. I've not done much with the code beyond initial tweet in 2018. One of my most anticipated movies in years - Dune by Denis Villeneuve - was supposed to be released on December 18th this year. Unfortunately due to ongoing pandemic it got delayed till October 1, 2021... To ease the pain I decided to share more about the process and release the source code. Read on!
How is it made?
The scene
The scene consists of a distorted plane plane for the dunes, two spheres for the moons and another plane for flat color sky.
Dunes are created by lifting certain areas of the plane and twisting them using sin/cos functions.
The graph
As this experiment is created in Nodes the whole scene and rendering are represented as blocks of code connected together. There is couple of main sections of that graph described in more detail below:
- Canvas - is where we create HTML canvas and WebGL context used for rendering
- Dunes - here we create plane and through series of modifiers (Dune nodes) create the desert landscape. The same geometry is used to create thin line overlay adding a bit of digital look
- Moons - those are created from 2 spheres. As their color matches the one of the sky only the top right lit part is visible.
- Sky - is just a flat solid color plane perpendicular to the ground
- Lights - final color is controlled using 2 directional lights although in the image below only one is used
Demo
You can play with colors blow:
Full interactive project
You can try an interactive version of the whole project in the browser. Before you dive in, you might want to learn how to use Nodes by reading Getting Started or following the Tutorial.
Source code
Alternatively you can get the source code and open it in the latest version of Nodes.
License
All code and illustration from this post are released under Attribution-NonCommercial 4.0 license.
Thanks!
You can find more Nodes examples at Nodes Playground or follow me on Twitter @marcinignac where I post about generative art, data visualisation and of course Nodes!