Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: karlbright/matrices
base: master
...
head fork: jmattner/matrices
compare: multirow_grow
Checking mergeability… Don't worry, you can still create the pull request.
  • 4 commits
  • 1 file changed
  • 0 commit comments
  • 1 contributor
Commits on Apr 01, 2011
James Mattner added animating box thing e656eb2
James Mattner removed old stuff and made multiple boxes 3fac234
James Mattner failed attempt at multi-row logic 820f002
Commits on Apr 03, 2011
James Mattner added growing effect based on radius e47d0e3
Showing with 117 additions and 79 deletions.
  1. +117 −79 calc.html
View
196 calc.html
@@ -8,44 +8,113 @@
<script>
$(function(){
var mouse = {};
- doMatrix = function(i){
- var value = $(i.currentTarget).val();
- var box = $("#select_box").val();
- doChanges(box);
+ updateBox = function(box, xCenter, yCenter) {
+ var x = (xCenter - mouse.xPos) / 100;
+ var y = (yCenter - mouse.yPos) / 100;
+ var abs_x = Math.abs(x);
+ var abs_y = Math.abs(y);
+
+ var z = Math.sqrt(Math.pow(abs_x, 2) + Math.pow(abs_y, 2));
+ var text = "x: " + x + " || y: " + y + " || z: " + z;
+ $(box).text(text);
+ var matrix = [do1(x, y), 0, 0, 0, 0, do6(x, y), 0, 0, 0, 0, 1, 0, do13(x), do14(y), 0, 1];
+ $(box).attr('style','-webkit-transform: matrix3d(' + matrix.join(',') + ');');
}
- doChanges = function(box) {
- $(box).attr('style','-webkit-transform: matrix3d('+$("#m00").val()+','+$("#m01").val()+','+$("#m02").val()+','+$("#m03").val()+','+$("#m10").val()+','+$("#m11").val()+','+$("#m12").val()+','+$("#m13").val()+','+$("#m20").val()+','+$("#m21").val()+','+$("#m22").val()+','+$("#m23").val()+','+$("#m30").val()+','+$("#m31").val()+','+$("#m32").val()+','+$("#m33").val()+');');
+ do1 = function(x, y) {
+ var abs_x = Math.abs(x);
+ var abs_y = Math.abs(y);
+
+ z = Math.sqrt(Math.pow(abs_x, 2) + Math.pow(abs_y, 2));
+ var val = 1
+ if( z >= 1 ) {
+ val = 1;
+ } else if( 1 > z && z >= 0 ) {
+ val = 2 - z;
+ }
+
+ return val
}
- parseMatrix = function(el) {
- var style = $(el).attr('style');
- style = style.replace('-webkit-transform: matrix3d(','');
- style = style.replace(');','');
- var matrix = style.split(',');
- setMatrix(matrix);
+ do4 = function(x, y) {
+ var val;
+ var abs_x = Math.abs(x);
+ var sign = abs_x / x;
+ if( abs_x >= 2 ) {
+ val = 0;
+ } else if( 2 > abs_x && abs_x >= 1 ) {
+ val = sign * (abs_x - 2) * (-0.02 / 3);
+ } else if( 1 > abs_x && abs_x >= 0 ) {
+ val = x * (0.02 / 3);
+ }
+ return val;
}
- setMatrix = function(m) {
- $("#m00").val(parseFloat(m[0]));
- $("#m01").val(parseFloat(m[1]));
- $("#m02").val(parseFloat(m[2]));
- $("#m03").val(parseFloat(m[3]));
- $("#m10").val(parseFloat(m[4]));
- $("#m11").val(parseFloat(m[5]));
- $("#m12").val(parseFloat(m[6]));
- $("#m13").val(parseFloat(m[7]));
- $("#m20").val(parseFloat(m[8]));
- $("#m21").val(parseFloat(m[9]));
- $("#m22").val(parseFloat(m[10]));
- $("#m23").val(parseFloat(m[11]));
- $("#m30").val(parseFloat(m[12]));
- $("#m31").val(parseFloat(m[13]));
- $("#m32").val(parseFloat(m[14]));
- $("#m33").val(parseFloat(m[15]));
+ do6 = function(x, y) {
+ var abs_x = Math.abs(x);
+ var abs_y = Math.abs(y);
+
+ z = Math.sqrt(Math.pow(abs_x, 2) + Math.pow(abs_y, 2));
+ var val = 1
+ if( z >= 1 ) {
+ val = 1;
+ } else if( 1 > z && z >= 0 ) {
+ val = 2 - z;
+ }
+
+ return val
}
+ do8 = function(y) {
+ var val;
+ var abs_y = Math.abs(y);
+ var sign = abs_y / y;
+ if( abs_y >= 2 ) {
+ val = 0;
+ } else if( 2 > abs_y && abs_y >= 1 ) {
+ val = sign * (abs_y - 2) * (-0.02 / 3);
+ } else if( 1 > abs_y && abs_y >= 0 ) {
+ val = y * (0.02 / 3);
+ }
+ return val;
+ }
+ do13 = function(x) {
+ var val;
+ var abs_x = Math.abs(x);
+ var sign = x / abs_x;
+
+ if( abs_x >= 1 ) {
+ val = sign * 50;
+ } else if( 1 > abs_x && abs_x >= 0) {
+ val = x * 50;
+ }
+ return val;
+ }
+ do14 = function(y) {
+ var val;
+ var abs_y = Math.abs(y);
+ var sign = y / abs_y;
+
+ if( abs_y >= 1 ) {
+ val = sign * 50;
+ } else if( 1 > abs_y && abs_y >= 0) {
+ val = y * 50;
+ }
+ return val;
+ }
+ $(window).mousemove(function(e){
+ mouse.xPos = e.pageX;
+ mouse.yPos = e.pageY;
+ updateBox("#anim1", 450, 100);
+ updateBox("#anim2", 550, 100);
+ updateBox("#anim3", 650, 100);
+ updateBox("#anim4", 450, 200);
+ updateBox("#anim5", 550, 200);
+ updateBox("#anim6", 650, 200);
+ updateBox("#anim7", 450, 300);
+ updateBox("#anim8", 550, 300);
+ updateBox("#anim9", 650, 300);
+ });
initStyles = function() {
$(".box").attr('style','-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);');
}
initStyles();
- $("input").bind('change',doMatrix);
$(".box").bind('click',function(){
var num = $(this).text();
var m = parseMatrix(this);
@@ -58,58 +127,27 @@
form input { width: 50px; height: 50px; }
#container { position: absolute; top: 200px; left: 350px; }
.box { border: 1px solid #000; width: 98px; height: 98px; background: red; -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); overflow: hidden; left: 0; position: absolute; }
- #box1 { top: 0; left: 0; background: red; }
- #box2 { top: 0; left: 100px; background: blue; z-index: 100; }
- #box3 { top: 0; left: 200px; background: purple; z-index: 200; }
- #box4 { top: 0; left: 300px; background: green; z-index: 100; }
- #box5 { top: 0; left: 400px; background: antiquewhite; }/*
- #box6 { top: 0; left: 500px; background: orange; }
- #box7 { top: 100px; left: 0; background: pink; }
- #box8 { top: 100px; left: 100px; background: yellow; }
- #box9 { top: 100px; left: 200px; background: brown; }
- #box10 { top: 100px; left: 300px; background: darkslateblue; }
- #box11 { top: 100px; left: 400px; background: tomato; }
- #box12 { top: 100px; left: 500px; background: yellowgreen; }*/
+ #anim1 { top: 50px; left: 400px; background: orange; z-index: 100; }
+ #anim2 { top: 50px; left: 500px; background: blue; z-index: 100; }
+ #anim3 { top: 50px; left: 600px; background: red; z-index: 100; }
+ #anim4 { top: 150px; left: 400px; background: green; z-index: 100; }
+ #anim5 { top: 150px; left: 500px; background: white; z-index: 100; }
+ #anim6 { top: 150px; left: 600px; background: maroon; z-index: 100; }
+ #anim7 { top: 250px; left: 400px; background: black; z-index: 100; }
+ #anim8 { top: 250px; left: 500px; background: yellow; z-index: 100; }
+ #anim9 { top: 250px; left: 600px; background: purple; z-index: 100; }
video { position: absolute; width: 178px; height: 100px; left: -39px; top: 0; }
</style>
</head>
<body>
- <div id="saved"></div>
- <form id="matrix">
- <select id="select_box">
- <option value="#box1">box 1</option>
- <option value="#box2">box 2</option>
- <option value="#box3">box 3</option>
- <option value="#box4">box 4</option>
- <option value="#box5">box 5</option>
- </select>
- <br />
- <input id="m00" value="1" />
- <input id="m01" value="0" />
- <input id="m02" value="0" />
- <input id="m03" value="0" />
- <br />
- <input id="m10" value="0" />
- <input id="m11" value="1" />
- <input id="m12" value="0" />
- <input id="m13" value="0" />
- <br />
- <input id="m20" value="0" />
- <input id="m21" value="0" />
- <input id="m22" value="1" />
- <input id="m23" value="0" />
- <br />
- <input id="m30" value="0" />
- <input id="m31" value="0" />
- <input id="m32" value="0" />
- <input id="m33" value="1" />
- </form>
- <div id="container">
- <div class="box" id="box1">1</div>
- <div class="box" id="box2">2</div>
- <div class="box" id="box3">3</div>
- <div class="box" id="box4">4</div>
- <div class="box" id="box5">5</div>
- </div>
+ <div class="box" id="anim1"></div>
+ <div class="box" id="anim2"></div>
+ <div class="box" id="anim3"></div>
+ <div class="box" id="anim4"></div>
+ <div class="box" id="anim5"></div>
+ <div class="box" id="anim6"></div>
+ <div class="box" id="anim7"></div>
+ <div class="box" id="anim8"></div>
+ <div class="box" id="anim9"></div>
</body>
</html>

No commit comments for this range

Something went wrong with that request. Please try again.