atelier-re.com
Prototype Demo v.1:
We Are Not Our Cruxes Webapp
Nicole Rademacher
Adoptee + Artist + Registered Art Therapist
ATR, LMFT, MA, MFA
she/her
@arttherapywithnicole | arttherapywithnicole.com
Michael Manalo
Design Researcher
he/him
Current Text Studies
studies: bubble interaction using anaglyph webGL
What is it?
Speculative webapp using a unique approach to visualize emotions of adoption experience by presenting artwork created during therapy sessions.
Participants in adoption journeys used various mixed media art forms to express their feelings, and this app serves as a platform to explore those expressions.
How it’s built
Example of using survey responses and art created by participants.
Three.js library was used for it’s multifunction libraries and web interactions.
sample using webGL (demo link 1) (demo link 2)
Text Studies 1
Use Three.js and WebGL to place key words from adoption survey responses in a 3D environment • Arrange text to show relationships between concepts and group related words into clusters
Enhance visual understanding with color, size, and effects:
• Apply different colors and sizes to highlight frequently mentioned topics
• Use lighting and particle effects to draw attention to important insights and show idea flow
Enable interactive exploration:
• Allow users to move around the 3D space and interact with elements for more details
• Generate animated word clouds and text to show changes in responses over time
Simplify complex data:
• Create easy-to-understand visual representations of survey responses • Help identify patterns and trends in adoption-related feedback
Text Studies 2
Transform survey data into interactive 3D grid:
• Organize survey responses in a structured grid format for clear data representation
• Develop a dynamic 3D table that can morph between sphere, helix, and grid layouts for versatile data exploration
Implement user-controlled visualization transitions:
• Enable users to seamlessly switch between sphere, helix, and grid views to gain different perspectives on the data
• Incorporate smooth animations during transitions to maintain context and enhance user understanding of data relationships
Helix example above, grid and sphere examples below
sample using web gl (demo link 4)
Version 1 (Bubbles)
Implement anaglyph 3D effect for immersive visualization:
• Use Three.js anaglyph library to create a stereoscopic 3D effect for the bubble field
• Apply red-cyan color filtering to generate depth perception, enhancing the visual impact of participants’ artwork
Design interactive bubble field with artwork integration:
• Create a dynamic field of 3D bubbles, each containing a piece of participant artwork • Allow users to navigate through the bubble field, enabling closer inspection and interaction with individual artworks in anaglyph 3D space
Future Steps
Proposed ver 2.0
Next Steps for Webapp
Popping Functionality: still under development.
Integrating mouse click interaction for desktops and touch interaction for mobile devices
Feedback: valuable resource of living art archive
Participants in adoption journeys used various mixed media art forms to express their feelings, and this app serves as a platform to explore those expressions.
proposed ver 2.0