background preloader

The Nature of Code

“Roger, Roger. What’s our vector, Victor?” — Captain Oveur (Airplane) This book is all about looking at the world around us and coming up with clever ways to simulate that world with code. Now, the word vector can mean a lot of different things. A vector is typically drawn as a arrow; the direction is indicated by where the arrow is pointing, and the magnitude by the length of the arrow itself. Figure 1.1: A vector (drawn as an arrow) has magnitude (length of arrow) and direction (which way it is pointing). In the above illustration, the vector is drawn as an arrow from point A to point B and serves as an instruction for how to travel from A to B. 1.1 Vectors, You Complete Me Before we dive into more of the details about vectors, let’s look at a basic Processing example that demonstrates why we should care about vectors in the first place. If you are reading this book as a PDF or in print, then you will only see screenshots of the code. Example 1.1: Bouncing ball with no vectors Show Raw Wind

Skeleton Tracking with the Kinect - Learning This tutorial will explain how to track human skeletons using the Kinect. The OpenNI library can identify the position of key joints on the human body such as the hands, elbows, knees, head and so on. These points form a representation we call the 'skeleton'. Enabling Skeleton Tracking Let us start with the code that we had by the end of the tutorial called Drawing Depth with the Kinect: import SimpleOpenNI.*; SimpleOpenNI context; void setup(){ // instantiate a new context context = new SimpleOpenNI(this); // enable depth image generation context.enableDepth(); // create a window the size of the depth information size(context.depthWidth(), context.depthHeight()); } void draw(){ // update the camera context.update(); // draw depth image image(context.depthImage(),0,0); } First we must tell the OpenNI library to determine joint positions by enabling the skeleton tracking functionality . // enable skeleton generation for all joints context.enableUser(SimpleOpenNI.SKEL_PROFILE_ALL);

qfox/Heatfiler Kinect / Kinect La Kinect est une caméra qui permet de capter trois types d'images différentes, une image de profondeur, une image RGB et une image infrarouge: Images de profondeur, RGB et infrarouge L'image de profondeur peut-être utilisée pour assembler des maillages 3D en temps réel. L'image RGB peut-être mappée à ce maillage 3D ou le maillage peut-être déformé pour créer des effets intéressants: En appliquant des modules d'analyses à l'image de profondeur, il est possible de poursuivre plusieurs interacteurs et d'interpréter leurs mouvements: Modules d'analyse de la scène, squelettique et gestuel L'utilisation de la Kinect nécessite un pilote. OpenNI: réalisé par les concepteurs de la Kinect et très riche en fonctionnalités libfreenect: réalisé par la communauté et très élémentaire Parfois il est nécessaire de télécharger et d'installer les pilotes et parfois ils sont déjà inclus et compilés.

JSDocs primer This is the core of an email I sent around internally regarding jsdocs. When I was finished I figured, let's share this knowledge :) These are my (current! ;) views on JSDocs and how I use them. Doesn't mean you have to too, but if anything you could learn something here... First of all, any function should have a jsdoc. JSDocs start with /** and are indented by one space on subsequent lines. The agreement for writing types in jsdocs are pretty simple: any primitive type is all lower cased. So above, it should be @return {number} ..., unless of course you actually return a boxed Number, but when do you ever do that :) For jsdocs, we dont deal with "classic" number types like int, uint, float, double, etc. If a parameter/property/var can have multiple types, you type a pipe (|) between them. The syntax for @param (and @property and @var) is You probably should never use null unless you explicitly pass it on. I mentioned two more directives; @property and @var. One more thing.

VeriteCo/TimelineJS RemoteStorage/remoteStorage.js How to record audio in Chrome with native HTML5 APIs Two weeks ago a new version of Chrome was released. Google switched from the default Adobe’s Flash Player to an in-house developed version called “Pepper Flash”. Unfortunately Pepper Flash has a problem with audio recording, resulting in distorted audio on almost all Macs. This happened right in the middle of our efforts to build the Dubjoy Editor, a browser-based, easy to use tool for translating (dubbing) online videos. Relying on Flash for audio recording was our first choice, but when confronted with this devastating issue, we started looking into other options. Using native HTML5 APIs seemed like a viable solution. We started researching the space and checked a lot of sample code out there, but had limited success. From what you can find on html5rocks, capturing audio seems to be well supported. Everything seems easy and pretty straightforward, right? When clicking the “start recording” button, a permission request to use the microphone appears. Unfortunately there’s a caveat.

JavaScript Code Coverage with Istanbul don Achieving a good code coverage is a useful practice in today’s software craftsmanship. For JavaScript applications, whether it is for the browser or for the server, many tools to check the statement coverage are available. What about branch coverage? Fortunately, such a tool is finally available: Istanbul. Made by Krishnan Anantheswaran from the YUI team Yahoo! Cocktail team, Istanbul is extremely easy to use. Istanbul requires Node.js, the package can be installed as: npm install istanbul Using Istanbul with command-line Node.js application is fairly straightforward. We can analyze the coverage by running: which gives the following outcome: =============================== Coverage summary =============================== Statements : 66.67% ( 2/3 ) Branches : 50% ( 1/2 ) Functions : 100% ( 0/0 ) Lines : 66.67% ( 2/3 ) ================================================================================ What about something more complicated? How does Istanbul work under the hood?

Plastique Admin Theme - WrapBootstrap: Themes for Twitter Bootstrap About Bootstrap Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex. Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples. Built to support new HTML5 elements and syntax with progressively enhanced components. Browser support Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Grow up, use Mindmaps at Monitor Everything IT: Website, Server, Application, Network. 100% Free! No matter what the industry, there is one thing that all business owners have in common. We need to find ways to best utilize our time and to stay organized. Whether you’re just starting out or have had a successful business for years, in order to grow you need to plan for the future. The trick is finding a way to organize all the information that you gather along the way so that you can effectively develop a plan of action. You also need to be able to share your ideas and vision with others in a way that is concise and easy to follow. The Solution – Mind Mapping For small-business owners, mind maps are a useful tool for everything from brainstorming to strategic planning. Our brains like thinking in pictures… The left half thinks linearly following direct linkages to related ideas. Want more info about the benefits of mind mapping or need a refresher on how to create one? Practical Uses for Small Businesses Best FREE Mind Mapping Tools for Small Businesses Beginner – Easy to Use.

Genuine Mindmapping Software | Mindmap Software | Mind Mapping Tool Mind Maps make it easy to understand, remember, and communicate complex information. In the modern world, we often suffer from information overload and overwhelm, which reduces our productivity and effectiveness. Mind Maps are used to brainstorm ideas, visualize and classify information, which helps us to overcome these issues and be able to make sense of it all, and stay organized and efficient. Some of the problems we face are: If you have suffered from any of these problems, Mind Mapping is for you. Why does Mind Mapping work? Mind Maps organize the information in the same way your brain organizes information. Our brains like thinking in pictures. We have two halves to our brains which think in different ways. A Mind Map caters to both sides of the brain at the same time, which makes it a very good way of storing and recalling information, presenting things to other people, and brainstorming new ideas.

Professor Cloud Vector graphics in Canvas can be cpu-intensive, especially with complex designs. Pile on the shapes along with effects such as strokes and gradient fills, and things can get very sluggish. That's a pity, as vectors are really versatile with a low bandwidth requirement. Luckily, we can mitigate the performance issues somewhat by 'Canvas-caching'. By drawing your vectors once to a hidden Canvas element, and then using this element as a bitmap source, we can give the illusion of complex vector arrangements, but without the performance hit. The simple drawImage command is used with hidden Canvas elements as the source, e.g: Adobe Flash developers have a more formalised version of this technique in their movieclip cacheAsBitmap property. In the demonstration above, all the vector imagery has been rendered client-side, and cached into a few hidden Canvas elements. 'Hidden' Canvas Elements These are the actual Canvas elements and their contents. Please contact me with any questions or comments.

Related: