/*https://editor.p5js.org/p5/sketches/Simulate:_Spirograph
* @name Spirograph
* @description This sketch uses simple transformations to create a
* Spirograph-like effect with interlocking circles (called sines).
* Press the spacebar to switch between tracing and showing the underlying geometry.
* Example created by R. Luke DuBois.
* http://en.wikipedia.org/wiki/Spirograph
*/
let NUMSINES = 20; // how many of these things can we do at once?
let sines = new Array(NUMSINES); // an array to hold all the current angles
let rad; // an initial radius value for the central sine
let i; // a counter variable
// play with these to get a sense of what's going on:
let fund = 0.005; // the speed of the central sine
let ratio = 1; // what multiplier for speed is each additional sine?
let alpha = 50; // how opaque is the tracing system
let trace = false; // are we tracing?
function setup() {
createCanvas(710, 400);
rad = height / 4; // compute radius for central circle
background(204); // clear the screen
for (let i = 0; i