Instantly share code, notes, and snippets.

@abernier abernier/README
Last active Sep 28, 2015

Embed
What would you like to do?
camera CSS
A simple 2D camera over DOM elements.
$screen = $('#screen')
$world = $('#world')
H = $screen.height()
W = $screen.width()
spotOn = (el, spec = {}) ->
$target = $(el)
spec = $.extend(true, {
theta: 0
radian: false
}, spec)
bounds = bounding($target, spec.radian and spec.theta or deg2rad(spec.theta))
x = $target.position().left
y = $target.position().top
h = $target.height()
w = $target.width()
$world.animate
scale: Math.min W / bounds.w, H / bounds.h
rotate: "#{spec.radian and rad2deg(spec.theta) or spec.theta}deg"
translateX: "#{W/2 - (x + w/2)}px"
translateY: "#{H/2 - (y + h/2)}px"
, 3000
###
Utilities
###
deg2rad = (theta) ->
theta * Math.PI / 180
rad2deg = (theta) ->
theta * 180 / Math.PI
bounding = (el, theta = 0) ->
$el = $(el)
w = $el.width()
h = $el.height()
#
# Our rotation matrix
#
# see: http://en.wikipedia.org/wiki/Rotation_matrix
#
R = $M [
[Math.cos(theta), -Math.sin(theta)]
[Math.sin(theta), Math.cos(theta)]
]
#
# Our 4 original points
#
A = $V [0, 0]
B = $V [w, 0]
C = $V [w, h]
D = $V [0, h]
#
# Our four points, rotated
#
AA = R.multiply A
BB = R.multiply B
CC = R.multiply C
DD = R.multiply D
xs = [AA, BB, CC, DD].map((el) -> el.elements[0])
ys = [AA, BB, CC, DD].map((el) -> el.elements[1])
{
w: Math.max.apply(null, xs) - Math.min.apply(null, xs)
h: Math.max.apply(null, ys) - Math.min.apply(null, ys)
}
#console.log bounding($('#box1'))
spotOn($('#box3'), {theta: 0})
spotOn($('#box1'), {theta: 0})
spotOn($('#box2'), {theta: 80})
spotOn($('#box2'), {theta: 360})
spotOn($('#box1'), {theta: 0})
html, body {height:100%;}
html {display:table; width:100%;}
body {margin:0; display:table-cell; text-align:center; vertical-align:middle;}
#screen {display:inline-block; outline:50em solid rgba(0,0,0,.2); width:300px; height:200px;}
#world {position:relative; height:100%; z-index:-1;}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<link rel="stylesheet" href="index.css">
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://rawgithub.com/heygrady/transform/master/dist/jquery.transform-0.9.3.min.js"></script>
<script src="https://rawgithub.com/jcoglan/sylvester/master/src/sylvester.js"></script>
<script src="https://rawgithub.com/jcoglan/sylvester/master/src/vector.js"></script>
<script src="https://rawgithub.com/jcoglan/sylvester/master/src/matrix.js"></script>
</head>
<body>
<div id="screen"><div id="world">
<div id="box1" style="width:1em; height:48px; background-color:red; position:absolute; top:15%; left:20%"></div>
<div id="box2" style="width:15%; height:2.5em; background-color:green; position:absolute; bottom:5em; right:10%;"></div>
<div id="box3" style="width:.5em; height:1em; background-color:yellowGreen; position:absolute; bottom:15em; left:20%;"></div>
<div id="circle" style="width:50px; height:50px; position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-25px; border-radius:100%; background-color:yellow;"></div>
</div></div>
<script src="index.coffee" type="text/coffeescript"></script>
</body>
</html>
@abernier

This comment has been minimized.

Copy link
Owner Author

abernier commented Jul 18, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment