Force Component Machine

Here's the code that runs the above program.

You can change the code, if you like, and then click the following 'Reevaluate code' button. The program will then work as per your changes. Of course, your changes, especially random changes, can introduce errors, miscalculations, and browser crashes. If you need to get things back to their original condition, just reload this page using your browser's reload button.

The intention here is to conveniently show the inner workings of this program so that you understand how the diagram is drawn.

Click the 'Code' button again to close this section.

// Force Component Machine // Requires jQuery // Requires objects XYGraph, NumberAdjuster // This code manages the math/physics window.FSize; window.FDirection; window.Fx; window.Fy; window.FSizeValueSpan; window.FDirectionValueSpan; window.FxValueSpan; window.FyValueSpan; window.FSizeNumberAdjusterDiv; window.FDirectionNumberAdjusterDiv; window.FSizeNumberAdjuster; window.FDirectionNumberAdjuster; window.canvas; window.xyGraph; window.radPerDeg = Math.PI / 180; window.red = '#ff0000'; window.lightRed = '#ff6666'; window.lighterRed = '#ffaaaa'; window.update = function() { // erase the old stuff xyGraph.clear(); // how lines join xyGraph.setLineJoin('round'); // draw the graph paper xyGraph.setLineColor('gray'); xyGraph.setLineThickness(2); xyGraph.drawGrid(1, 1); // draw the (x, y) axes xyGraph.setLineColor('black'); xyGraph.setLineThickness(3); xyGraph.drawAxes(); // get whatever current values are showing on the user interface FSize = FSizeNumberAdjuster.get(); FDirection = FDirectionNumberAdjuster.get(); // calculate x, y components // change degrees to radians along the way Fx = FSize * Math.cos(FDirection * radPerDeg); Fy = FSize * Math.sin(FDirection * radPerDeg); // line thickness for angle, vectors xyGraph.setLineThickness(5); // draw angle xyGraph.setLineColor(red); xyGraph.setAreaColor(red); xyGraph.drawAngle(FDirection, 0, 0, 1); // draw 2D vector xyGraph.drawVector2(0, 0, Fx, Fy, 1); // draw x-component xyGraph.setLineColor(lightRed); xyGraph.drawVector2(0, 0, Fx, 0, 1); // draw y-component xyGraph.setLineColor(lighterRed); xyGraph.drawVector2(Fx, 0, Fx, Fy, 1); // output values FxValueSpan.text(round(Fx).toString()); FyValueSpan.text(round(Fy).toString()); }; window.round = function(n) { // move the decimal two steps to the right // truncate the remaining decimal digits, rounding first // move the decimal two steps to the left return Math.round(n * 100) / 100; };