Fourier

Click to start drawing, release to watch the rotaters go

by Drew Christensen

HTML

<label for="circleAmount">Amount of circles:</label><input type="range" min="5" max="50" value="20" step="5" id="circleAmount">
<canvas id="fourier" width="600" height="600"></canvas>
<br/> Click and drag to draw a new path for the circles to trace

CSS

canvas#fourier {
  background-color: white;
  border: 1px solid black;
}

JavaScript

// initialize canvas
let canvas = document.getElementById("fourier");
let ctx = canvas.getContext("2d");

let circleAmount = document.getElementById("circleAmount");

// mouse event stuff
let mouseIsDown = false;
let mouseX = null;
let mouseY = null;

canvas.onmousedown = function() {
  scene = "draw";
  drawing = [];
  mouseIsDown = true;
};
canvas.onmouseup = function() {
  initializeFourier(drawing);
  scene = "trace";
  mouseIsDown = false;
};
canvas.onmousemove = function(event) {
  var rect = canvas.getBoundingClientRect();
  mouseX = event.clientX - rect.left;
  mouseY = event.clientY - rect.top;
  if (mouseIsDown) {
    drawing.push([mouseX - 300, mouseY - 300]);
  }
};
circleAmount.oninput = function() {
  nVisible = circleAmount.value;
};


let nMax = 100; // amount of circles
let nVisible = 100; // visible amount of circles
let timeScale = 0.01; // how quickly the circles rotate
let c = []; // array of lengths for circles
let theta = []; // array of angles for circles

let history = []; // traces out the path of the circles

let square = [
  [200, 200],
  [200, 195],
  [200, 190],
  [200, 185],
  [200, 180],
  [200, 175],
  [200, 170],
  [200, 165],
  [200, 160],
  [200, 155],
  [200, 150],
  [200, 145],
  [200, 140],
  [200, 135],
  [200, 130],
  [200, 125],
  [200, 120],
  [200, 115],
  [200, 110],
  [200, 105],
  [200, 100],
  [200, 95],
  [200, 90],
  [200, 85],
  [200, 80],
  [200, 75],
  [200, 70],
  [200, 65],
  [200, 60],
  [200, 55],
  [200, 50],
  [200, 45],
  [200, 40],
  [200, 35],
  [200, 30],
  [200, 25],
  [200, 20],
  [200, 15],
  [200, 10],
  [200, 5],
  [200, 0],
  [200, -5],
  [200, -10],
  [200, -15],
  [200, -20],
  [200, -25],
  [200, -30],
  [200, -35],
  [200, -40],
  [200, -45],
  [200, -50],
  [200, -55],
  [200, -60],
  [200, -65],
  [200, -70],
  [200, -75],
  [200, -80],
  [200, -85],
  [200, -90],
  [200, -95],
  [200, -100],
  [200, -105],
  [200, -110],
  [200, -115],
  [200, -120],
  [200, -125],
  [200, -130],
  [200,...