This is a collection of interactive graphics. All of the images have control points and inputs where things can be dragged and interfaced with.
This interactive demonstrates different Riemann’s Sum methods for approximating the area underneath a continuous curve. Toggle which method is currently being used, drag both the start and end point to change the interval being approximated, and finally input different numbers for n to see how accurate the approximation is.
This interactive illustrates the connection between the unit circle and the trigonometric functions sine and cosine. Note that the symbol θ represents the current angle and that the radius of the circle is one. Click and drag the control points, press the animate button, or enter an angle into the input box.
Exponents and Logarithms
This interactive demonstrates the basic properties of exponents using the structure of a tree:
The inverse operation, taking the logarithm of a number, is also demonstrated:
Note: The branching factor, b, is often referred to as the base of the logarithm or exponent.
The number PI(π) is defined as the length of any circle’s circumference divided by its diameter:
To approximate π, we can use the perimeter of a n sided polygon to represent the circumference of the circle. As the number of sides increase, the approximation becomes more accurate.
Modular Arithmetic Rotation
This interactive shows how rotation demonstrates modular arithmetic. The total rotation mod 360 is equal to the current angle in degrees. Click and drag the control point to change the total rotation. The equation below describes this mathematically:
Where r represents the total rotation, 360 ° represents one full rotation, and θ represents the current angle or direction.
Polar to Cartesian
This interactive demonstrates how the polar coordinate system and the cartesian coordinate system describe the same point in space. Polar describes a points as a radius and angle: P = (radius, angle). Cartesian describes points as a X and Y component: P = (x, y). Click and drag either point to change the current point for both systems. Toggle degrees to change between radians and degrees. Toggle gridlines to show the layout of each space.
This interactive demonstrates the connection between a right triangle of hypotenuse one and the graph of the cosine function. Click and drag either point to change the angle that describes the right triangle, or change the angle in the input box. It is important to note that the adjacent side of the triangle corresponds to the x component of the point. This is because the circle’s center is at the point (0,0), separate from the graph.
This interactive demonstrates the connection between every right triangle of hypotenuse one and the graph of the sine function. Click and drag either point to change the angle that describes the right triangle, or change the angle in the input box.
This interactive displays Archimedes Spiral. Change the input for a to control the distance between lines, change the input for b to change the starting angle of the spiral, and click the animate button to rotate the spiral. The spiral is graphed in the Polar Coordinate System from the range 0 to 10π using the equation:
This interactive illustrates the definition of an angle formed by two rays. The point where the two rays meet is called the vertex of the angle.
Angle Between Two Vectors
This interactive demonstrates the angle formed between two vectors.
Angle Between Two Vectors Formula
Area Between Two Vectors
This interactive demonstrates how to vectors form the shape of a parallelogram. This area of this shape is of particular interest because of its application to computer graphics, approximating the surface area of a shape, and more. To calculate the area, we can use the property of the cross product operator between to vectors: the magnitude of the cross product of two vectors is equal to area between them.
Cartesian Coordinate System
This interactive demonstrates the Cartesian Coordinate System. Every point’s position is defined by two components: the x-component which measures the horizontal distance from the origin and the y-component which measures the vertical distance from the origin.
Circle Defined By Three Points
This interactive demonstrates how a circle is uniquely defined by three points. The general equation of the circle is given in the form of: The values for A, B, C, and D can be solved using the following determinants. Expanded the values are given by: Then this can be converted to the center point form of the equation of the circle. The center point is given by:
Circle From Two Points and Radius
This interactive demonstrates how a circle can be defined by two points and a radius. Well, admittedly, two circles shown below.
Cubic Bezier Curve
This interactive demonstrates a cubic Bézier curve described by four points. Each of the four points can be dragged to change the shape of the curve.
This calculator returns the factors of the provided number.
Line Defined By Two Points
This interactive demonstrates how to points uniquely define a line.
Midpoint Formula Calculator
Calculate and display the midpoint between two points. Enter a value for the x or y coordinate of either points and the visual will update to show the midpoint and its coordinates. The formula for the midpoint is:
This interactive demonstrates the properties of modular arithmetic on a number-line. Click and drag the point to change the input number. is the same as dividing x by a and returning the remainder of the division.
Point Where Two Lines Intersect
This interactive demonstrates the point where two lines intersect. For this interactive it is assumed that you have the equations of the two lines given below. If not see line defined by two points. Calculating the Position of the Point Start by setting the two lines equal to each other. This will give us the x position where the two lines intersect. Then that position can be substituted back into one of the equations to get the y position.
Polar Coordinate System
This interactive demonstrates the Polar Coordinate System. Every point is defined by an angle and radius relative to the origin of the system. By convention angles are measured, using Cartesian terminology, from the ray defined by the positive x-axis.
This interactive demonstrates the application of an integral for a probability distribution. In this case the area between two points represents the probability of the event x is between the two points.
Quadratic Bezier Curve
This interactive demonstrates a quadratic Bézier curve described by three points. Each of the three points can be dragged to change the shape of the curve.
This interactive demonstrates how a line is “rasterized” or converted to pixels using Bresenham’s Line Algorithm.
This interactive shows the connection between the geometry of a right triangle and the trigonometric functions sine, cosine, tangent, secant, cosecant, and cotangent. Click and drag the point to change the angle of the right triangle, and toggle the different radio inputs to change which function is highlighted.
Unit Circle Angle
This interactive demonstrates how angles can be described using the unit circle.
Unit Circle Right Triangle
This interactive demonstrates the unit circle is used to describe every right triangle with a hypotenuse of one.
This interactive demonstrates a vector. Every vector has a magnitude and direction.
This interactive demonstrates how two dimensional space can be divided so that each region corresponds with the nearest point. Credit goes to Raymond Hill for the underlying algorithm.