EZ Math Movie, Tutorials, Input and Output, Input Gizmo

What these look like

The input gizmo

The input gizmo

The input gizmo provides a way to change a value within your program while it is animating.

Basically, input gizmos hold values. You control the value held by an input gizmo by clicking on its buttons. A variable can be set to the current value held by an input gizmo by calling a command such as get1stInputValue. Consequently, you can control the values of variables by using input gizmos. This is very handy when you want to see what happens to your calculation when the values of its variables change.

For example, suppose your program is animating, and in the loop code you set up the graph and draw a line with a certain slope and y-intersection. The loop code would run again and again; and again and again the graph would be cleared, and the line drawn. Of course, no animation would be apparent, since the same graph would be drawn exactly the same way repeatedly.

Now suppose that near the top of the loop code we get the value for the slope and y-intercept from input gizmos. Then, as the loop code cycles, we can use the input gizmos to change the values for the slope and y-intercept and clearly see the effect of these changes on the graph.

The ordinary way of setting a variable's value

Again, suppose we are graphing the common equation for a line:

y = mx + b

Somewhere in our program we would need the following code in order to calculate the y-coordinate:

y = (m * x) + b;

Now, the values for m, x, and b must be set before this calculation executes. The value for x most likely would come from a loop control variable, and that is not very important to us right now. The values for m and b could be set in an ordinary way like:

m = 1;
b = 3;

And then the line would be drawn with a slope of 1 and a y-intercept of 3. If we wanted to see what happens to the graph when the slope is -2, we would change the top line above to assign -2 to the variable m, as:

m = -2;

An input gizmo would let us change the value for the slope more conveniently.

The input gizmo way of setting a variable's value

We want to change the ordinary way of setting values for variables. We want to use input gizmos to set values for m and b. We would replace this:

m = 1;
b = 3;

With this:

m = get1stInputValue();
b = get2ndInputValue();

An input gizmo always hold a certain value. When the above code executes, m will be assigned the value held by the 1st input gizmo, and b will be set to whatever value is current in the 2nd input gizmo.

While the program animates, you can change the values held by the input gizmos by clicking on their buttons, and, therefore, change the values for the slope and y-intercept of the line being drawn. Immediately you can see what effect the changing of these values has on the shape of the graph.

The parts of the input gizmo

Input gizmo explanation

The label, name and domain

The labels for the input gizmos are called '1st Input', '2nd Input', and so on. The label is used to reference the input gizmo from within your program code. For example, if you want to get the value of the 1st input gizmo, then in your code you would use the get1stInputValue command. You can not change the label for an input gizmo.

The name on an input gizmo is used to describe the meaning the input. The name defaults to 'Name', but that can be changed. If you want to use an input gizmo to control the length of a rectangle, then you might rename it 'Length'. Understand that this is not hard wired to the name of a variable within your program code. Actually, there is no connection between the name of an input gizmo and the name of a variable except, perhaps, in our minds. So, do not think that simply naming an input gizmo the same as a variable will cause that variable to accept the value of the input gizmo. You need to use commands like get1stInputValue to transfer the value of an input gizmo to a variable. The name of the input gizmo is its description, it reminds us of its meaning, but it is not a variable's name technically or programmatically.

The domain of the input gizmo is the extent of values over which the input gizmo is currently operating. It will step through these values as you click the plus (+) and minus (-) buttons. By default, the domain goes from -10 to +10 in step sizes of 1.

Changing the name and the domain

Changing input name and domain

Running the example program

The example program will draw a linear function that has the familiar equation y = mx + b. The variable m holds the slope of the line, and the variable b holds the y-intercept. Input gizmos will be used to set the values for m and b. The linear function will be drawn using the point by point method explained in an earlier tutorial.

In the before loop code section the variable deltaX is set to a small value. This will be the step size for the x-coordinates as we plot the function's points across the x-axis.

The loop code cycles continuously. With every cycle it does the following:

If the input gizmos' buttons are not clicked, then their values do not change, so the slope and y-intercept do not change, so the graph is continuously drawn the same, and it seems not to animate. But if you click the plus (+) or minus (-) button for, say, the slope, then you should immediately see that the drawing of the graph changes in accordance with the new slope. Of course, the y-intercept can also be changed.

In this way input gizmos can be used to change the parameters governing an animation.

The example program

Angle measurement: Degrees Radians

Go on input

Sorry, apparently this browser does not support HTML 5 canvas tag graphics.

Edit: Runtime          View: Starter Suggestion

To runtime:


Editor width: Normal Wide








Next tutorial: The output gizmo

All contents of EZ Math Movie are copyrighted: Copyright 2011, Edward A. Zobel. All rights reserved.

Other sites you may find interesting

Zona Land Education Like Math and Physics?

Zona Land Education offers explanations, diagrams, and animations on these topics.
And it is all presented in a clear and casual manner.

Here is the link: zonalandeducation.com

EZ Programing Demos Want to learn about programing computers?

EZ Programing Demos has an animated, slow motion, interactive programing language demonstrator.
The site presents basic ideas at a beginner's level.

Here is the link: ezprogramingdemos.com

Custom Search