Web-Kamehameha

The bare-bones web/claude based version of Kamehameha is almost complete. There is just one key piece of functionality missing, the energy beam! In the video below you will see that the user skeleton is being rendered and that when the hands come close enough together, an energy ball starts to grow. Things unnecessary to the core functionality, like dynamic lighting and the glowing auro, have been removed in favor of getting an example that simply proves the browser can be used to mediate the flow of data from the Kinect, to Kamehameha, to the browser.

When the energy ball is shot, by straightening the arms outward, currently all I have is a line showing the direction the beam should be going. The line is formed by the point at the center of the energy ball and what appears to be an arbitrarily chosen secondary point that forms a direction vector. I can't tell from Tomoto's code how the second point is calculated, however I haven't looked to far into it. His code also has no comments and is rather hard to follow. My idea for the beam is to have an angle (theta) that is a direct function of the energy level and represents how far a pair of lines is from the initial direction vector seen in the video. The lines can be of infinite length (to the edge of the screen) but they should each have a base at the ball center and one should be angle theta above the direction vector and the other theta below. I whipped up the below example in paint.

I thought I would be able to use basic geometry and trigonometry to find the X, Y, Z coordinates of the two lines that form the isosceles triangle to represent the beam, but it turned out to be harder than I thought. I basically need to use an angle and slope to find the slope of the lines for the beam, but then use that slope to calculate actual points. This problem can be thought of as 2-Dimensional since I am not using the Z dimension in my HTML5 rendering and it doesn't have any bearing on the visualization of the beam. But that didn't make it any easier as I couldn't figure out how to calculate the slope of a line theta degrees away from another line (sharing the circle center as a common base) nor how to take the slope of a line and given a pair of X, Y coordinates, find another pair of X, Y coordinates N units away from the first pair (where N is large enough to make the line go off screen). Or even more appropriately make the second pair of coordinates 0, Y where Y is a value such that 0, Y falls on that line, thus only drawing as much of the line as necessary.