GUI Concept #1 - Mouse-Directed Interface

subtle rotation of GUI elements to point towards the mouse; implying to the user a mouse-driven interface...

> element.yaw = ((element.x - mouse.x) / rotationMagnitude)
> element.pitch = ((mouse.y - element.y) / rotationMagnitude)

examples:
Crysis 3 (PC) - Main Menu GUI

EDIT:
added buffer between panels & canvas to provide each panel a centered pivot point, rather than a top-left one

by hemingway 27 Mar 2013

Talk

makc3d at 30 Mar 2013 13:53
they are watching me. except when I move the mouse out - there's a glitch.
hemingway at 31 Mar 2013 11:21
lol? http://www.nelsond8.com/?p=515 & they are meant to rotate the opposite of your direction if panned in upon, making the distance to whatever gui elements within intuitively shorter to move your mouse to.

Tags

Mockup, UI, Wireframing gui shape ui
Embed

/**
 * Copyright hemingway ( http://wonderfl.net/user/hemingway )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/gHBd
 */

package
{
    import flash.display.*;
    import flash.filters.*;
    import flash.events.*;
    import flash.utils.*;
    import flash.geom.*;

    public class Main extends Sprite
    {
        private var _output :Output;
        private var _panelBuffer :Sprite;
        private var _panel :Panel;

        protected var _rotDenom :int;
        protected var _prevMouse :Point;
        protected var _currMouse :Point;
        
        public function Main()
        {
            addEventListener(Event.ADDED_TO_STAGE, addedToStage);
        
            _output = new Output("GUI Concept #1\n----------------------\n\nMove your mouse across the canvas to observe\nthe panels subtly rotating in the direction of the mouse\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe solution for this can be applied to n-dimensional objects\nand implements as follows for two-dimensional objects:\n\n> element.yaw = ((element.x - mouse.x) / rotationMagnitude)\n> element.pitch = ((mouse.y - element.y) / rotationMagnitude)");
            
            _rotDenom = 16;
            _prevMouse = new Point();
            _currMouse = new Point();
        }
        
        public function addedToStage($e:*) :void
        {
            removeEventListener(Event.ADDED_TO_STAGE, addedToStage);    
            
            addChild(_output);
            
            for (var $x:int = 1; $x<=3; $x++)
            {
                for (var $y:int = 1; $y<=3; $y++)
                {
                    _panelBuffer = new Sprite();
                    _panelBuffer.x = ($x*93+46.5);
                    _panelBuffer.y = ($y*93+46.5);
                    _panel = new Panel(); 
                    _panel.x -= 46.5;
                    _panel.y -= 46.5;
                    
                    _panelBuffer.addChild(_panel);                    
                    addChild(_panelBuffer); 
                }
            }

            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        }
        
        public function onMouseMove($e:MouseEvent) :void
        {
            _currMouse = new Point($e.stageX, $e.stageY);

            if (_prevMouse != null)
            {
                for (var $:int = 1; $<numChildren; $++)
                {
                    var $panel :Object = getChildAt($);
                
                    $panel.rotationY = int(($panel.x-_currMouse.x)/_rotDenom);
                    $panel.rotationX = int((_currMouse.y-$panel.y)/_rotDenom);
                }
            }    
            
            _prevMouse = _currMouse;
        }
    }
}

import flash.display.*;
import flash.filters.*;
import flash.events.*;
import flash.utils.*;
import flash.geom.*;
import flash.text.*;

class Panel extends Sprite
{
    protected var _color :Number;
    
    public function Panel()
    {
        addEventListener(Event.ADDED_TO_STAGE, addedToStage);
        
        _color = 0xCCCCCC;
    }
    
    public function addedToStage($e:*) :void
    {
        removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
        
        init();
        
        addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
        addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
        stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
        stage.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
    }
    
    public function init() :void
    {
        graphics.clear();
        graphics.beginFill(_color);
        graphics.drawRect(0, 0, 88, 88);
        graphics.endFill();
    }
    
    public function onMouseOver($e:MouseEvent) :void
    {
        (color != 0x999999) ? color = 0xBBBBBB : null;
    }
    
    public function onMouseDown($e:MouseEvent) :void
    {
        color = 0x999999;
    }
    
    public function onMouseOut($e:MouseEvent) :void
    {
        (color != 0x999999) ? color = 0xCCCCCC : null;  
    }
    
    public function onMouseUp($e:MouseEvent) :void
    {
        color = 0xCCCCCC;
    }
    
    public function get color() :Number
    {return _color}
    
    public function set color($:Number) :void
    {_color = $; init()}
}

class Output extends TextField
{
    private var textFormat :TextFormat;
        
    protected var _x :Number;
    protected var _y :Number;
    protected var _font :String;
    protected var _content :String;
        
    public function Output($content:String, $x:Number = 1, $y:Number = 0, $font:String = "Helvetica")
    {
        addEventListener(Event.ADDED_TO_STAGE, addedToStage);
            
        _x = $x;
        _y = $y;
        _font = $font;
        _content = $content;
            
        multiline = true;
        autoSize = "left";
        selectable = mouseEnabled = false;
        antiAliasType = AntiAliasType.ADVANCED;
    }
        
    public function _init() :void
    {
        x = _x;
        y = _y;
        text = _content;
            
        textFormat = new TextFormat(_font);
        setTextFormat(textFormat);
    }
        
    public function addedToStage($e:Event) :void
    {
        removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
            
        _init(); 
    }
        
    public function get font() :String
    { return _font }
    public function get nWidth() :Number
    { return width }
        
    public function set font($:String) :void
    { _font = $; _init() }
    public function set content($:String) :void
    { _content = $; _init() }
}