jpmavo

Prev @NASA | HCI @GeorgiaTech | Interested in Wearables and the Future of Interfaces

[jpmavo @jp_mavo]

A different way of viewing your archives spatially.

Done in #threejs

[jpmavo @jp_mavo]

@2ndB4Awakening

[jpmavo @jp_mavo]

"The sun, with all those planets revolving around it and dependent on it, can still ripen a bunch of grapes as if it had nothing else in the universe to do."

Done in #Threejs and #webgl

Inspired by NASA's SDO Wavelength Graphics

[jpmavo @jp_mavo]

@2ndB4Awakening

[jpmavo @jp_mavo]

Inspired by https://t.co/zfiTW9mbMA, I recreated this unique interface with motion/react and Three.js to include books, art, and various projects that I've developed or collected over the years.

#threejs

[jpmavo @jp_mavo]

Three Way Deadlock

Done in Three.js/WebGPU

#JJK #JujutsuKaisen

[jpmavo @jp_mavo]

Applying Glyphs and Scramble effects to the Stanford Bunny.

The Stanford Bunny is a widely used model for testing graphics algorithms. Its original reference was a ceramic figurine of a rabbit that was 3D scanned to create the model.

Each 3D model has per-triangle data we can extract from its geometry like the triangles centroids, normals, and edge lengths.

Normals are vectors (red arrows) perpendicular to a triangle's surface and play a crucial role in shading, texture mapping, and determining which way a surface is facing. Using each triangle's centroid and face normal, we can build an instanced plane per triangle. Each plane is placed at the centroid, rotated to align with the face normal, and scaled to fit the triangle. This preserves the bunny's topology while giving us a nice surface to apply a glyph field.

The glyphs come from a Texture Atlas. Texture Atlases are a single image containing every letter and symbol arranged in a grid. Instead of loading each character as a separate image, the atlas packs them all into one, reducing file size and keeping asset loading fast.

On hover, we raycast against the original bunny surface. The hit point is converted into the mesh's local space and used as the scramble origin. From there, a radial wave expands outward over time.

That wave drives everything: shaders control the dissolve of the mesh surface, wireframe, and glyphs scramble through random characters before locking into place leaving our bunny reconstructed entirely out of text.

Made in Three.js/WebGL

[jpmavo @jp_mavo]

Late Night Models

[jpmavo @jp_mavo]

“There are certain kinds of deaths that one should not be expected to relive, certain kinds of connections so deep that when they are broken you feel the snap of the link inside you.”

[jpmavo @jp_mavo]

@gptrey3 Meditate and Pray, yung one

[jpmavo @jp_mavo]

The plexus effect in computer animation is a procedural technique where vertices (points) are connected by lines and triangles based on their distance. As points move closer together or farther apart, connections appear or disappear accordingly.

The result is a visual map of relationships, often used to represent structure emerging from a dynamic process involving distance, motion, and a threshold. This effect can visualize the form of neural networks, blood vessels, or digital interfaces.

Emergence is a common feature of complex systems such as networks. A brain is a coordinated pattern across billions of connected relationships, and some theories propose that consciousness emerges from these relationships.

Scale these relationships down to a simplified biological system, such as neurons in a petri dish (in vitro). A “mind-in-vitro” platform can use cultured neurons that self-organize into sophisticated networks, can be trained, and can exhibit coordinated behavior—such as learning to play Pong. Within certain constraints, behavior can emerge from connectivity, feedback, and adaptation.

From a psychological perspective, the self can be viewed as the emergent property of mental and emotional loops, short-lived inner modes, and shifting self-states. These inner states are constantly reconstructed based on experience. What is fascinating is that although these states produce a stable organizational property, humans can willfully reconstruct them through awareness. The self is a self-organizing pattern, but awareness is the system’s capacity to step outside the pattern and reshape it.

The self is a pattern. Awareness sees the pattern. When the pattern dissolves, what remains is silent witnessing.

Done in Blender/Three.js

[jpmavo @jp_mavo]

@GururajSanjog Everything is a mental state. You choose what forces are acting upon that state.

[jpmavo @jp_mavo]

In computer animation, we simulate physics using ordinary differential equations by defining a state x (an object’s position, velocity, rotation, etc.) and a dynamics function f that computes the instantaneous change in state given the current state and applied forces. Starting from an initial state x₀ (frame 0), we step forward in small time increments, repeatedly updating the state to create an animation. This can be thought of as following a vector field: at each possible state, f provides an arrow indicating the system’s next change, and the simulation traces those arrows over time.

I see this as somewhat analogous to human experience. At any moment, a person occupies a state, acted upon by many forces—pushes from the past (conditioned reflexes, trauma, family systems, culture) and pulls from the future (goals, desires, purpose, who we are trying to become). Notably, these psychological forces are not fixed. Any moment can serve as a new initial state: keep the same dynamics and you continue along the existing trajectory; change the psychological forces and the trajectory changes too.

Sometimes these forces conflict: split-off parts of the psyche—complexes, subpersonalities, ego states—each carry their own needs and protective strategies, each vying to take control at different times. Seemingly autonomous, they pull in opposing directions, creating internal resistance throughout the system.

Unification occurs when these forces no longer compete. The system’s dynamics simplify: the separate parts become integrated and coordinated, no longer divided in their aims, and the trajectory becomes coherent.

The end state of this life animation is unification.

Done in p5.js

[jpmavo @jp_mavo]

@GururajSanjog Positive sum games

[jpmavo @jp_mavo]

Full Blackhole Scene - Done in Blender

[jpmavo @jp_mavo]

Blackhole/Worm Hole Testing - Done in Blender

[jpmavo @jp_mavo]

A color has many faces - with Keyframes