Creating a Dynamic Cobwebbing Demonstration with Geogebra

Elisha Peterson
United States Military Academy

Abstract: This is a tutorial describing how to use Geogebra to implement a cobwebbing demonstration. The techniques demonstrated can also be applied to many situations involving numerical and recursive techniques.

NOTE: Readers unfamiliar with Geogebra may wish to refer to [2] for a basic introduction. You can leave comments or questions at the bottom of the page.


Cobwebbing is a basic technique useful for visualizing solutions to simple recurrence equations. Given an initial value $x_0$, the recurrence $x_n=f(x_{n-1})$ determines a sequence of points

\begin{align} x_0, x_1=f(x_0), x_2=f(x_1)=f(f(x_0)), \ldots, x_n=f(x_{n-1})=f(f(\cdots f(x_0)\cdots)), \ldots. \end{align}

Typically, one is interested in the long-term behavior of this sequence. Does it converge? Does it approach a limit cycle? What else can you say about the sequence? Cobwebbing is a successful technique in large part because it provides a visual approach to determining the long-term behavior of the system. In particular, it can be used to show directly how the slope of the function $f$ determines much of that behavior.

Geogebra is a free open-source mathematics tool designed for the interactive exploration of mathematics[1]. Partly a dynamic geometry platform, partly a computer algebra system, it enables the creation of workbooks that beg for user interaction. This tutorial describes how to create a cobwebbing workbook that allows the user to change the initial point $x_0$, the recurrence function $f$, and the number of iterations displayed on the cobwebbing plot. It covers some advanced techniques such as using the Iteration command, designing customized functions with Geogebra's Tool feature, and creating webpages that support Javascript interactions.

How Cobwebbing Works

How does cobwebbing work? First, plot the function $y=f(x)$ along with the diagonal line $y=x$. The resulting figure makes it immediately obvious whether any fixed points exist; the number of intersections is precisely the number fixed points. Second, mark the point $(x_0,0)$ and draw a vertical line from the point to the function (whether above or below the point). Third, draw a horizontal line from that point to the diagonal line. This results in a line segment from $(x_0,0)$ to $(x_0,f(x_0))$, and another from $(x_0,f(x_0))$ to $(f(x_0),f(x_0))$. Fourth, repeat this process starting with the point on the diagonal. Continuing in this manner, the $x$-values of the vertical segments correspond to the values $\{x_i\}$ in the sequence. Figure 1 shows cobwebbing in action.


Figure 1. Cobwebbing demonstrates that iterating the sequence $x_n=x_{n-1}(3-x_{n-1})$ with initial condition $x_0=0.25$ slowly approaches the fixed point $x^*=2$.

Designing the First Iteration

Figure 2. The function, an initial point, and the $y=x$ line.

We'll start by inputting a function and the initial point $(x_0,0)$. Type

into the input line. Next, type in y=x to draw the diagonal line. Finally, select the image032.gif Point tool and click somewhere on the x-axis (not too close to any intersections with other objects). This ensures the point is constrained to move on the axis. Check the constraint by hitting Esc and moving the point around.

At this point, you can change the appearances or names of any of the objects, by right-clicking on the object and selecting "Properties". You should end up with something similar to Figure 2.

We can now implement the cobwebbing technique. There are a few ways to generate additional points that move when the initial point is shifted. We demonstrate two different methods. In what follows, we assume the initial point is named "A", the function is named "f", and the line $y=x$ is named "a".

Method 1: Using Perpendicular Lines and Points of Intersection

Figure 3. Creation of horizontal and vertical lines for the "up and over" cobweb construction.

The first method uses standard toolbar features.
  1. Select the Perpendicular line image044.gif tool, click on the point A, and then click on the x-axis. This creates a vertical line.
  2. With the same tool selected, move your mouse to the intersection of the vertical line and the function $f(x)$. Once both pieces are highlighted (indicated by an increase in line thickness), click to select the point of intersection. Then, click on the y-axis. This creates a horizontal line through the point $(x_0,f(x_0))$.
  3. Create a point at the intersection of the horizontal line and the diagonal line $y=x$ by selecting the Point tool and clicking the point of intersection.

Check that the dynamic structure is working properly by adjusting the point A. The additional lines should also move. The points that are free appear colored, while points that are not free appear black. The workbook should look like Figure 3.

You could leave the lines as is, but it's probably better to visualize segments than lines. My trick for fixing this problem follows. First, hide the lines by right-clicking on each and deselecting the "Show object" option. Second, use the Segment image037.gif tool to add segments between each pair of points. Alternately, one could use the Vector image035.gif tool to display segments with arrows.

I finish by cleaning up the workbook. Right-click on the objects whose labels are unnecessary and deselect the "Show label" option. This is also a good time to change the visual appearance of the figure. If you want to go with a minimalist approach, you may even wish to hide the displayed points and just display the lines. One useful trick is the Copy visual style tool, which allows you to quickly duplicate a visual style that you've created. See Figure 4 for my result.

Method 2: Using Manual Input

The second method uses direct input, and minimizes the creation of unnecessary features like the horizontal and vertical lines in the above. Here is the process:

  1. Type Segment[A,(x(A),f(x(A)))] into the input bar. This creates the desired vertical segment. Note that "x(A)" indicates the value of the x-coordinate of the point A.
  2. Create the horizontal segment by typing in Segment[(x(A),f(x(A))),(f(x(A)),f(x(A)))].
  3. Turn off the labels on the segments, and change the appearance as desired.

Visually, this provides exactly the same output as the first result, as seen in Figure 4.

Figure 4. Clean version of the perpendicular-line construction.
Figure 5. Cobweb construction using direct algebraic input.

Subsequent Iterations

You could repeat either process to generate several steps of the cobweb diagram, but it's easier to automate the process. We describe two methods for iterating the process, which illustrate some of the most useful features of Geogebra.

Method 1: Tools

The first technique is to create a Tool. A tool is a customized function (or macro) in which several output objects are dependent on several input objects. Most of the functions we have used thus far are tools. Geogebra permits users to design their own tools as well.

The tool created here will have as inputs the function and initial point, and as outputs the vertical and horizontal cobweb lines. You must have completed one of the methods above before beginning this section. See Figure 6 for a visual of this process.

  1. Select "Tools»Create New Tool…" from the menu. You select the outputs first. Select the vertical and horizontal segments corresponding to the first iteration.
  2. For the inputs, select the function and the point A. The order in which these are listed corresponds to the order in which they must be selected to use the tool later, so be sure they are ordered properly. I prefer to select the point first, so I moved the point to the top of the list.
  3. Give the function a name (like "CobwebIteration"), and for help type in "Point, Function". This provides a useful reminder of the order of inputs when the tool is selected.
tool1.jpg tool2.jpg tool3.jpg

Figure 6. Creating the CobwebIteration tool.

After clicking "Finish", the tool shows up in the normal toolbar. You can use the tool to perform further cobweb iterations by selecting the point of intersection of the last segment with the $y=x$ line, and then the function. Figure 7 demonstrates the result after several iterations. Note the new button on the right side of the toolbar. You can also save the tool just created, for use in other workbooks, by selecting "Tools»Manage Tools…" from the menu.


Figure 7. Iterated cobweb construction with a user-created tool.

The workbook is now fully functional as a demonstration of the cobwebbing technique. The author's versions are attached to this page1. In the next section, we'll make the demo a little more powerful by allowing the user to change the number of iterations dynamically.

Method 2: Sequence

Geogebra also has the functionality to construct a sequence of objects which depend on some input parameter. This requires knowing a little more of the command line structure, but offers the added functionality of being able to choose the desired number of iterations.

There are two types of iteration processes available: Sequence, which produces a list of objects indexed by a particular value, and Iteration, which produces a list of numbers formed by iterating a single function.

Be sure the function f, the point A, and the line $y=x$ have all been defined. We first create a slider that can be used to dynamically change the number of iterations displayed on the window. Begin by selecting the Slider image061.gif tool and clicking somewhere in the window. Rename the slider "numIterations". Then set the minimum value to 1, the maximum value to 50, and the increment to 1. Next, type

values = IterationList[f,x(A),numIterations]

into the input line. This should create a list of several values with the name "values". To create the horizontal and vertical segments, use the Sequence command. Type the following three lines into the input:
cobwebHorizontal = Sequence[
    Segment[(Element[values, i], Element[values, i+1]), (Element[values, i+1], Element[values, i+1])],
    i, 1, numIterations-1]
cobwebVertical = Sequence[
    Segment[(Element[values, i], Element[values, i]),    (Element[values, i], Element[values, i+1])],
    i, 2, numIterations]

Now you should be able to adjust the number of cobweb iterations by moving the slider. Figure 8 shows the resulting figure. The Geogebra workbook generated by the author using the Sequence and Iteration commands is attached below (CobwebIteration-Sequence.ggb).

Figure 8. Cobweb construction with slider, allowing the user to change the number of iterations.

At this point, the user could export the displayed figure as an image file, creating beautiful images of cobwebbing. Figure 1 was exported from Geogebra as an SVG, or "Scalable Vector Graphics" file. This type of file can be displayed at any resolution without loss of image quality.

Exporting the Applet to the Web

Geogebra allows you to easily post workbooks that you create to a website. This section describes how to do this, and how to use Javascript to provide the user with a textbox to input the function directly.

Exporting to the Web

Figure 9. Exporting a Worksheet to HTML.

Exporting to the web using Geogebra is a simple process. Go to "File»Export»Dynamic Worksheet as Webpage (html)" or press Ctrl+Shift+W. This loads a template, shown in Figure 9, which allows you to fill in text before and after the worksheet. Under the "Advanced" tab, you can change the displayed size of the worksheet, control whether or not the menu and toolbars are displayed, and so on.

Warning: It is best to resize the window to your desired size before exporting. Otherwise, the change in size may not display all the objects in your worksheet properly, or may not display some of them at all.

Once you click "Export", an html file will be created along with a new worksheet file .ggb and two .jar files that are required for Java to run the program: geogebra.jar and geogebra_properties.jar. In order for the applet to work, you will need to upload all four files to a web folder, and link to the html file. Note that in some cases the .ggb files will not load properly because the file type is not "enabled" on the server. If this comes up, you can ask IT to permit you to post .ggb files. The author's version is posted here.

Adjusting the HTML and Implementing Javascript

After the html file has been created, it can be modified directly or with an html editor. One can add additional titles, links, and text, or update the appearance.

One particularly nice feature of Geogebra is that it can interface with Javascript. We'll create a simple form that the user can use to input a new function, similar to that shown in Figure 10. The Javascript code required is minimal. For further details on the Geogebra/Javascript interface, see [5, 6].


Figure 10. Javascript form input used to interface with Geogebra cobwebbing worksheet.

To implement the form, I inserted the following html code block immediately before the applet:

    <p align=center>
    Change function: <b>f(x)=</b>
    <input type="text" name="T1" size="20" value="3x-x^2">
    <input type="button" value="Submit" name="B1"
    <input type="button" value="Reset" name="B2"
<applet name="ggbApplet" ....

The two commands used to interface with Geogebra are evalComand(), which takes as argument a String and is equivalent to typing a command at the Input line, and reset(), which restores the applet to its initial state. The author's applet with user-input form is posted here.


Much more is possible using Geogebra. An outstanding resource is the online wiki [4]. My collection of worksheets and webpages created with Geogebra is available at [7].

1. Geogebra (application), available by download or Java WebStart at
2. Geogebra Documentation, available at
3. Creating Mathlets with Open-Source Tools, Markus Hohenwarter and Judith Preiner, available at
6. Creating Interactive Exercises using JavaScript, Markus Hohenwarter and Judith Preiner, available at
7. Collection of Geogebra webpages and worksheets, available at

Comments and Questions

Add a New Comment

Please up-vote this page if you like its contents!

rating: +1+x

Leave a comment or a question below:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License