The Laughing Snake

3D Scene design, THREE.js development and UX for the hypertext narrative by Morehshin Allahyari

OVERVIEW

The Laughing Snake is a web-based hypertext narrative by Morehshin Allahyari, re-appropriating the story of the Laughing Snake – taken from Kitab al-bulhan (The Book of Wonders) – to reflect on a series of personal and imagined stories in relation to the female body in the Middle East, hysteria, and re-imagined futures.1

The project can be viewed on Artport, the Whitney Museum’s online gallery space for commissions of net art and new media art.

SCOPE

I wrote custom software for the hypertext narrative using Windrift, a Javascript framework for writing mutable narratives. I designed and programmed the 3D scenes using THREE.js, a JavaScript library and API used to create and display animated 3D computer graphics in a web browser. I also consulted/collaborated on the textual design, interactions, and user flow.

ROLE

Lead Javascript Developer, 3D Scene Designer, UX Designer

Web development team composed of one other person, Tonia Beglari, who assisted with preparing and optimizing 3D models for web, creating normal maps, and fixing performance issues.

Story, visuals and direction by: Morehshin Allahyari.
Sound design by: Andrea Young.

PROCESS

HYPERTEXT NARRATIVE: STRUCTURE AND FLOW

Windrift is designed to produce narratives that are informed by user selection or choice, similar to systems like Twine. While Twine is optimized for writing branching stories, Windrift is better suited for mutable stories. The Laughing Snake’s narrative structure has a mix of both branching and mutable “choices”, making Windrift an ideal choice.

scene demonstrating mutable text

The Laughing Snake, example of mutable text

3D ANIMATION: DESIGN AND DEVELOPMENT

Windrift relies heavily on the React/Redux JavaScript frameworks. It also allows for custom triggers and other Javascript libraries to be integrated, such as THREE.js.

Stylistically, The Laughing Snake has a minimal, monochromatic color scheme:

scene with the text, she is the laughing snake

The Laughing Snake, scene 2

scene with the text, and won't this be our revolution

The Laughing Snake, scene 7

It showcases its 3D-ness in slow, subtle movements between the objects in the scene and the interplay of shadow, light and reflective surfaces:

scene 3 in progress

The Laughing Snake, scene 3: test with four lights orbiting the model and one directional light

scene 4 in progress

The Laughing Snake, scene 4: test with multiple lights

CHOREOGRAPHING LIGHT AND REFLECTION

Subsequently, I spent much of my time choreographing the movement of the 3D snake model, directional lights, spot lights, fill lights, orbiting point lights, and camera pov:

scene 5 in progress

The Laughing Snake, scene 5: test with reflective snake and hard lighting

scene 5 in progress

The Laughing Snake, scene 5: test with muted snake and dim lighting

scene 5 in progress

The Laughing Snake, scene 5: test with gods-eye view camera angle

OUTCOME

View the complete project.

clip showing narrative and interaction between two scenes

The Laughing Snake, scene 3 & 4

clip showing narrative and interaction between two scenes

The Laughing Snake, scene 4 & 5

clip showing narrative and interaction between two scenes

The Laughing Snake, scene 6 & 7
  1. TEXT BY MOREHSHIN ALLAHYARI ↩︎