Sixspeedmedia.com – Interactive Carousel Website (2002–2003)

Sixspeedmedia.com is an interactive Flash-based portfolio website, continuously live and fully functional since early 2003. Initially developed as a student project at the Art Institute of Seattle, it introduced multiple foundational innovations in interactive web design—features that today are recognized as standard components of kinetic user interfaces.

Technical Details & Innovations

Elliptical Carousel Navigation

One core innovation of Sixspeedmedia.com was the elliptical carousel navigation. UI elements were dynamically positioned using ellipse mathematics, creating an intuitive, space-efficient navigation system that dynamically scales to accommodate varying amounts of content.

Physics-Based Interactions (DiffX Method)

Sixspeedmedia.com was among the first web interfaces to implement realistic physics-based scrolling, employing a unique DiffX inertia method. This method calculates motion based on differences between mouse positions captured at precise intervals, applying decay (friction) for natural-feeling movement:

// Original DiffX inertia method (ActionScript, 2003)
function moveClipAroundCircle(theClip) {
    theClip.then = theClip.now;
    theClip.now = getTimer();
    var elapsed = theClip.now - theClip.then;
    var numSeconds = elapsed / 1000;

    mouseX = (_xmouse - 500) * _root.speed;

    if (_xmouse < 100) mouseX /= 20;
    else if (_xmouse > 1000) mouseX /= (_xmouse / (_xmouse / 3));
    if (_xmouse > 900 || _ymouse < 1) mouseX = 10;

    var degreeIncrement = mouseX * numSeconds;
    theClip.theta += degreeIncrement;
    theClip.theta %= 360;

    var radians = degreesToRadians(theClip.theta);
    var xOnEllipse = theClip.ellipseWidth * (Math.cos(radians) * theClip.radius);
    var yOnEllipse = theClip.ellipseHeight * (Math.sin(radians) * theClip.radius);

    var rotationRadian = degreesToRadians(theClip.rotationTheta);
    var rotatedX = xOnEllipse * Math.cos(rotationRadian) - yOnEllipse * Math.sin(rotationRadian);
    var rotatedY = xOnEllipse * Math.sin(rotationRadian) + yOnEllipse * Math.cos(rotationRadian);

    theClip._x = theClip.centerX + rotatedX;
    theClip._y = theClip.centerY - rotatedY;
}

Data-Driven Modular Content (XML)

Content was dynamically loaded from external XML data files, making updates straightforward without recompiling the Flash file. This modular architecture anticipated current content management practices.

Real-Time Visual Effects

The interface utilized experimental RGB-channel shifts and blur transitions to provide engaging visual feedback. These effects were accomplished in real-time without external plugins, pushing the limits of Flash's capabilities at that time.

Scalable UI Techniques

Scalable layouts were achieved through single-pixel-stretching methods and layered vector graphics, allowing the UI to adapt fluidly to various resolutions and screen sizes, prefiguring contemporary responsive design techniques.

Historical Timeline

• May 2002: Initial interactive concept documented (Data-driven UI).
• August 2002: Domain registration (sixspeedmedia.com).
• Late 2002: First elliptical carousel prototypes created, using early DiffX inertia methods.
• January 2003: Site publicly accessible, initial inertia implementation active.
• March 2003 (v0.8): Comprehensive implementation of elliptical carousel, RGB transitions, modular data-driven XML content.
• October 2003: Experimental mobile WML version released, demonstrating early cross-platform thinking.

Continued Availability & Modern Performance

Uniquely, Sixspeedmedia.com remains continuously live and fully operational since its initial launch in 2003, currently hosted at ayeckel.com/student-portfolio/index1.html. It performs exceptionally well on contemporary devices, running smoothly at approximately 100 FPS with touch interactions fully supported, exactly as originally designed.

Historical Documentation and Original Sources

The complete and detailed technical documentation, including version history, code samples, and original specifications, is available to verify authenticity and historical accuracy:

• Sixspeedmedia.com Original Development Documentation (2002–2003, PDF)

Influence and Lineage

The methods first demonstrated by Sixspeedmedia.com directly influenced subsequent development efforts in interactive and multi-touch UI design, including Silverlight-based multi-touch experiments. Most notably, the inertia methods from Sixspeedmedia's DiffX technique evolved directly into gesture-processing APIs later licensed and adopted by Microsoft's Windows Presentation Foundation (WPF) multi-touch Manipulation Processor. This clear lineage, verifiable through preserved documents and continuous hosting of the original site, establishes Sixspeedmedia.com's significant place within the historical evolution of kinetic and interactive user interfaces.