Permalink
Browse files

big improvements

  • Loading branch information...
1 parent 1dc2a60 commit 81bbeb3f5f281ec7bc951fdab2b75e8c4f00b015 @jlongster committed May 17, 2011
Showing with 1,699 additions and 469 deletions.
  1. +0 −1 .#obj-loader.scm
  2. +29 −37 app.js
  3. +78 −13 dom3d.js
  4. +25 −0 example.css
  5. +26 −0 example.html
  6. +111 −0 example.js
  7. +32 −0 example2.html
  8. +103 −0 example2.js
  9. +61 −0 example3.js
  10. +10 −4 heap.js
  11. +80 −71 index.html
  12. +252 −112 moz.js
  13. +519 −226 moz.obj
  14. +109 −0 snake.js
  15. +12 −0 snake.mtl
  16. +186 −0 snake.obj
  17. +39 −4 style.less → style.css
  18. +26 −0 teapot.html
  19. +1 −1 untitled3.js → teapot.js
  20. BIN tri.png
View
View
@@ -1,58 +1,50 @@
+var object = untitled2;
+
$(function() {
var last_x;
- $(document).mousemove(function(e) {
- var diff = ((last_x || e.pageX) - e.pageX);
- last_x = e.pageX;
- frame(diff / 100.0);
- });
-
- function update_3d_triangle(points, diff) {
- function lp(p) {
- return p.rotate(diff, $L([0,0,0], [0,1,0]));
- }
+ var last_y;
+ // $(document).mousemove(function(e) {
+ // var diff_x = ((last_x || e.pageX) - e.pageX);
+ // last_x = e.pageX;
- return [lp(points[0]), lp(points[1]), lp(points[2])];
- }
+ // var diff_y = ((last_y || e.pageY) - e.pageY);
+ // last_y = e.pageY;
- function update(data, func) {
- var len = data.length;
+ // update(diff_x / 100.0, diff_y / 100.0);
+ // frame();
+ // });
+
+ function update(diff) {
+ var len = object.length;
for(var i=0; i<len; i++) {
- data[i] = func(data[i]);
+ var tri = object[i];
+
+ tri.yaw = diff;
+ tri.pitch = diff;
}
}
- update(tris, function(tri) {
- return update_3d_triangle(tri, Math.PI);
- });
-
- function frame(diff) {
- update(tris, function(tri) {
- return update_3d_triangle(tri, diff);
- });
-
- update(untitled3, function(tri) {
- return update_3d_triangle(tri, diff);
- });
-
+ function frame() {
dom3d.clear();
- dom3d.render_object('boxes', tris);
- dom3d.render_object('boxes2', untitled3);
+ dom3d.render_object('#boxes', object);
}
-
- dom3d.init('boxes', 600, 400);
- dom3d.init('boxes2', 600, 400);
-
- dom3d.current_eye($V([0,0,-5]));
+ dom3d.init('#boxes', 800, 400);
+ dom3d.current_eye($V([7,0,-30]));
dom3d.current_light($V([-1.0, 0.0, 0.0]).toUnitVector());
+ dom3d.current_color($c(200, 255, 200));
dom3d.current_frustum(
dom3d.make_frustum(90.0,
dom3d.current_width() / dom3d.current_height(),
1.0,
1000.0)
);
- dom3d.current_color($c(0, 255, 100));
- dom3d.render_object('boxes', tris);
+ var rot = 0.0;
+ setInterval(function() {
+ update(rot);
+ rot += 0.05;
+ frame();
+ }, 50);
});
View
@@ -26,7 +26,7 @@ function make_parameter(default_val) {
if(val)
_val = val;
return _val;
- }
+ };
}
$(function() {
@@ -62,19 +62,72 @@ $(function() {
x = (frustum.xmax - x) / (frustum.xmax - frustum.xmin);
y = (frustum.ymax - y) / (frustum.ymax - frustum.ymin);
- return $V([x * current_width(),
- y * current_height()]);
+ return $V([x * current_width(), y * current_height()]);
}
return [proj(points[0], frustum),
proj(points[1], frustum),
proj(points[2], frustum)];
}
+ // 2d -> 3d projection
+ function project3d(points, z, frustum) {
+ var x = points.e(1) / current_width();
+ x = frustum.xmax - (x * (frustum.xmax - frustum.xmin));
+
+ var y = points.e(2) / current_height();
+ y = frustum.ymax - (y * (frustum.ymax - frustum.ymin));
+
+ return $V([x * z, y * z, z]);
+ }
+
// rendering
function clear() {
$('.box').remove();
}
+
+ function transform_points(points) {
+ var pts = [points[0], points[1], points[2]];
+
+ function rotate(p, angle, line) {
+ p[0] = p[0].rotate(angle, line);
+ p[1] = p[1].rotate(angle, line);
+ p[2] = p[2].rotate(angle, line);
+ }
+
+ function scale(p, s) {
+ function scaled(v) {
+ return $V([v.e(1) * s.e(1),
+ v.e(2) * s.e(2),
+ v.e(3) * s.e(3)]);
+ }
+
+ p[0] = scaled(p[0]);
+ p[1] = scaled(p[1]);
+ p[2] = scaled(p[2]);
+ }
+
+ if(points.scale) {
+ scale(pts, points.scale);
+ }
+
+ if(points.yaw) {
+ rotate(pts, points.yaw, $L([0,0,0], [1,0,0]));
+ }
+
+ if(points.pitch) {
+ rotate(pts, points.pitch, $L([0,0,0], [0,1,0]));
+ }
+
+ if(points.translate) {
+ pts[0] = pts[0].add(points.translate);
+ pts[1] = pts[1].add(points.translate);
+ pts[2] = pts[2].add(points.translate);
+ }
+
+ pts.color = points.color;
+ return pts;
+ }
function render_3d_triangle(canvas, points, eye, light, frustum) {
var p_eye = [points[0].subtract(eye),
@@ -96,7 +149,7 @@ $(function() {
points[2].subtract(points[0])
).toUnitVector();
- var color = current_color();
+ var color = points.color || current_color();
var angle = normal.dot(light);
var ambient = .3;
@@ -134,15 +187,16 @@ $(function() {
'rotate(' + rotate + 'rad) ' +
'skew(' + skew + 'rad) ' +
'scale(' + scale.e(1) + ',' + scale.e(2) + ')';
-
- var color = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
+
+ var color = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
$('<div></div>')
.addClass('box')
.css({ '-moz-transform': transform,
'-moz-transform-origin': 'bottom left',
- 'background': '-moz-linear-gradient(45deg, ' + color + ' 50%, transparent 0)' })
- .appendTo('#' + canvas);
+ 'background': '-moz-linear-gradient(45deg, ' + color + ' 50%, transparent 0)'
+ })
+ .appendTo(canvas);
}
// utility
@@ -193,18 +247,28 @@ $(function() {
// setup
- function init(id, width, height) {
+ function init(sel, width, height) {
+ var el = $(sel);
+
+ if(width && height) {
+ el.css({ 'width': width,
+ 'height': height });
+ }
+ else {
+ width = el.width();
+ height = el.height();
+ }
+
current_width(width);
current_height(height);
-
- $('#' + id).css({ 'width': width,
- 'height': height });
}
// main functions
+
+
function render_object(canvas, data) {
- var heap = sort(data);
+ var heap = sort(data, transform_points, current_eye());
apply_depth_first(heap, function(triangle) {
render_3d_triangle(canvas,
@@ -224,6 +288,7 @@ $(function() {
render_object: render_object,
clear: clear,
make_frustum: make_frustum,
+ project3d: project3d,
current_width: current_width,
current_height: current_height,
current_color: current_color,
View
@@ -0,0 +1,25 @@
+
+body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+ul {
+ list-style: none;
+}
+
+li {
+ background-color: rgb(0, 100, 255);
+ padding: 1em;
+ width: 150px;
+ height: 3em;
+ margin: 1em;
+ z-index: 1000;
+ -moz-transition: -moz-transform .5s;
+}
+
+li:hover {
+ -moz-transform: scale(1.5, 1.5);
+ -moz-transition: -moz-transform .5s;
+}
View
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script type="text/javascript" src="jquery.js"></script>
+ <script type="text/javascript" src="sylvester.js"></script>
+ <script type="text/javascript" src="dom3d.js"></script>
+ <script type="text/javascript" src="heap.js"></script>
+ <script type="text/javascript" src="example.js"></script>
+ <script type="text/javascript" src="snake.js"></script>
+
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <link rel="stylesheet" href="example.css" type="text/css" />
+ </head>
+ <body>
+ <div class="header">
+ Other examples:
+
+ <a href="index.html">main</a>
+ <a href="example.html">pole</a>
+ <a href="example2.html">dragging</a>
+ <a href="teapot.html">teapot</a>
+ </div>
+
+ <div class="teapot"></div>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 81bbeb3

Please sign in to comment.