21 Card Fun 21 Card Fun Your card is ... Play again?

Math is required in science, technology, engineering and art design. There is no getting around it. Everyone needs to know math!

Math models our world. It helps explain everything around us. It can be challenging, so why not have fun learning it. Check out the SVG images of fractals and the string art. You can do it!

Learning to code is fun, but coding will require math to achieve the program's desired functionality. Examples on this page are done with SVG and Javascript, a powerful combination. Learn to code, it's fun!

Touch Me! ... and I'll turn into a SQUARE! CIRCLE!

Trigonometry and Polygons
Math is not only fun, but very useful. See how math is used to draw polygons, both regular and irregular. Click on the images below to interact with them.

Regular Polygons
Irregular Polygons
Unit Circle

Spirals seem like they should be easy to draw, but without Math it is not easy. You can't use trial and error to get a good looking spiral. Two kinds of spirals, Archimedean and Fibonacci, are shown below. Archimedean spirals are drawn with Cubic Bezer Curves with 8 segments per 360 degrees. Fibonacci spirals are drawn with Arc segments - 4 per 360 degrees.

Archimedean spirals have a radius that changes as a linear function of the rotation angle. The following Archimedean spirals were drawn by calculating the Bezier curve control points. While the math is relatively easy, I could not have done it without the help of Vincent Tan's blog post at polymathprogrammer.com on Reverse Engineering Bezier Curves.

The SVG images are created by appending parameters to this url: http://steamcoded.org/images/spiralmaker.svg.
Parameters are:

  • spirals=1,2,3,4 - can include any numbers 1-4 (separated by commas) for up to 4 spirals
  • segments=number - any number from 1 and 400. There are 8 segments in 360 degrees
  • repeat=number - any number from 0 to 360 - spirals will be created and rotated every repeat degrees
  • rotate=number - any number from 0 to 360 - entire image will be rotated about its center

Each image shows the parameters passed to the url to obtain the image shown. Try it or click on the parameters.

Archimedean Spirals

Fibbonacci spirals are made from arc segments (4 segments/360 degrees) using the Fibonacci sequence: 1,1,2,3,5,8,13,... where the next number in the sequence is the sum of the previous 2 numbers.

The SVG images are created by appending parameters to this url: http://steamcoded.org/images/fibonaccimaker.svg.
Parameters are:

  • spirals=1,2,3,4 - can include any numbers 1-4 (separated by commas) for up to 4 spirals
  • segments=number - any number from 2 and 25. There are 4 segments in 360 degrees
  • repeat=number - any number from 0 to 360 - spirals will be created and rotated every repeat degrees
  • rotate=number - any number from 0 to 360 - entire image will be rotated about its center

Each image shows the parameters passed to the url to obtain the image shown. Try it or click on the parameters.

Fibonacci Spirals

Configurable Graph Paper
Need some graph paper? Who doesn't! Click on the image below and configure the graph paper for what you want. For example, want a 500 by 500 grid with major lines every 50 units and minor lines every 10 units - append ?w=500&h=500&u1=50&u2=10 to the url.

Passed parameters include w for width, h for height, u1 for major grid lines, u2 for minor grid lines, and c for color. If you want different colors for the grid lines use c1 for major grid lines and c2 for minor grid lines - c sets both the same.

Configurable Graph Paper

Click on an image below for a pre-formatted template to create SVG images on a grid. View the source and copy it to your text editor. Then add SVG elements where indicated. When finished, change the grid style from "display:initial;" to "display:none;" and change the opacity of the SVG elements grouping from 0.5 to 1.

SVG Drawing 600x600 Template
SVG Drawing 200x200 Template