Constructive Solid Geometry 3d Modeling in JavaScript and WebGL (csg.js)

Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm. All edge cases involving overlapping coplanar polygons in both solids are correctly handled.



Evan Wallace, the same guy who brought us that amazing WebGL water simulation is back at it again, this time with a library called csg.js for doing Constructive Solid Geometry modeling in JavaScript.

The models above were created with this code:

var a = CSG.cube();

var b = CSG.sphere({ radius: 1.35, stacks: 12 });

var c = CSG.cylinder({ radius: 0.7, start: new CSG.Vector(-1, 0, 0), end: new CSG.Vector(1, 0, 0) });

var d = CSG.cylinder({ radius: 0.7, start: new CSG.Vector(0, -1, 0), end: new CSG.Vector(0, 1, 0) });

var e = CSG.cylinder({ radius: 0.7, start: new CSG.Vector(0, 0, -1), end: new CSG.Vector(0, 0, 1) }

Pretty impressive, uhm? Be sure to check out the demos. And here's the code on Github.

Source: BadassJS

Efficient Javascript Tips

Opera Developer Blog recently put up a post on Efficient Javascript Tips. It's worth reading if you  develop with Javascript.

ECMAScript

1. Avoid using eval or the Function constructor
   1. Rewrite that eval
   2. If you want a function, use a function
2. Avoid using with
3. Don't use try-catch-finally inside performance-critical functions
4. Isolate uses of eval and with
5. Avoid using global variables
6. Beware of implicit object conversion
7. Avoid for-in in performance-critical functions
8. Use strings accumulator-style
9. Primitive operations can be faster than function calls
10. Pass functions, not strings, to setTimeout() and setInterval()

DOM

1. Repaint and reflow
   1. Keeping the number of reflows to a minimum
   2. Minimal reflow
2. Document tree modification
3. Modifying an invisible element
4. Taking measurements
5. Making several style changes at once
6. Trading smoothness for speed
7. Avoid inspecting large numbers of nodes
8. Improve speed with XPath
9. Avoid modifications while traversing the DOM
10. Cache DOM values in script variables

Document loading

1. Avoid keeping alive references from one document to another
2. Fast history navigation
3. Use XMLHttpRequest
4. Create SCRIPT elements dynamically
5. location.replace() keeps the history under control

jQuery Mobile 1.0 is finally out!

jQuery Mobile 1.0 Final

jQuery Mobile v1.0 is finally out. In this version, all the target platforms are supported: Apple iOS, Android, Windows Mobile, Windows Phone 7 - 7.5, Blackberry 4.x, 5, 6 & 7, Blackberry Playbook, Palm WebOS, Firebox Mobile (Beta), Opera Mobile 11.0, Meego 1.2, Kindle 3 and Fire, Chrome Desktop 11-15, Firefox Desktop 4-8, Internet Explorer 7-9, Opera Desktop 10-11, Opera Mini (5.0-6.0), Nokia Symbian^3, and all older smartphone platforms and feature phones. That's quite a handful of platform support. By using a progressive enhancement approach, even less capable devices can still access the content and functionality of a jQuery Mobile site. This broad compatibility gives you the ability to reach many billions of people.

The performance of this version has also been improved, there's an increase of 30 - 50% page enhancement time across all platforms at a minimum compared to RC2. Also with this release, they've just created ThemeRoller for Mobile tool, which is a web-based tool that makes it super simple to create custom themes without writing a single line of CSS. Drag and drop colors to create your masterpiece, then share it via URL or download a ZIP file with your custom theme stylesheet, ready for production (or additional tweaking).

The resource section has been organized to provide you with tons of plugins, extensions, frameworks, tools, articles, tutorials and lots more. You can download the 1.0 ZIP here, or fork it on Github.