Category Archives: javascript

May have to abandon dual hand interaction

I spent a few hours trying to get smooth operation of some kind using both hands on the leap motion. However i was not able to get reliable results. My left hand would get tired of holding still and move off spot. I decided to at least focus on the detailed control and manipulation with 1 hand and have the left hand use the keyboard.  For example. . In the video above, I’m using the keys:

A = Width S = Height D = Depth F = Location

If one is being held down, i can use the right hand to select the object by hovering over it and adjust its values by moving the thumb and index finger together or further apart.

Real-time shape manipulation with Leap Motion

X coordinates of Index-Thumb control the width, Y coordinates of Index-Thumb control the height and the Ring Finger+Middle finger X control the depth. I need to test the large version of this on a machine that’s not 5 years old.. I’m running into serious performance issues when rendering more than 10 SVGs but that is totally expected.

Custom 3D Vector Class

Learning from the last set of SVG polys, I created a new JS Class that renders 3D Rectangles/cubes.  You need to create a SVG type HTML object and send this object in as a constructor for each new cube you insert. You create it via:


My intention is to create a depth map of rectangles and control their height based on the x,y coordinates of the fingers and the depth control via the z coordinates

Regarding Trig.

Seems like my Trig was actually 100% accurate! What was not accurate was my way of rendering the polygons as groups and individual.. I will have to rewrite the enetire poly class to make this work with the Z scale

X & Y done for SVG still working on Z

hypnowowThis is a small example of the SVG code im working on. The screen has 2 sets of bands that center in the middle. Left and Right are controlled via the Y coordinates of each finger and the Top and Bottom are controlled by the X coordinate. I am working on manipulating the centre of all the polygons to simulate the Z coordinates….Here is a short video example:

The video is tad laggy, because my current dev machine is an old Thinkpad…cause i like it. Ill do a few other videos on a new machine later on



svgsI am currently testing SVGs . They are HTML5 Vector Elements. Its a very flexible framework for drawing vector graphics in a browser. The main reason i like it for now is that its quick. It renders faster than CSS. However, finding touched points on polygons is HARD…