CAT | Canvas
From the post,
“This 3D Layout is powered by a smallish javascript file, and run-of-the-mill CSS. It uses the HTML5 Canvas element to draw the background dynamically. Try resizing the window!”
From the author,
“Many times I browsed on different sites of the cool drawings. Unfortunately I was not blessed with a talent for drawing and I could not create anything like the same. As I reviewed materials related to the element <canvas> – new HTML5 tag, I saw a cool drawings created using straight lines. I thought it would be nice to do something with math”
12
Think – an HTML5 Canvas Mind Mapping Web App
No comments · Posted by admin in Canvas, HTML5
From the post,
“Think is a free mind mapping web application which has been implemented using the canvas element, Django and Google App Engine. Created by Ashley Sands, Think allows users can create and view their own mind maps.
Think is simple to use. Clicking a node allows you to either spawn another connected node, edit the node text, delete a node or change it’s connections.”
From the author,
“It uses the canvas element to build from two images one image with additional information. It uses the Comparabl API where we get two images in base64 encoded format so that we don’t have to make two additional http requests to receive the images. In fact the project does not use canvas in a complex way but it shows how you can easily build an image on the fly with canvas from different sources.”
From the post,
“Toxicgonzo has created a canvas application which can read the contents of a 3D .OBJ file and display the results in real-time. This particular demo takes Blender’s monkey model and rotates it. It also displays how many FPS in the upper left corner.”
From the post,
“CanvasMol uses the HTML5 canvas element to good use with interesting diagrams of the structure for a variety of different molecule definitions such as TNT, Aspirin and DNA.
To use the demo, select an option from the left and then drag molecule to rotate. By using the options at the bottom of each diagram you can toggle which axis are rotated and change a number of graphical settings.”
From the post,
“Snapfit.js 1.01 allows you to add jigsaw puzzle functionality to images on your webpages. It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari, else it’ll degrade and your visitors won’t notice a thing.”
From the post,
“This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.”
From the post,
“Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Here’s what it takes to get going: load the typeface.js library and some typeface.js fonts, then proceed like normal:”
From the post,
“Box2DJS is a JavaScript port of Box2D Physics Engine, and was created by Robert Kieffer. The original Box2D engine was designed as a 2D rigid body simulation library for games. Programmers are able to use it to make objects move in believable ways and make the world seem more interactive.
The website provides several physics demos which you can interact with by left clicking with the mouse to add new objects; as well as code samples to get you started in creating your own physics demos.”
