Andy Yeckel Design
Andy Yeckel Design

Portfolio / TiltView 3D Prototype Project 50 of 78   ☚ Prev | Next ☛

TiltView 3D Prototype

TiltView is a Silverlight 3 prototype demonstrating basic real-time tilt and pseudo-3D effects driven by mouse interaction. The interface calculates rotation offsets from cursor movements, updating dynamically to simulate depth with subtle 3D transforms and gradient highlights.

Core Technical Implementation

Mouse movements captured on the main page drive rotations:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
    Point pt = e.GetPosition(null);
    cX = CalculatePos(pt.Y, this.ActualHeight, -5);
    cY = -(CalculatePos(pt.X, this.ActualWidth, -5));
}

A timer updates rotation each frame at ~24 FPS:

void _timer_Tick(object sender, EventArgs e)
{
    _planes[0].Rotate(_parent.cX, _parent.cY);
}

Tilt rotations are applied using PlaneProjection:

public void Rotate(double x, double y)
{
    proj.RotationX = RotateCap(x, 70);
    proj.RotationY = RotateCap(y, 70);
    proj.GlobalOffsetX += -y / 10;
    proj.GlobalOffsetY += x / 10;
}

Read the TiltView Code description: full PDF documentation.

  • TiltView 3D Prototype