Skip to content

Pythagorean Theorem MicroSim

Run the Pythagorean Theorem Fullscreen
Edit this Pythagorean Theorem Using the p5.js Editor

Add the following to your website to include this MicroSim in your course:

1
<iframe src="http://dmccreary.github.io/microsims/sims/pythagorean-theorem/main.html" height="470px" scrolling="no"></iframe>

This MicroSim demonstrates the Pythagorean Theorem, one of the most famous theorems in geometry. Note that when you adjust the sliders you change the lengths of two shorter sides of the right triangle. Note that the sum of the squares of sides a and b will always equal the square of side c.

Description of the Pythagorean Theorem MicroSim

  • Side Length Sliders
    • Adjust Length of Side a (base): Slider
    • Adjust Length of Side b (height): Slider
  • Show Squares Button
    • Toggle display of squares on each side: Button
  • Calculate Hypotenuse Button
    • Computes and displays the length of the hypotenuse c: Button
  • Reset Button
    • Resets side lengths to default values: Button

Sample Prompt

Prompt

Create a p5.js sketch of showing a visualization of the Pythagorean theorem. Follow the rules for a width-responsive MicroSim.

  1. Draw a right triangle in the center of the sketch canvas.
  2. Create two sliders that adjust the length of side a (base) and height (b)
  3. Create a toggle button that shows squares made of up sides a, b and c
  4. Show the length of a, b and the length of the hypotenuse C
  5. Add a reset button that resets the lengths to the default button.
  6. Place the equation c² = a² + b² as a title in the upper right
  7. Display the lengths of a, b and c and their squares in the upper left