Derivatives and IntegralsAn Annotated Discourse

This first example of a GeoGebra demonstration has just the controls for moving the three vertices on the circumfrence of the circle. This is courtesy of Danny Parsons at the African Institute of Mathematical Sciences. This demo requires Java, which could be problematic.

GeoGebra will create screenshots of demonstrations in TikZ/LaTeX code. For a static version, we use this as a figure.

With a totally empty “geogebra” element, you will get a blank slate to play around in. This is based on an example of embedding GeoGebra into Sage notebooks by Bruce Cohen. Notice the full suite of menus and tools (in contrast to the previous example).

Again, this example will run with Java. GeoGebra demonstrations can be run via HTML5 without invoking Java, but this seems to only be possible in the Chrome browser. Support will be expanded, especially if requested.

The plot below is the curve \(r=a+b\theta\) in polar coordinates, for \(0\leq\theta\leq 8\pi\text{.}\) It may be manipulated with the sliders to control the shape of the curve. Point \(A\) is contrained to the curve, but may be dragged to a new location. At \(A\) the tangent line and normal line are plotted as dashed red lines. Use the controls in the lower left to adjust the viewing window. This example is taken from the JSXGraph example wiki. Width is 75% and aspect ratio is 4:3.

JSXGraph is a “cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.” Place Javascript inside an input element inside a jsxgraph element. You will want an xml:id on the jsxgraph element, since it is what will be used as the HTML id on the div that will hold the demonstration, and will typically be used in an early call to the initBoard() method.

Here is a more elaborate example, from the JSXGraph Showcase, titled Infinity. Notice that the code here contains a problematic less-than character for a comparison in a loop. We could replace it by the < XML escape sequence, but we have instead chosen the expedient of using a CDATA construction to wrap the entire hunk of code (see the source for exact syntax). This might be the best solution if the code contains many HTML strings that need to be protected from the XML parser.

There are two active sliders to control the shape and shading of the graphic, and hovering the mouse near one of the edges will highlight the entirety of one of the 30 quadrangles. Finally, each of the four red corners may be dragged to a new location. Width is 60% and aspect ratio is the default, 1:1, i.e. a square.

Here are the two new examples, but the first has been given an extreme aspect ratio, and both are smaller overall. They have been included in a sidebyside layout element (see Section 22) so they can be placed horizontally across the page. (Note: placement in a sidebyside is not yet reflected in the PreTeXt schema.) These are again from the example wiki, the left being Fermat's Spiral and the right being a demonstration of B-splines.

Now, a piecewise function you can control, with traces of the domain values and range values in two separate JSXGraph boards, laid out using the sidebyside layout element.

Be careful about the Javascript code when there are several on the same page, as duplicate variables may affect one another's performance adversely.