EZ Math Movie, Tutorials, Drawing Functions, With Line Segments

What these look like

Function drawn with tiny line segments

The tiny line segments

Of course, many math functions have a curved shape. Certainly the parabola does. These curves can be approximated quite well by joining together many tiny line segments. If the segments are small enough, the resulting graph will appear properly curved. In this tutorial we will explain and demonstrate this method.

To begin, you find a first, starting point on the function far off to the left. In EZ Math movie this would be the function value at worldXMin. Then you find the second, next point on the function a bit to the right. The amount you move over to the right is called 'delta x' ('change in x'). Connect these two points with a line segment. Then consider the second point to be a new first, starting point and find the new next point on the function a bit to its right, moving over the same amount as before, delta x. Now connect these newest two points with a line segment. And continue this process left to right across the graph.

Again, the amount we move over to the right for each new point is called delta x. In the program code this amount is held in a variable named deltaX. The smaller delta x becomes, the shorter the line segments become, and the smoother the curve of the graph appears.

The line segment method slide show

Line segment function drawing method animation

The detailed explanation

  1. Let's assume that we are going to graph a simple parabola given by the equation y = x2.

    1. Code: y = x * x;

  2. Start with a beginning x-coordinate named x1. Set x1 to an appropriate beginning value, such as the least, or left-most, x-coordinate on the current graph's bounds.

    1. In EZ Math Movie the left-most x-coordinate on the current graph's bounds is held in the variable worldXMin.

    2. Code: x1 = worldXMin;

  3. Name the beginning y-coordinate y1. Using the equation for the function definition set y1 equal to the function's value at x1.

    1. Code: y1 = x1 * x1;

  4. We now have the first endpoint for the small line segment we are about to draw. This first endpoint is (x1, y1).

  5. We need to find the other endpoint, which will be named (x2, y2).

  6. We will imagine moving to the right of x1 a bit and calling this new x-coordinate x2. The amount we move to the right we will call delta-x.

    1. Code: deltaX = 0.1;

    2. Code: x2 = x1 + deltaX;

  7. Next, calculate the new y-coordinate at x2.

    1. Code: y2 = x2 * x2;

  8. Now we have (x1, y1) and (x2, y2). Draw a line segment between them. If the points are close together, which becomes more likely as delta-x gets smaller, then this line segment will appropriately display the curve of the graph to a good approximation.

    1. Code: drawLineSegment(x1, y1, x2, y2);

  9. A tiny section of the function's graph has been drawn. To draw the next adjoining line segment to the right, let the second endpoint become the new first endpoint for this next line segment and then go to step 5.

    1. Code: x1 = x2;

    2. Code: y1 = y2;

  10. Of course, this can go on forever. You must stop increasing the x-coordinate when you reach the greatest, or right-most, x-coordinate. This is often simply the right-most x-coordinate for the current graph's bounds. All of the control over the x-coordinate can be done with the control section of a for loop.

    1. Code: for(x2 = worldXMin; x2 <= worldXMax; x2 += deltaX)

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







An experiment

Try a different value for deltaX. For example, if you set it to a value 1, the graph will appear much less smooth:

deltaX = 1;

Another experiment

Try using a different function. If you draw a straight line function, y = mx + b, you will need a variable for the slope, m, and for the y-intercept, b. These would be set before the for loop:

m = 2;
b = 3;

And if you are drawing the straight line function, you will need to change the calculations for y1 and y2 where they appear in the code:

y1 = (m * x1) + b;
y2 = (m * x2) + b;


Next tutorial: A sine wave

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