Lax Area: Designing With Duct Tape and On a regular basis Chaos

The Why & Inspiration

After a collection of economic tasks that had been extra sensible than playful, I made a decision to make use of my portfolio website as an area to experiment with new concepts. My targets had been clear: one, it needed to be interactive and include 3D parts. Two, it wanted to seize your consideration. Three, it needed to carry out properly throughout completely different gadgets.

How did the thought for my website come about? On a regular basis moments. In the bathroom, to be actual. My curious 20-month-old barged in after I was utilizing the bathroom sooner or later and gleefully unleashed an extended path of bathroom paper throughout the ground. The scene was chaotic, humorous and oddly pleasant to look at. Because the mess grew, so did the thought: this type of playful, nearly mischievous, interplay with an object might be reimagined as a digital expertise.

In fact, rest room paper wasn’t fairly the precise match for the aesthetic, so the thought pivoted to duct tape. Duct tape was cooler and extra in tune with the power the mission wanted. With the idea locked in, the method moved to sketching, designing and coding.

Design Rules

With duct tape unraveling throughout the display, issues may simply really feel chaotic and visually heavy. To steadiness that power, the interface was stored deliberately easy and clear. The aim was to let the visuals take middle stage whereas giving customers loads of white house to wander and play.

There’s additionally a layer of interplay woven into the expertise. Animations reply to person actions, creating a way of motion and interactivity. Hidden touches, like the choice to rewind, orbit round parts, or a blinking dot that alerts unseen tasks.

Hitting spacebar rewinds the roll in order that it could actually draw a brand new path once more.

Hitting the tab key unlocks an orbit view, permitting the scene to be explored from completely different angles.

Constructing the Expertise

Constructing an immersive, interactive portfolio is one factor. Making it carry out easily throughout gadgets is one other. Almost 70% of the trouble went into refining the expertise and squeezing out each drop of efficiency. The result’s a website that feels playful on the floor, however beneath the hood, it’s powered by a collection of programs constructed to maintain issues quick, responsive, and accessible.

01. Actual-time path drawing

The core magic lies in real-time path drawing. Mouse or contact actions are captured and projected into 3D house by way of raycasting. Factors are smoothed with Catmull-Rom curves to create flowing paths that really feel pure as they unfold. Geometry is generated on the fly, giving every person a singular drawing that may be rewound, replayed, or explored from completely different angles.

02. BVH raycasting

To maintain these interactions quick, BVH raycasting steps in. As a substitute of testing each triangle in a scene, the system checks bigger bounding packing containers first, decreasing 1000’s of calculations to only a few. Usually reserved for sport engines, this optimization brings advanced geometry into the browser at easy 60fps.

// First, we make our geometry "good" by including BVH acceleration
useEffect(() => {
  if (planeRef.present && !bvhGenerated.present) {
    const aircraft = planeRef.present
    
    // Step 1: Create a BVH tree construction for the aircraft
    const generator = new StaticGeometryGenerator(aircraft)
    const geometry = generator.generate()
    
    // Step 2: Construct the acceleration construction
    geometry.boundsTree = new MeshBVH(geometry)
    
    // Step 3: Change the previous geometry with the BVH-enabled model
    if (aircraft.geometry) {
      aircraft.geometry.dispose() // Clear up previous geometry
    }
    aircraft.geometry = geometry
    
    // Step 4: Allow quick raycasting
    aircraft.raycast = acceleratedRaycast
    
    bvhGenerated.present = true
  }
}, [])

03. LOD + dynamic system detection

The system detects the capabilities of every system, GPU energy, out there reminiscence, even CPU cores, and adapts high quality settings on the fly. Excessive-end machines get the complete expertise, whereas cell gadgets get pleasure from a leaner model that also feels fluid and fascinating.

const [isLowResMode, setIsLowResMode] = useState(false)
const [isVeryLowResMode, setIsVeryLowResMode] = useState(false)

// Detect low-end gadgets and allow low-res mode
useEffect(() => {
  const detectLowEndDevice = () => {
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.check(navigator.userAgent)
    const isLowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory < 4
    const isLowCores = (navigator as any).hardwareConcurrency && (navigator as any).hardwareConcurrency < 4
    const isSlowGPU = /(Intel|AMD|Mali|PowerVR|Adreno)/i.check(navigator.userAgent) && !/(RTX|GTX|Radeon RX)/i.check(navigator.userAgent)

    const canvas = doc.createElement('canvas')
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext | null
    let isLowEndGPU = false
    let isVeryLowEndGPU = false

    if (gl) {
      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
      if (debugInfo) Intel HD 3000
    }

    const isVeryLowMemory = (navigator as any).deviceMemory && (navigator as any).deviceMemory < 2
    const isVeryLowCores = (navigator as any).hardwareConcurrency && (navigator as any).hardwareConcurrency < 2

    const shouldEnableVeryLowRes = isVeryLowMemory || isVeryLowCores || isVeryLowEndGPU
    
    if (shouldEnableVeryLowRes) {
      setIsVeryLowResMode(true)
      setIsLowResMode(true)
    } else if (isMobile || isLowMemory || isLowCores || isSlowGPU || isLowEndGPU) {
      setIsLowResMode(true)
    }
  }

  detectLowEndDevice()
}, [])

04. Preserve-alive body system + throttled geometry updates

To ensures easy efficiency with out draining batteries or overloading CPUs. Frames render solely when wanted, then maintain a gradual rhythm after interplay to maintain the whole lot responsive. It’s this steadiness between playfulness and precision that makes the positioning really feel easy for the person.

The Creator

Lax Area is a mix of my identify, Lax, and a Area devoted to creativity. It’s each a portfolio and a playground, a hub the place design and code meet in a enjoyable, playful and stress-free means.

Initially from Singapore, I launched into artistic work there earlier than relocating to Japan. My goals had been easy: discover new concepts, study from completely different views and problem previous methods of pondering. Being surrounded by a few of the most inspiring creators from Japan and past has pushed my work additional creatively and technologically.

Design and code type a part of my toolkit, and mixing them collectively makes it potential to craft experiences that steadiness perform with aesthetics. Each mission is an opportunity to strive one thing new, experiment and push the boundaries of digital design.

I’m eager to connecting with different creatives. If one thing at Lax Area piques your curiosity, let’s chat!