Enter the Cycloid
Our Google Chart version of the Spyrograph toy was due for a refresh - we realised that several users are coming every day to see it, and the script was not easy to use.
Time to clean our script and publish it in a separate page.
Brief Introduction
Our Cycloid visualisation script uses Google's Chart API to render a curve in a IMG object.
Tweaking parameters in the curve results in dramatic variations -including some mermerising patterns. In Mathematics these curves are known as Cycloids with the two main varieties: Epicycloids and Hypocycloids.
The Spyrograph toy produces these curves using plastic sprockets and coloured pens. We do it with Javascript and Google Charts.
Please read our previous article on Charts to find more.
The Toy, Itself
Use the sliders to change any of the four parameters for the curve:
- Yellow: diameter of the Sun (central roller). This changes the overall size of the design.
- Purple: diameter of the Planet (smaller roller). This changes the overall size of the design.
- Blue: distance of the pen fron the centre of the Planet.
- Green: number of revolutions of the Planet around the Sun.
When the curve is a Epicycloid, the Planet revolves outside the Sun's surface. If the curve is a Hypocycloid, it revolves inside the Sun's surface.
Try different combinations of the settings -when the values of Yellow and Purple can be divided evenly, the curve tends to be smoother and symmetrical.
Blue changes the size of the peaks and valleys in the curve. Green controls the number of repetitions -for larger numbers, the graph will become very complex, even chaotic, but at the expense of resolution. Small numbers will produce smoother, curvier curves.
Wrap Up
The nice slider controls in this script are produced by Mootools. Please see them for other examples of clever Javascript controls and behaviours, and to learn about their Open Source tools. Please read their copyright if you plan to use this library for your own projects.
A ZIP archive of the project can be found here. You can also copy and paste the following HTML to mashup the script into your own website or blog:
Disclaimer: This code is posted "as is", with a Creative Commons license and neither Carlos Labs nor any of its representatives guarantee the suitability of this script, or assume any responsibility for your actions.
This script is free to use on any software project, free or otherwise, provided you credit Carlos Labs and you do not remove the header in the script.
Project: 200805B
This script is free to use on any software project, free or otherwise, provided you credit Carlos Labs and you do not remove the header in the script.
Project: 200805B