├── README.md
├── demo
    ├── CoolGear.png
    ├── demo.html
    └── wait.gif
├── jqCube.html
├── jqCube.jquery.js
└── jqCube.jquery.min.js


/README.md:
--------------------------------------------------------------------------------
  1 | jqCube
  2 | ======
  3 | 
  4 | **jqCube** is a [jQuery](http://jquery.com/) library for adding cubes to pages, such as the one pictured below. 
  5 | A full API is included for manipulating these cubes, allowing you to change its colors, dimensions, and animate it. You can put any content you like on each side of the cube.
  6 | 
  7 | You can [play around with the API-accessible features on this playground page](http://peterolson.github.com/jqCube/jqCube.html)
  8 | 
  9 | ![Screenshot of web form on green rotating cube](http://i.stack.imgur.com/zMebo.png)
 10 | 
 11 | Background
 12 | ===
 13 | 
 14 | You can read some [extended discussion about the user interface implications of rotating cubes](http://ux.stackexchange.com/q/11229/3966). Having seen it's popularity there among user interface professionals, I have decided to release it as an open source project so that anybody can include cubes in their own websites.
 15 | 
 16 | How to Use
 17 | ===
 18 | 
 19 | You can download the source files by cloning this repository, or just copying it from this GitHub hosted url:
 20 | 
 21 |     http://peterolson.github.com/jqCube/jqCube.jquery.min.js
 22 | 
 23 | Include it as a script on your page. It depends on jQuery, so make sure you include it *after* jQuery.
 24 | 
 25 | Create a div on your page, and include six divs inside of it, and each should have one of the classes "front", "back", "left", "right", "bottom", "top", like this:
 26 | 
 27 |     <div id="myCube">
 28 |       <div class="front">Front Side</div>
 29 |       <div class="back">Back Side</div>
 30 |       <div class="left">Left Side</div>
 31 |       <div class="right">Right Side</div>
 32 |       <div class="bottom">Bottom Side</div>
 33 |       <div class="top">Top Side</div>
 34 |     </div>
 35 | 
 36 | Then you can make `myCube` into a cube. For default settings, just call `.cube` on a jQuery element with no arguments.
 37 | 
 38 |     $("#myCube").cube();
 39 | 
 40 | If you want to initialize the cube with custom settings, you can pass a settings object as an argument.
 41 | 
 42 |     $("#myCube").cube({ /* settings */ });
 43 | 
 44 | Settings
 45 | ===
 46 | 
 47 | `length`, `width`, `height`
 48 | ---
 49 | Sets the dimensions of the cube in pixels with these three settings.
 50 | 
 51 | **Expected Value**: Integer<br>
 52 | **Default:** `400`
 53 | 
 54 | `center`
 55 | ---
 56 | Sets the center point of the cube. Defined by pixel offsets to the left and top of the page.
 57 | 
 58 | **Expected Value**: [Integer, Integer]<br>
 59 | **Default**: `[300, 300]`
 60 | 
 61 | 
 62 | `lightDirection`
 63 | ---
 64 | Sets the direction light comes from. Defined by a proportion of [lightFromRight, lightFromTop, lightFromFront] facing toward the cube. You can use negative values to reverse the direction.
 65 | 
 66 | **Expected Value**: [Number, Number, Number]<br>
 67 | **Default**: `[1, 1, 1]`
 68 | 
 69 | `hue`
 70 | ---
 71 | Sets the hue of the cube.
 72 | 
 73 | **Expected Value**: Integer in range [0, 255]<br>
 74 | **Default**: `128`
 75 | 
 76 | `saturation`
 77 | ---
 78 | Sets the saturation of the cube.
 79 | 
 80 | **Expected Value**: Integer in range [0, 100]<br>
 81 | **Default**: `50`
 82 | 
 83 | `opacity`
 84 | ---
 85 | Sets the opacity/transparency of the cube. 0 is transparent, and 100 is opaque.
 86 | 
 87 | **Expected Value**: Integer in range [0, 100]<br>
 88 | **Default**: `100`
 89 | 
 90 | `minLuminosity`
 91 | ---
 92 | Sets the luminosity of the darkest face of the cube.
 93 | 
 94 | **Expected Value**: Integer in range [0, 100]<br>
 95 | **Default**: `50`
 96 | 
 97 | `maxLuminosity`
 98 | ---
 99 | Sets the luminosity of the brightest face of the cube.
100 | 
101 | **Expected Value**: Integer in range [0, 100]<br>
102 | **Default**: `85`
103 | 
104 | `animate`
105 | ---
106 | Boolean indicating whether the cube will animate.
107 | 
108 | **Expected Value**: Boolean<br>
109 | **Default**: `true`
110 | 
111 | `frameRate`
112 | ---
113 | Sets the number of frames drawn per second when the cube animates.
114 | 
115 | **Expected Value**: Integer<br>
116 | **Default**: `20`
117 | 
118 | `secondsPerRotation`
119 | ---
120 | Sets the approximate time in seconds it will take the cube to rotate fully about one axis at default spinning speed.
121 | 
122 | **Expected Value**: Integer<br>
123 | **Default**: `5`
124 | 
125 | `initialPosition`
126 | ---
127 | Sets the initial position of the cube in terms of 90 degree [turnsRight, turnsUp] from the default position where the front side is facing forward with the top, bottom, left, and right sides respectively above, below, left, and right of the front side. You can use non-integers to specify partial turns.
128 | 
129 | **Expected Value**: [Number, Number]<br>
130 | **Default**: `[0, 0]`
131 | 
132 | `horizontalCoefficient`
133 | ---
134 | The relative speed that the cube will rotate in a horizontal direction.
135 | 
136 | **Expected Value**: Number<br>
137 | **Default**: `1`
138 | 
139 | `verticalCoeficcient`
140 | ---
141 | The relative speed that the cube will rotate in a vertical direction.
142 | 
143 | **Expected Value**: Number<br>
144 | **Default**: `1`
145 | 
146 | Methods
147 | ===
148 | `setOption(property, value)`
149 | ---
150 | Used to dynamically change the cube's settings.
151 | 
152 | `startAnimation()`
153 | ---
154 | Starts animating the cube
155 | 
156 | `stopAnimation()`
157 | ---
158 | Stops animating the cube
159 | 
160 | `setPosition(position, time, framesPerSecond)`
161 | ---
162 | Moves the cube to the specified position (see `initialPosition` setting) in the given time in seconds at the given frames per second. Accepts face names (`"front", "back", "left", "right", "top", "botton"`) as positions.
163 | 
164 | `moveRight(turns, time, framesPerSecond)`
165 | ---
166 | Turns the cube the given number of turns to the right in the given time in seconds at the given number of frames per second.
167 | 
168 | `moveLeft(turns, time, framesPerSecond)`
169 | ---
170 | Turns the cube the given number of turns to the left in the given time in seconds at the given number of frames per second.
171 | 
172 | `moveUp(turns, time, framesPerSecond)`
173 | ---
174 | Turns the cube the given number of turns upward in the given time in seconds at the given number of frames per second.
175 | 
176 | `moveDown(turns, time, framesPerSecond)`
177 | ---
178 | Turns the cube the given number of turns downward in the given time in seconds at the given number of frames per second.
179 | 
180 | `move([turnsRight, turnsUp], time, framesPerSecond)`
181 | ---
182 | Turns the cube the given number of turns in the horizontal and vertical directions at the same time in the given time in seconds at the given number of frames per second. Negative numbers may be used to turn left or down.
183 | 
184 | 


--------------------------------------------------------------------------------
/demo/CoolGear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterolson/jqCube/e5be3c64c7817f9ada60d2033c96af1b263699d0/demo/CoolGear.png


--------------------------------------------------------------------------------
/demo/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  4 | <head>
  5 |     <title>Fill out customer form</title>
  6 |     <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  7 |     <script src="../jqCube.jquery.min.js"></script>
  8 |     <style>
  9 |         h1 {
 10 |             font-size: 24pt;
 11 |         }
 12 | 
 13 |         img {
 14 |             width: 75px;
 15 |         }
 16 | 
 17 |         .left img {
 18 |             width: 100%;
 19 |         }
 20 | 
 21 |         #myCube div {
 22 |             border: 1px solid black;
 23 |         }
 24 | 
 25 |         marquee {
 26 |             color: red;
 27 |         }
 28 | 
 29 |         button {
 30 |             width: 90%;
 31 |             height: 80%;
 32 |             font-size: 50pt;
 33 |         }
 34 |     </style>
 35 | </head>
 36 | <body>
 37 |     <div id="myCube">
 38 |         <div class="top">
 39 |             Please wait while we process a request that you never made:
 40 |  
 41 |             <center><img src="wait.gif"/></center>
 42 |             While you are waiting, please do what you typically do while you are waiting for something to happen. Thank you. :)<br><br>
 43 |         </div>
 44 |         <div class="bottom">
 45 |             <strong>For your convenience, please fill out the following information. :)</strong>
 46 |             <table>
 47 |                 <tr>
 48 |                     <td>
 49 |                         Username:
 50 |      
 51 |                     </td>
 52 |                     <td>
 53 |                         <input type="text" />
 54 |                     </td>
 55 |                 </tr>
 56 |                 <tr>
 57 |                     <td>
 58 |                         Password:
 59 |      
 60 |                     </td>
 61 |                     <td>
 62 |                         <input type="password" />
 63 |                     </td>
 64 |                 </tr>
 65 |                 <tr>
 66 |                 <tr>
 67 |                     <td>
 68 |                         Confirm password:
 69 |      
 70 |                     </td>
 71 |                     <td>
 72 |                         <input type="password" />
 73 |                     </td>
 74 |                 </tr>
 75 |                 <tr>
 76 |                     <td>
 77 |                         Social Security Number:
 78 |      
 79 |                     </td>
 80 |                     <td>
 81 |                         <input type="text" />
 82 |                     </td>
 83 |                 </tr>
 84 |                 <tr>
 85 |                     <td>
 86 |                         Security Question:
 87 |      
 88 |                     </td>
 89 |                     <td>
 90 |                         <input type="text" />
 91 |                     </td>
 92 |                 </tr>
 93 |                 <tr>
 94 |                 <tr>
 95 |                     <td>
 96 |                         Security Answer:
 97 |      
 98 |                     </td>
 99 |                     <td>
100 |                         <input type="text" />
101 |                     </td>
102 |                 </tr>
103 |                 <tr>
104 |                 <tr>
105 |                     <td>
106 |                         Telephone Number:
107 |      
108 |                     </td>
109 |                     <td>
110 |                         <input type="text" />
111 |                     </td>
112 |                 </tr>
113 |                 <tr>
114 |                     <td>
115 |                         Street Address:
116 |      
117 |                     </td>
118 |                     <td>
119 |                         <input type="text" />
120 |                     </td>
121 |                 </tr>
122 |                 <tr>
123 |                     <td>
124 |                         City:
125 |      
126 |                     </td>
127 |                     <td>
128 |                         <input type="text" />
129 |                     </td>
130 |                 </tr>
131 |                 <tr>
132 |                 <tr>
133 |                     <td>
134 |                         State:
135 |      
136 |                     </td>
137 |                     <td>
138 |                         <select>
139 |                         <optgroup label="Select a state!!!">
140 |                         <option>Texas</option>
141 |                         <option>Florida</option>
142 |                         <option>Montana</option>
143 |                         <option>Anywhere else</option>
144 |                         </optgroup>
145 |                         </select>
146 |                     </td>
147 |                 </tr>
148 |                 <tr>
149 |             </table>
150 |             We feel sorry for our customers who live "Anywhere else".
151 |         </div>
152 |         <div class="front">
153 |             When you feel you are ready to submit you information, please click the submit button that is below (or above or sideways...it really depends on the orientation of the cube):
154 |  
155 |             <button onclick="alert('Sorry, the information you provided was incorrect.');">SUBMIT
156 |   </button>
157 |         </div>
158 |         <div class="back">
159 |             <marquee><h2>Important Legal Information!!!</h2></marquee>
160 |             <strong>The software is for evaluation purposes only. You may not distribute any
161 | program you develop with the software. • Included CoolGear Programs. These
162 | license terms apply to all CoolGear programs included with the software. •
163 | Third Party Programs. The software contains third party programs. The license
164 | terms with those programs apply to your use of them.2. INTERNET-BASED SERVICES.
165 | CoolGear provides Internet-based services with the software. It may change or
166 | cancel them at any time. 3. TIME-SENSITIVE SOFTWARE.
167 |                 <marquee>The software will stop
168 |      running on 15 March 2008. You will not receive any other notice.</marquee>
169 |                 You may not be
170 | able to access data used with the software when it stops running. 4. PRE-RELEASE
171 | SOFTWARE. This software is a pre-release version. It may not work the way a
172 | final version of the software will. We may change it for the final, commercial
173 |      version. We also may not release a commercial version.</strong>
174 |         </div>
175 |         <div class="right">
176 | 
177 |             <h1>Sign Up</h1>
178 |             <p>We at Cool<i>Gear</i> think that our customers deserve the best.
179 |     We are not completely agreed on what exactly <i>best</i> means, but we won't let that hinder our meaningless idealism.</p>
180 |             <p>But since we think our customers deserve the best, and presumably you would like to be a recipient of whatever the best is,
181 |     we think it is reasonable to conclude that you would like to be one of our customers.</p>
182 |             <p>So, start filling out your information, already, and become one of our customers, so you can be one among those whom we thing deserve the best!</p>
183 |             <p>Really, go fill out your information. We won't bite.</p>
184 |         </div>
185 |         <div class="left">
186 |             <img src="CoolGear.png">
187 |             <i><b>We're cool because we care about gear and care about our customers.</b></i><br>
188 |             <br>
189 |             <marquee>Our Mission Statement: </marquee>
190 |             deliver bleeding-edge e-markets, streamline B2C Related Interoperability,
191 |   transition one-to-one action-items, delayered transparent cloud applications, productize 24/7 relationships,
192 |    mesh dynamic mindshare, grow plug-and-play web-readiness and innovate real-time experiences.
193 |         </div>
194 |     </div>
195 |     <script>
196 |         $(function () {
197 |             $("#myCube").cube({
198 |                 hue: 115,
199 |                 saturation: 100,
200 |                 minLuminosity: 50,
201 |                 maxLuminosity: 80,
202 |                 horizontalCoefficient: Math.PI / 6 - (0.5 + 1 % (2 * Math.PI)),
203 |                 verticalCoefficient: Math.PI / 6 + ((2 * Math.PI)),
204 |                 lightDirection: [[1 / Math.sqrt(3)], [1 / Math.sqrt(3)], [1 / Math.sqrt(3)]]
205 |             });
206 |         });
207 | </script>
208 | </body>
209 | </html>
210 | 


--------------------------------------------------------------------------------
/demo/wait.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterolson/jqCube/e5be3c64c7817f9ada60d2033c96af1b263699d0/demo/wait.gif


--------------------------------------------------------------------------------
/jqCube.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 |   <head><title>Rotating Cube</title>
  5 |   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  6 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  7 |   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
  8 |   <script src="jqCube.jquery.min.js"></script>
  9 | 
 10 | <style>
 11 |   h1
 12 |   {
 13 |       text-align: center;
 14 |       font-size: 38pt;
 15 |   }
 16 |   #cube div
 17 |   {
 18 |       border: 1px solid black;
 19 |   }
 20 | 
 21 |   #text
 22 |   {
 23 |       position: absolute;
 24 |       left: 200px;
 25 |       top: 200px;
 26 |       display:none;
 27 |   }
 28 | 
 29 |   #settings
 30 |   {
 31 |       float:right;
 32 |   }
 33 | </style>
 34 | </head><body>
 35 | <div id="text"><h1>Background<br />text</h1></div>
 36 | <div id="cube">
 37 | <div class="top">
 38 | <h1>Top</h1>
 39 | </div>
 40 | <div class="bottom">
 41 | <h1>Bottom</h1>
 42 | </div>
 43 | <div class="front">
 44 | <h1>Front</h1>
 45 |       </div>
 46 | <div class="back">
 47 | <h1>Back</h1>
 48 | </div>
 49 | <div class="right">
 50 | <h1>Right</h1>
 51 | </div>
 52 | <div class="left">
 53 | <h1>Left</h1>
 54 | </div>
 55 | </div>
 56 | <div id="settings">
 57 | Length: <input type="text" id="length" value="400" />px<br />
 58 | Width: <input type="text" id="width" value="400"/>px<br />
 59 | Height: <input type="text" id="height" value="400"/>px<br />
 60 | Center: <input type="text" id="center" value="[300, 300]" /><br />
 61 | <br />
 62 | Light Direction: <input type="text" id="lightDirection" value="[1, 1, 1]" /><br />
 63 | Min Luminosity: <span class="minLuminosity">50</span>% <div class="slider" id="minLuminosity" data-min="0", data-max="100" data-value="50"></div>
 64 | Max Luminosity: <span class="maxLuminosity">85</span>% <div class="slider" id="maxLuminosity" data-min="0", data-max="100" data-value="85"></div>
 65 | Hue: <span class="hue">128</span> <div class="slider" id="hue" data-min="0", data-max="255" data-value="128"></div>
 66 | Saturation: <span class="saturation">50</span>% <div class="slider" id="saturation" data-min="0", data-max="100" data-value="50"></div>
 67 | Opacity: <span class="opacity">100</span>% <div class="slider" id="opacity" data-min="0", data-max="100" data-value="100"></div>
 68 | <br />
 69 | Turn <span id="turn"><button id="moveLeft">Left</button><button id="moveRight">Right</button><button id="moveUp">Up</button><button id="moveDown">Down</button></span><br />
 70 | Face <span id="face"><button id="front">Front</button><button id="right">Right</button><button id="left">Left</button><button id="back">Back</button><button id="top">Top</button><button id="bottom">Bottom</button></span>
 71 | <br />
 72 | Animate: <input type="checkbox" id="animate" checked /><br />
 73 | Frames per second: <input type="text" id="frameRate" value="20"/><br />
 74 | Seconds per rotation: <input type="text" id="secondsPerRotation" value="5"/><br />
 75 | Horizontal rate: <input type="text" id="horizontalCoefficient" value="1"/><br />
 76 | Vertical rate: <input type="text" id="verticalCoeficcient" value="1"/><br />
 77 | Change HTML on <select id="faceSelector">
 78 | <option value="#cube .front">Front</option>
 79 | <option value="#cube .back">Back</option>
 80 | <option value="#cube .right">Right</option>
 81 | <option value="#cube .left">Left</option>
 82 | <option value="#cube .top">Top</option>
 83 | <option value="#cube .bottom">Bottom</option>
 84 | </select><br />
 85 | <textarea id="faceHTML" rows="7" cols="40"></textarea>
 86 | </div>
 87 |       <script>
 88 |       	var cube = $("#cube").cube();
 89 | 
 90 |       	$("#turn button").click(function () {
 91 |       		cube[this.id](1);
 92 |       	});
 93 | 
 94 |       	$("#face button").click(function () {
 95 |       		cube.setPosition(this.id);
 96 |       	});
 97 | 
 98 |       	$("#animate").change(function () {
 99 |       		this.checked ? cube.startAnimation() : cube.stopAnimation();
100 |       	});
101 | 
102 |       	$("#settings input").change(function () {
103 |       		cube.setOption(this.id, $.parseJSON($(this).val()));
104 |       	});
105 | 
106 |       	$("#faceSelector").change(function () {
107 |       		$("#faceHTML").val($($(this).val()).html());
108 |       	});
109 |       	$("#faceSelector").change();
110 | 
111 |       	$("#faceHTML").keyup(function () {
112 |       		$($("#faceSelector").val()).html($(this).val());
113 |       	});
114 | 
115 |       	$(".slider").each(function () {
116 |       		var $this = $(this), id = this.id;
117 |       		$this.slider({
118 |       			change: function (e, ui) {
119 |       				cube.setOption(id, ui.value);
120 |       			},
121 |       			slide: function (e, ui) {
122 |       				$("#settings span." + id).html(ui.value);
123 |       			},
124 |       			max: $this.data("max"),
125 |       			min: $this.data("min"),
126 |       			value: $this.data("value")
127 |       		});
128 |       	});
129 | </script>
130 | </body></html>
131 | 


--------------------------------------------------------------------------------
/jqCube.jquery.js:
--------------------------------------------------------------------------------
  1 | (function ($) {
  2 | 	$.fn.cube = function (settings) {
  3 | 		settings = settings || {};
  4 | 		var $this = this;
  5 | 		var length, width, height, brickCenter, lightVector, cubeColor, alpha, saturation, minLum, maxLum, lumFactor, frameRate, secondsPerRotation, xInit, yInit, xRate, yRate, cubeDiv, front, back, left, right, bottom, top, animating, ivl, num;
  6 | 
  7 | 		function or(l, r) {
  8 | 			return typeof l !== "undefined" ? l : r;
  9 | 		}
 10 | 
 11 | 		var positions = {
 12 | 			front: [0, 0],
 13 | 			left: [-1, 0],
 14 | 			right: [1, 0],
 15 | 			back: [2, 0],
 16 | 			top: [0, 1],
 17 | 			bottom: [0, -1]
 18 | 		};
 19 | 
 20 | 		function applySettings(settings) {
 21 | 			length = settings.length || length || 400;
 22 | 			width = settings.width || width || 400;
 23 | 			height = settings.height || height || 400;
 24 | 			brickCenter = settings.center || brickCenter || [300, 300];
 25 | 
 26 | 			lightVector = settings.lightDirection ? [[settings.lightDirection[0]], [settings.lightDirection[1]], [settings.lightDirection[2]]] : lightVector || [[1], [1], [1]];
 27 | 			cubeColor = or(settings.hue, or(cubeColor, 128));
 28 | 			alpha = or(settings.opacity, (or(alpha, 1) * 100)) / 100;
 29 | 			saturation = or(settings.saturation, or(saturation, 50));
 30 | 			minLum = or(settings.minLuminosity, or(minLum, 50));
 31 | 			maxLum = settings.maxLuminosity || maxLum || 85;
 32 | 			if (maxLum < minLum) maxLum = minLum;
 33 | 			lumFactor = maxLum - minLum;
 34 | 
 35 | 			frameRate = 1000 / (settings.frameRate || (1000 / frameRate) || 20);
 36 | 			secondsPerRotation = settings.secondsPerRotation || secondsPerRotation || 5;
 37 | 
 38 | 			xInit = (settings.initialPosition ? settings.initialPosition[0] : (xInit / (Math.PI * 2)) || 0) * Math.PI / 2;
 39 | 			yInit = (settings.initialPosition ? settings.initialPosition[1] : (yInit / (Math.PI * 2)) || 0) * Math.PI / 2;
 40 | 			xRate = or(settings.horizontalCoefficient, or(xRate, 1));
 41 | 			yRate = or(settings.verticalCoeficcient, or(yRate, 1));
 42 | 
 43 | 			cubeDiv = settings.element ? $(settings.element) : $this;
 44 | 			front = cubeDiv.find(".front");
 45 | 			back = cubeDiv.find(".back");
 46 | 			left = cubeDiv.find(".left");
 47 | 			right = cubeDiv.find(".right");
 48 | 			bottom = cubeDiv.find(".bottom");
 49 | 			top = cubeDiv.find(".top");
 50 | 			animating = settings.hasOwnProperty("animate") ? settings.animate : or(animating, true);
 51 | 			num = num || 0;
 52 | 			var n = num;
 53 | 			draw();
 54 | 			num = n;
 55 | 			if (animating) {
 56 | 				clearInterval(ivl);
 57 | 				ivl = setInterval(draw, frameRate);
 58 | 			}
 59 | 		}
 60 | 		applySettings(settings);
 61 | 
 62 | 		function increment() {
 63 | 			return 4 * Math.PI / (frameRate * secondsPerRotation);
 64 | 		};
 65 | 
 66 | 		function stopAnimation() {
 67 | 			clearInterval(ivl);
 68 | 			animating = false;
 69 | 			return $this;
 70 | 		}
 71 | 
 72 | 		function startAnimation() {
 73 | 			clearInterval(ivl);
 74 | 			ivl = setInterval(draw, frameRate);
 75 | 			animating = true;
 76 | 			return $this;
 77 | 		};
 78 | 
 79 | 		function setPosition(coords) {
 80 | 			if (positions[coords]) coords = positions[coords];
 81 | 			xInit = coords[0] * Math.PI / 2;
 82 | 			yInit = coords[1] * Math.PI / 2;
 83 | 			num = 0;
 84 | 			draw();
 85 | 		}
 86 | 
 87 | 		function movePosition(coords, time, fps) {
 88 | 			fps = fps || frameRate;
 89 | 			time = time !== false ? 1 : false;
 90 | 			var restart = animating, n = num;
 91 | 			stopAnimation();
 92 | 			var iterations = time * fps, timeout = 1000 / fps;
 93 | 			if (!time) iterations = 1;
 94 | 			var init = [xInit, yInit];
 95 | 			var xStep = coords[0] * Math.PI / 2 / iterations, yStep = coords[1] * Math.PI / 2 / iterations;
 96 | 			(function move(i) {
 97 | 				if (i < iterations) {
 98 | 					xInit += xStep;
 99 | 					yInit += yStep;
100 | 					draw();
101 | 					num = n;
102 | 					setTimeout(function () { move(i + 1); }, timeout);
103 | 					return;
104 | 				}
105 | 				if (restart) startAnimation();
106 | 			})(0);
107 | 			return $this;
108 | 		};
109 | 
110 | 		function moveHorizontally(n, time, fps) {
111 | 			movePosition([-n, 0], time, fps);
112 | 		}
113 | 
114 | 		function moveVertically(n, time, fps) {
115 | 			movePosition([0, -n], time, fps);
116 | 		}
117 | 
118 | 		function draw() {
119 | 			var qy = xInit + xRate * (num % (2 * Math.PI));
120 | 			var qx = yInit + yRate * (num % (2 * Math.PI));
121 | 			if (animating) num += increment();
122 | 			var rotationMatrix = rotationMatrixCalc(qx, qy);
123 | 			var baseReferanceFrameX = [[1], [0], [0]],
124 |             baseReferanceFrameY = [[0], [1], [0]],
125 |             baseReferanceFrameZ = [[0], [0], [1]];
126 | 
127 | 			//---Cube---
128 | 			drawRectangularSurface(front, brickCenter, [[0], [0], [length / 2]], height, width, [[1], [0], [0]], [[0], [1], [0]], qx, qy, cubeColor, lightVector);
129 | 			drawRectangularSurface(right, brickCenter, [[width / 2], [0], [0]], height, length, [[0], [0], [-1]], [[0], [1], [0]], qx, qy, cubeColor, lightVector);
130 | 			drawRectangularSurface(top, brickCenter, [[0], [height / 2], [0]], length, width, [[1], [0], [0]], [[0], [0], [-1]], qx, qy, cubeColor, lightVector);
131 | 			drawRectangularSurface(back, brickCenter, [[0], [0], [-length / 2]], height, width, [[-1], [0], [0]], [[0], [1], [0]], qx, qy, cubeColor, lightVector);
132 | 			drawRectangularSurface(left, brickCenter, [[-width / 2], [0], [0]], height, length, [[0], [0], [1]], [[0], [1], [0]], qx, qy, cubeColor, lightVector);
133 | 			drawRectangularSurface(bottom, brickCenter, [[0], [-height / 2], [0]], length, width, [[1], [0], [0]], [[0], [0], [1]], qx, qy, cubeColor, lightVector);
134 | 
135 | 			function drawRectangularSurface(surface, rotationPoint2D, centerPoint3D, height, width, directionX, directionY, viewAngleX, viewAngleY, surfColor, lightVector) {
136 | 				var rotationMatrix = rotationMatrixCalc(viewAngleX, viewAngleY);
137 | 				directionX = matrixMultiply(rotationMatrix, vectorNorm(directionX));
138 | 				directionY = matrixMultiply(rotationMatrix, vectorNorm(directionY));
139 | 				directionZ = vectorCross3D(directionX, directionY);
140 | 				var baseReferanceFrameX = [[1], [0], [0]],
141 |                 baseReferanceFrameY = [[0], [1], [0]],
142 |                 baseReferanceFrameZ = [[0], [0], [1]];
143 | 				surfaceMatrix = [[vectorDot(baseReferanceFrameX, directionX), vectorDot(baseReferanceFrameX, directionY), vectorDot(baseReferanceFrameX, directionZ)],
144 |                                                                                         [vectorDot(baseReferanceFrameY, directionX), vectorDot(baseReferanceFrameY, directionY), vectorDot(baseReferanceFrameY, directionZ)],
145 |                                                                                         [vectorDot(baseReferanceFrameZ, directionX), vectorDot(baseReferanceFrameZ, directionY), vectorDot(baseReferanceFrameZ, directionZ)]];
146 | 				centerPoint3D = matrixMultiply(rotationMatrix, centerPoint3D);
147 | 				var lightAngle = minLum + lumFactor * vectorDot(vectorNorm(lightVector), vectorNorm(directionZ));
148 | 				var placementX, placementY;
149 | 				if (directionZ[2][0] > 0) {
150 | 					placementX = rotationPoint2D[0] + centerPoint3D[0][0] - width / 2;
151 | 					placementY = rotationPoint2D[1] - centerPoint3D[1][0] - height / 2;
152 | 					surface.attr("style", "height: " + height + "px; width: " + width + "px;" + "background-color: hsla(" + surfColor + "," + saturation + "%," + lightAngle + "%," + alpha + ");" + "-webkit-transform: matrix(" + roundTo(surfaceMatrix[0][0], 5) + "," + (-roundTo(surfaceMatrix[1][0], 5)) + "," + (-roundTo(surfaceMatrix[0][1], 5)) + "," + roundTo(surfaceMatrix[1][1], 5) + ",0,0);" + "-moz-transform: matrix(" + roundTo(surfaceMatrix[0][0], 5) + "," + (-roundTo(surfaceMatrix[1][0], 5)) + "," + (-roundTo(surfaceMatrix[0][1], 5)) + "," + roundTo(surfaceMatrix[1][1], 5) + ",0,0);" + "-ms-transform: matrix(" + roundTo(surfaceMatrix[0][0], 5) + "," + (-roundTo(surfaceMatrix[1][0], 5)) + "," + (-roundTo(surfaceMatrix[0][1], 5)) + "," + roundTo(surfaceMatrix[1][1], 5) + ",0,0);" + "-o-transform: matrix(" + roundTo(surfaceMatrix[0][0], 5) + "," + (-roundTo(surfaceMatrix[1][0], 5)) + "," + (-roundTo(surfaceMatrix[0][1], 5)) + "," + roundTo(surfaceMatrix[1][1], 5) + ",0,0);" + "position: absolute; left: " + placementX + "px; top: " + placementY + "px;");
153 | 				}
154 | 				else {
155 | 					surface.css({ "position": "absolute", "left": "-9999px" });
156 | 				}
157 | 			}
158 | 
159 | 			function rotationMatrixCalc(qx, qy) {
160 | 				var A = [[1, 0, 0], [0, Math.cos(qx), -Math.sin(qx)], [0, Math.sin(qx), Math.cos(qx)]];
161 | 				var B = [[Math.cos(qy), 0, -Math.sin(qy)], [0, 1, 0], [Math.sin(qy), 0, Math.cos(qy)]];
162 | 				var rotationMatrix = matrixMultiply(A, B);
163 | 				return rotationMatrix;
164 | 			}
165 | 
166 | 			function matrixMultiply(A, B) {
167 | 				var C = new Array(A.length);
168 | 				for (var i = 0; i < A.length; i++) {
169 | 					C[i] = new Array(B[0].length);
170 | 					for (var j = 0; j < B[0].length; j++) {
171 | 						C[i][j] = 0;
172 | 						for (var k = 0; k < B.length; k++) {
173 | 							C[i][j] += A[i][k] * B[k][j];
174 | 						}
175 | 					}
176 | 				}
177 | 				return C;
178 | 			}
179 | 
180 | 			function vectorDot(A, B) {
181 | 				var C = 0;
182 | 				for (var i = 0; i < A.length; i++) {
183 | 					C += A[i][0] * B[i][0];
184 | 				}
185 | 				return C;
186 | 			}
187 | 
188 | 			function vectorNorm(A) {
189 | 				magnitude = 0;
190 | 				var C = new Array(A.length);
191 | 				for (var i = 0; i < A.length; i++) {
192 | 					magnitude += A[i][0] * A[i][0];
193 | 				}
194 | 				magnitude = Math.sqrt(magnitude);
195 | 				for (i = 0; i < A.length; i++) {
196 | 					C[i] = new Array(1);
197 | 					C[i][0] = A[i][0] / magnitude;
198 | 				}
199 | 				return C;
200 | 			}
201 | 
202 | 			function vectorCross3D(A, B) {
203 | 				var C = new Array(3);
204 | 				C[0] = new Array(1);
205 | 				C[0][0] = A[1][0] * B[2][0] - A[2][0] * B[1][0];
206 | 				C[1] = new Array(1);
207 | 				C[1][0] = A[2][0] * B[0][0] - A[0][0] * B[2][0];
208 | 				C[2] = new Array(1);
209 | 				C[2][0] = A[0][0] * B[1][0] - A[1][0] * B[0][0];
210 | 				return C;
211 | 			}
212 | 
213 | 			function roundTo(number, numberOfDecimalPlaces) {
214 | 				var roundedNumber = Math.round(number * Math.pow(10, numberOfDecimalPlaces)) / Math.pow(10, numberOfDecimalPlaces);
215 | 				return roundedNumber;
216 | 			}
217 | 		}
218 | 
219 | 		this.setOption = function (prop, value) {
220 | 			settings[prop] = value;
221 | 			applySettings(settings);
222 | 			return $this;
223 | 		};
224 | 
225 | 		this.startAnimation = startAnimation;
226 | 		this.stopAnimation = stopAnimation;
227 | 
228 | 		this.move = movePosition;
229 | 		this.moveRight = moveHorizontally;
230 | 		this.moveLeft = function (a, b, c) { return moveHorizontally(-a, b, c); };
231 | 		this.moveUp = moveVertically;
232 | 		this.moveDown = function (a, b, c) { return moveVertically(-a, b, c); };
233 | 
234 | 		this.setPosition = setPosition;
235 | 
236 | 		return this;
237 | 	};
238 | })(jQuery);


--------------------------------------------------------------------------------
/jqCube.jquery.min.js:
--------------------------------------------------------------------------------
1 | (function(a){a.fn.cube=function(t){function b(a,b){return"undefined"!==typeof a?a:b}function A(t){d=t.length||d||400;e=t.width||e||400;f=t.height||f||400;g=t.center||g||[300,300];h=t.lightDirection?[[t.lightDirection[0]],[t.lightDirection[1]],[t.lightDirection[2]]]:h||[[1],[1],[1]];i=b(t.hue,b(i,128));u=b(t.opacity,100*b(u,1))/100;v=b(t.saturation,b(v,50));l=b(t.minLuminosity,b(l,50));n=t.maxLuminosity||n||85;n<l&&(n=l);B=n-l;m=1e3/(t.frameRate||1e3/m||20);w=t.secondsPerRotation||w||5;r=(t.initialPosition?t.initialPosition[0]:r/(2*Math.PI)||0)*Math.PI/2;s=(t.initialPosition?t.initialPosition[1]:s/(2*Math.PI)||0)*Math.PI/2;x=b(t.horizontalCoefficient,b(x,1));y=b(t.verticalCoeficcient,b(y,1));j=t.element?a(t.element):o;C=j.find(".front");D=j.find(".back");E=j.find(".left");F=j.find(".right");G=j.find(".bottom");H=j.find(".top");k=t.hasOwnProperty("animate")?t.animate:b(k,true);t=c=c||0;p();c=t;k&&(clearInterval(q),q=setInterval(p,m))}function I(){clearInterval(q);k=false;return o}function J(){clearInterval(q);q=setInterval(p,m);k=true;return o}function z(e,b,d){var d=d||m,b=false!==b?1:false,g=k,j=c;I();var a=b*d,i=1e3/d;b||(a=1);var l=e[0]*Math.PI/2/a,f=e[1]*Math.PI/2/a;(function h(b){b<a?(r+=l,s+=f,p(),c=j,setTimeout(function(){h(b+1)},i)):g&&J()})(0);return o}function K(a,b,c){z([-a,0],b,c)}function L(a,b,c){z([0,-a],b,c)}function p(){function o(k,h,i,n,m,g,f,j,c,o,r){var j=t(j,c),g=p(j,q(g)),f=p(j,q(f)),c=g,e=f,d=Array(3);d[0]=Array(1);d[0][0]=c[1][0]*e[2][0]-c[2][0]*e[1][0];d[1]=Array(1);d[1][0]=c[2][0]*e[0][0]-c[0][0]*e[2][0];d[2]=Array(1);d[2][0]=c[0][0]*e[1][0]-c[1][0]*e[0][0];directionZ=d;c=[[1],[0],[0]];e=[[0],[1],[0]];d=[[0],[0],[1]];surfaceMatrix=[[b(c,g),b(c,f),b(c,directionZ)],[b(e,g),b(e,f),b(e,directionZ)],[b(d,g),b(d,f),b(d,directionZ)]];i=p(j,i);g=l+B*b(q(r),q(directionZ));0<directionZ[2][0]?(f=h[0]+i[0][0]-m/2,h=h[1]-i[1][0]-n/2,k.attr("style","height: "+n+"px; width: "+m+"px;background-color: hsla("+o+","+v+"%,"+g+"%,"+u+");-webkit-transform: matrix("+a(surfaceMatrix[0][0],5)+","+-a(surfaceMatrix[1][0],5)+","+-a(surfaceMatrix[0][1],5)+","+a(surfaceMatrix[1][1],5)+",0,0);-moz-transform: matrix("+a(surfaceMatrix[0][0],5)+","+-a(surfaceMatrix[1][0],5)+","+-a(surfaceMatrix[0][1],5)+","+a(surfaceMatrix[1][1],5)+",0,0);-ms-transform: matrix("+a(surfaceMatrix[0][0],5)+","+-a(surfaceMatrix[1][0],5)+","+-a(surfaceMatrix[0][1],5)+","+a(surfaceMatrix[1][1],5)+",0,0);-o-transform: matrix("+a(surfaceMatrix[0][0],5)+","+-a(surfaceMatrix[1][0],5)+","+-a(surfaceMatrix[0][1],5)+","+a(surfaceMatrix[1][1],5)+",0,0);position: absolute; left: "+f+"px; top: "+h+"px;")):k.css({position:"absolute",left:"-9999px"})}function t(a,b){var d=[[1,0,0],[0,Math.cos(a),-Math.sin(a)],[0,Math.sin(a),Math.cos(a)]],c=[[Math.cos(b),0,-Math.sin(b)],[0,1,0],[Math.sin(b),0,Math.cos(b)]];return p(d,c)}function p(f,c){for(var e=Array(f.length),a=0;a<f.length;a++){e[a]=Array(c[0].length);for(var b=0;b<c[0].length;b++)for(var d=e[a][b]=0;d<c.length;d++)e[a][b]+=f[a][d]*c[d][b]}return e}function b(b,d){for(var c=0,a=0;a<b.length;a++)c+=b[a][0]*d[a][0];return c}function q(b){magnitude=0;for(var c=Array(b.length),a=0;a<b.length;a++)magnitude+=b[a][0]*b[a][0];magnitude=Math.sqrt(magnitude);for(a=0;a<b.length;a++)c[a]=Array(1),c[a][0]=b[a][0]/magnitude;return c}function a(b,a){return Math.round(b*Math.pow(10,a))/Math.pow(10,a)}var j=r+x*(c%(2*Math.PI)),n=s+y*(c%(2*Math.PI));k&&(c+=4*Math.PI/(m*w));t(n,j);o(C,g,[[0],[0],[d/2]],f,e,[[1],[0],[0]],[[0],[1],[0]],n,j,i,h);o(F,g,[[e/2],[0],[0]],f,d,[[0],[0],[-1]],[[0],[1],[0]],n,j,i,h);o(H,g,[[0],[f/2],[0]],d,e,[[1],[0],[0]],[[0],[0],[-1]],n,j,i,h);o(D,g,[[0],[0],[-d/2]],f,e,[[-1],[0],[0]],[[0],[1],[0]],n,j,i,h);o(E,g,[[-e/2],[0],[0]],f,d,[[0],[0],[1]],[[0],[1],[0]],n,j,i,h);o(G,g,[[0],[-f/2],[0]],d,e,[[1],[0],[0]],[[0],[0],[1]],n,j,i,h)}var t=t||{},o=this,d,e,f,g,h,i,u,v,l,n,B,m,w,r,s,x,y,j,C,D,E,F,G,H,k,q,c,M={front:[0,0],left:[-1,0],right:[1,0],back:[2,0],top:[0,1],bottom:[0,-1]};A(t);this.setOption=function(a,b){t[a]=b;A(t);return o};this.startAnimation=J;this.stopAnimation=I;this.move=z;this.moveRight=K;this.moveLeft=function(a,b,c){return K(-a,b,c)};this.moveUp=L;this.moveDown=function(a,b,c){return L(-a,b,c)};this.setPosition=function(a){M[a]&&(a=M[a]);r=a[0]*Math.PI/2;s=a[1]*Math.PI/2;c=0;p()};return this}})(jQuery)


--------------------------------------------------------------------------------