Responses by Joseph Azar, creative developer; and Félix Péault, art director and digital designer.

Background: “Le Voyage Azarien has several objectives,” says Joseph Azar. “The first one is to share my experience of being in the forest, inspiring people to connect with nature and imparting the importance of biomimicry—by observing a tree, you can learn a lot about yourself! The second is to create a restful and meditative experience. We are living in a stressful time with the COVID-19 pandemic. I wanted to offer visitors a time of restfulness and well-being. The final objective was to present my character as a creative coding artist, proposing an outstanding vision of an immersive interactive website experience.”

Design core: “The site features a sequence of forest scenes made with 3-D rendering from a Lidar sensor, creating this very special aesthetic accompanied by storytelling poetry,” says Azar.

“The artistic direction is based on the atmosphere of the scenes that uses colorful circle shapes, making up each point cloud,” says Félix Péault. “The typography has a very specific character that blends well with the unique world of the forest and represents the wide variety of shapes that are found in the trees.”

Favorite details: “I really enjoy the morphing between trees, going from one tree to another with the clouds,” says Azar. “I’m very proud of bringing these trees to life in a digital world, making particles come alive that represent their breathing.”

Challenges: “Transcribing my feelings as naturally as possible while retaining some coherence for the subject,” says Azar. “Art director Émilie Grandjean-Damour helped me a lot with the artistic direction to remain authentic and to go deep inside myself, especially for the voice recording. Of course there were technical challenges as well, but those aren’t as important as the challenge of speaking from a place of complete intimacy.”

New lessons: “I learned a lot about the React library and especially the management of shaders with particles and point clouds,” says Azar. “I used React and react-three-fiber, as I always like to test new technologies in my projects. If I had to create this site again, I would use three.js directly without using react-three-fiber, because this project required a lot of custom development.”

Navigation structure: “We wanted to leave as much room as possible for the experience by creating a subtle interface that remained practical and easy to use,” says Péault. “The timeline enables visitors to follow the overall progress throughout the site and quickly navigate to a chapter while giving them control of the scenes and interacting with the experience. The menu gives access to the other modes and to the About page that details the project, along with possible future pages.”

Technology: JavaScript/HTML5/CSS, React, three.js, react-three-fiber and GSAP.

Special technical features: “I used the Lidar sensor from the iPad Pro and the app SiteScape,” says Azar. “I really enjoyed using it with the trees, and it encouraged me to spend a lot of time in the forest.”