Permalink
Browse files

add cursor example

  • Loading branch information...
1 parent 7932616 commit 2e46d22abd57dfb98f5f82bb54752bf831183b49 @jlongster committed Jul 5, 2011
Showing with 243 additions and 5 deletions.
  1. +116 −0 cursor.html
  2. +44 −0 cursor.js
  3. +1 −0 example.html
  4. +1 −0 example2.html
  5. +1 −0 example3.html
  6. +1 −0 example4.html
  7. +1 −0 index.html
  8. +5 −5 renderer_css.js
  9. +58 −0 test.html
  10. +15 −0 test.js
View
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script type="text/javascript" src="jquery.js"></script>
+ <script type="text/javascript" src="vector.js"></script>
+ <script type="text/javascript" src="dom3d.js"></script>
+
+ <script type="text/javascript" src="renderer.js"></script>
+ <script type="text/javascript" src="raphael-min.js"></script>
+ <script type="text/javascript" src="renderer_css.js"></script>
+ <script type="text/javascript" src="renderer_raphael.js"></script>
+
+ <script type="text/javascript" src="heap.js"></script>
+ <script type="text/javascript" src="std.js"></script>
+ <script type="text/javascript" src="untitled2.js"></script>
+ <script type="text/javascript" src="cursor.js"></script>
+
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <link rel="stylesheet" href="example.css" type="text/css" />
+
+ <style>
+ body, a, a:hover {
+ cursor: none;
+ }
+
+ #canvas {
+ position: relative;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="header">
+ <div class="nav">
+ Other examples:
+
+ <a href="index.html">main</a>
+ <a href="example.html">pole</a>
+ <a href="example2.html">dragging</a>
+ <a href="example3.html">teapot</a>
+ <a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
+ </div>
+
+ <div class="clear"></div>
+ </div>
+
+ <div class="content">
+ <p>
+ <a href="#">Lorem ipsum dolor sit amet</a>, consectetur
+ adipiscing elit. Fusce imperdiet pellentesque orci dignissim
+ tempor. Nunc at quam nisi, sit amet aliquet est. Nulla tortor
+ massa, auctor a euismod iaculis, vulputate in tellus. Integer
+ imperdiet nibh a libero porta commodo. Sed diam diam, tempor et
+ scelerisque vitae, pharetra sed ligula. Aliquam fermentum
+ scelerisque molestie. Ut sit amet enim in nisi convallis
+ pulvinar mattis sed metus. Ut et sem odio. Class aptent taciti
+ sociosqu ad litora torquent per conubia nostra, per inceptos
+ himenaeos. Donec sed quam quis felis varius
+ scelerisque. Pellentesque vel ultrices eros. Phasellus
+ sollicitudin dapibus interdum.
+ </p>
+
+ <p>
+ <a href="#">Ut vel euismod nisl</a>. Donec nec adipiscing augue. Quisque aliquet
+ suscipit elit in eleifend. Quisque a porta arcu. Duis sollicitudin
+ ipsum pharetra metus ullamcorper semper. Vivamus luctus leo eget quam
+ ullamcorper non sagittis metus auctor. Sed iaculis adipiscing nisi, at
+ aliquam ligula interdum ac. Vestibulum sollicitudin, justo sed
+ tincidunt sollicitudin, lacus felis porttitor ligula, ac vulputate
+ nibh ipsum et lorem. Pellentesque ullamcorper aliquam tellus vitae
+ accumsan. Nullam dictum dolor mollis nunc venenatis sed condimentum
+ ipsum fermentum. Etiam nec aliquam quam. Morbi ipsum dolor, tempor id
+ ultrices at, luctus eu felis. Nulla rhoncus arcu sagittis ante varius
+ volutpat. Nam et felis sit amet nunc iaculis scelerisque. Nunc id elit
+ in erat vestibulum placerat sit amet id metus.
+ </p>
+
+ <p>
+ <a href="#">Etiam sodales mi nec ligula commodo porta</a>. Cras
+ pulvinar placerat lorem vitae eleifend. Nunc sodales est in
+ sem accumsan vulputate. Nullam ante lacus, consectetur non
+ malesuada nec, pharetra at mi. Sed vitae nisl risus. Sed dui
+ quam, euismod vel pharetra ut, vulputate non tellus. Class
+ aptent taciti sociosqu ad litora torquent per conubia nostra,
+ per inceptos himenaeos. Quisque ac enim a ligula cursus
+ adipiscing ut a orci. Sed quam mauris, blandit sed volutpat
+ eget, commodo id sem. Maecenas eros velit, suscipit eu
+ venenatis accumsan, pellentesque vitae neque. Fusce semper
+ condimentum turpis, ut accumsan arcu pulvinar eu. Integer
+ lacinia condimentum sapien vel tempor. Pellentesque a nisl vel
+ ante aliquet suscipit. Nulla id sem id diam vehicula lacinia
+ eu tincidunt ligula. Sed non tellus eget nisi hendrerit
+ faucibus a ut tortor. Suspendisse nec dolor in sapien feugiat
+ mollis. Nulla lobortis, lectus et consequat dictum, lorem enim
+ rhoncus libero, vulputate blandit erat erat eget nisi. Integer
+ non nisl purus, vitae pellentesque dui.
+ </p>
+ </div>
+
+ <div id="canvas"></div>
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-9014321-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+ </body>
+</html>
View
@@ -0,0 +1,44 @@
+
+$(function() {
+
+ make_renderer(null, 100, 100);
+
+ dom3d.current_eye($v(0,0,-15));
+ dom3d.current_light(vec_unit($v(-1.0, 0.0, -.2)));
+ dom3d.current_color($c(200, 255, 200));
+
+ untitled2.yaw = 0.0;
+ untitled2.pitch = 0.0;
+
+ function update() {
+ untitled2.yaw += .05;
+ untitled2.pitch += .05;
+ }
+
+ function frame() {
+ dom3d.clear('canvas');
+ dom3d.render('canvas', untitled2);
+ }
+
+ setInterval(function() {
+ update();
+ frame();
+ }, 50);
+
+ var canvas = $('#canvas, svg');
+ $(window).mousemove(function(e) {
+ canvas.css({ 'position': 'absolute',
+ 'left': e.pageX - 50.0,
+ 'top': e.pageY - 50.0 });
+ });
+
+ $('a').hover(
+ function() {
+ dom3d.current_color($c(255, 0, 0));
+ },
+ function() {
+ dom3d.current_color($c(200, 255, 200));
+ }
+ );
+
+});
View
@@ -25,6 +25,7 @@
<a href="example2.html">dragging</a>
<a href="example3.html">teapot</a>
<a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
<div class="render-options">
<a href="#css">CSS</a>
View
@@ -28,6 +28,7 @@
<a href="example2.html">dragging</a>
<a href="example3.html">teapot</a>
<a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
</div>
<div class="render-options">
View
@@ -28,6 +28,7 @@
<a href="example2.html">dragging</a>
<a href="example3.html">teapot</a>
<a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
</div>
<div class="render-options">
View
@@ -28,6 +28,7 @@
<a href="example2.html">dragging</a>
<a href="example3.html">teapot</a>
<a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
</div>
<div class="render-options">
View
@@ -27,6 +27,7 @@
<a href="example2.html">dragging</a>
<a href="example3.html">teapot</a>
<a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
</div>
<div class="render-options">
View
@@ -81,10 +81,10 @@
var ac = vec_subtract(points[2], points[0]);
var translate = points[0];
- var rotate = Math.atan2(ab[X], ab[Y]);
+ var rotate = -Math.atan2(ab[X], ab[Y]);
// rotate ac to get it in local coords
- var ac_ = vec_2drotate(ac, rotate);
+ var ac_ = vec_2drotate(ac, -rotate);
// scale to the right size
var scale = $v(ac_[X], vec_length(ab));
@@ -96,8 +96,8 @@
var transform;
if(_use_matrix) {
- var cos_a = Math.cos(rotate);
- var sin_a = Math.sin(rotate);
+ var cos_a = Math.cos(-rotate);
+ var sin_a = Math.sin(-rotate);
var rotate_m = $m([cos_a, -sin_a],
[sin_a, cos_a]);
var skew_m = $m([1, Math.tan(skew)],
@@ -117,7 +117,7 @@
transform =
'translate(' + translate[X] + 'px,' +
translate[Y] + 'px) ' +
- 'rotate(' + -e(rotate) + 'rad) ' +
+ 'rotate(' + e(rotate) + 'rad) ' +
'skewY(' + e(skew) + 'rad) ';
}
View
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script type="text/javascript" src="jquery.js"></script>
+ <script type="text/javascript" src="vector.js"></script>
+ <script type="text/javascript" src="dom3d.js"></script>
+
+ <script type="text/javascript" src="renderer.js"></script>
+ <script type="text/javascript" src="raphael-min.js"></script>
+ <script type="text/javascript" src="renderer_css.js"></script>
+ <script type="text/javascript" src="renderer_raphael.js"></script>
+
+ <script type="text/javascript" src="heap.js"></script>
+ <script type="text/javascript" src="std.js"></script>
+ <script type="text/javascript" src="test.js"></script>
+
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <link rel="stylesheet" href="example.css" type="text/css" />
+
+ <style>
+ #canvas {
+ position: relative;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="header">
+ <div class="nav">
+ Other examples:
+
+ <a href="index.html">main</a>
+ <a href="example.html">pole</a>
+ <a href="example2.html">dragging</a>
+ <a href="example3.html">teapot</a>
+ <a href="example4.html">404</a>
+ <a href="cursor.html">cursor</a>
+ </div>
+
+ <div class="clear"></div>
+ </div>
+
+ <div id="canvas"></div>
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-9014321-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+ </body>
+</html>
View
@@ -0,0 +1,15 @@
+
+$(function() {
+
+ make_renderer(null, 100, 100);
+
+ dom3d.current_eye($v(0,0,-15));
+ dom3d.current_light(vec_unit($v(-1.0, 0.0, -.2)));
+ dom3d.current_color($c(200, 255, 200));
+
+ dom3d.current_renderer().render2d(
+ 'canvas',
+ [$v(20, 20), $v(50, 120), $v(120, 30)],
+ $c(0, 255, 0));
+
+});

0 comments on commit 2e46d22

Please sign in to comment.