Created Repo

Author: web-dev-sam

Complex.js

@@ -0,0 +1,44 @@
+class Complex {
+
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  add(comp) {
+    this.x += comp.x;
+    this.y += comp.y;
+    return new Complex(this.x, this.y);
+  }
+
+  scale(scale) {
+    this.x *= scale;
+    this.y *= scale;
+    return new Complex(this.x, this.y);
+  }
+
+  cexp() {
+    return new Complex(exp(this.x) * cos(this.y), exp(this.x) * sin(this.y));
+  }
+
+  mul(b) {
+    const cache = this.x * b.x - this.y * b.y;
+    this.y = this.x * b.y + this.y * b.x;
+    this.x = cache;
+    return new Complex(this.x, this.y);
+  }
+
+  abs() {
+    return dist(0, 0, this.x, this.y);
+  }
+
+  print() {
+    print(this.x + " + " + this.y + "i");
+  }
+  
+  render() {
+    stroke(255);
+    strokeWeight(3);
+    point(this.x * SCALE, this.y * SCALE);
+  }
+}

DFT_Machine.js

@@ -0,0 +1,79 @@
+// #################  SETTINGS  #################
+let   VELO = 0.01,
+      SCALE = 30.0,
+      drawData = false,
+      customMode = false;
+// #################  SETTINGS  #################
+
+let vertices = [];
+let renderer;
+let font;
+
+function preload() {
+  font = loadFont("Quicksand.ttf");
+}
+
+function setup() {
+  createCanvas(800, 800);
+  frameRate(35);
+  
+  // Render fourier text
+  const points = font.textToPoints("Fourier", -width/2 + 50, -height/2 + 420, 192, {
+    sampleFactor: 0.6
+  });
+  vertices = points.map(p => new Complex(p.x / SCALE, p.y / SCALE));
+  //print("Vertices: ", vertices.length);
+  
+  // Calc DFT and initiate animation
+  renderer = new Renderer(DFT(), vertices);
+  renderer.buildEpicycles(vertices.length);
+  vertices = [];
+}
+
+function draw() {
+  background(51);
+  translate(width / 2, height / 2);
+  
+  if (renderer) {
+    renderer.render();
+  }
+}
+
+function mouseClicked() {
+  const x = (mouseX - width/2) / SCALE;
+  const y = (mouseY - height/2) / SCALE;
+  vertices.push(new Complex(x, y));
+  
+  renderer = new Renderer(DFT(), vertices);
+  renderer.buildEpicycles(vertices.length);
+  if (!customMode) {
+    VELO = 0.05;
+    drawData = true;
+    customMode = true;
+  }
+}
+
+/*
+* ###################################################################
+* Discrete Fourier Trasformation (DFT) Algorithm
+* 1/2𝜋∫ 𝑓(𝑡)𝑒⁻ⁿⁱᵗ𝑑𝑡=𝑐ₙ
+*/
+function DFT() {
+  let func = [];
+  for (const n in vertices) {
+    let sigma = new Complex(0, 0);
+    for (const t in vertices) {
+      let unitVector = new Complex(0, 1);
+      unitVector = unitVector.scale(-2 * PI * (n-floor(vertices.length/2)) * (t/vertices.length));
+      unitVector = unitVector.cexp();
+      unitVector = unitVector.mul(vertices[t]);
+      unitVector = unitVector.scale(1/vertices.length);
+      sigma = sigma.add(unitVector);
+    }
+    func.push(sigma);
+  }
+  return func;
+}
+/*
+* ##############################################################
+*/

Epicycle.js

@@ -0,0 +1,45 @@
+
+
+/*
+* A circle with a planet that has a position and a constant velocity
+*/
+class Epicycle  {
+
+  constructor(position, initialDirectionVector, radialVelocity) {
+    this.position = position;
+    this.radialVelocity = radialVelocity;
+    this.size = initialDirectionVector.abs();
+    this.angle = atan2(initialDirectionVector.y, initialDirectionVector.x);
+  }
+
+  getPlanetPosition() {
+    return new Complex(
+      this.position.x + this.size * cos(this.angle),
+      this.position.y + this.size * sin(this.angle)
+    );
+  }
+
+  update() {
+    this.angle += this.radialVelocity * VELO;
+  }
+
+  draw(position) {
+    this.position = position;
+    
+    // Draw vector
+    stroke(200);
+    strokeWeight(1);
+    line(this.position.x * SCALE,
+      this.position.y * SCALE,
+      (this.position.x + this.size * cos(this.angle)) * SCALE,
+      (this.position.y + this.size * sin(this.angle)) * SCALE
+    );
+    
+    // Draw circle
+    stroke(80);
+    noFill();
+    const ax = this.position.x * SCALE;
+    const ay = this.position.y * SCALE;
+    circle(ax, ay, this.size * 2 * SCALE);
+  }
+}

Quicksand.ttf

@@ -0,0 +1,70 @@
+class Renderer {
+  
+  constructor(dftFunction, vertices) {
+    this.dftFunction = dftFunction;
+    this.vertices = vertices;
+    this.path = [];
+  }
+  
+  
+  /*
+  * Builds all epicycle data based on the dft results
+  */
+  buildEpicycles() {
+    this.epicycles = [];
+    const position = new Complex(0, 0);
+  
+    for (let i=0; i<this.vertices.length; i++) {
+      const initialDirectionVector = this.dftFunction[i];  // y-Axis (offset/position)
+      const radialVelocity = i - floor(this.vertices.length / 2); // x-Axis (frequency/velocity)
+      const epicycle = new Epicycle(position, initialDirectionVector, radialVelocity);
+      
+      this.epicycles.push(epicycle);
+      position.add(initialDirectionVector);
+    }
+    
+    this.epicycles = this.epicycles.sort((a, b) => b.size - a.size);
+  }
+  
+  
+  /*
+  * Renders all epicycles
+  */
+  render() {
+    
+    // Draw epicycles
+    let currentCoords = new Complex(0, 0);
+    for (const epicycle of this.epicycles) {
+      epicycle.update();
+      epicycle.draw(currentCoords);
+      currentCoords = epicycle.getPlanetPosition();
+    }
+    
+    // Draw vertex history (result line of epicycle drawing)
+    const lastPlanet = this.epicycles[this.epicycles.length-1];
+    let previousPathPoint = this.path[0];
+    this.path.push(lastPlanet.getPlanetPosition());
+    if (this.path.length > 1) {
+      let i=128;
+      for (const vertex of this.path) {
+        colorMode(HSB, 255);
+        stroke(i%255, 255, 255);
+        strokeWeight(2);
+        if (customMode || dist(vertex.x, vertex.y, previousPathPoint.x, previousPathPoint.y) < 0.8)
+          line(vertex.x * SCALE, vertex.y * SCALE, previousPathPoint.x * SCALE, previousPathPoint.y * SCALE);
+        previousPathPoint = vertex;
+        i+=0.2;
+      }
+    }
+    
+    // Draw vertices (user inputs)
+    if (drawData) {
+      colorMode(RGB, 255);
+      for (const vertex of this.vertices) {
+        stroke(255);
+        strokeWeight(4);
+        point(vertex.x * SCALE, vertex.y * SCALE);
+      }
+    }
+  }
+}

Renderer.js

@@ -0,0 +1,21 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
+  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
+  <script language="javascript" type="text/javascript" src="Complex.js"></script>
+  <script language="javascript" type="text/javascript" src="Epicycle.js"></script>
+  <script language="javascript" type="text/javascript" src="Renderer.js"></script>
+  <script language="javascript" type="text/javascript" src="DFT_Machine.js"></script>
+  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
+
+  <!-- This line removes any default padding and style.
+       You might only need one of these values set. -->
+  <style> body { padding: 0; margin: 0; } </style>
+</head>
+
+<body>
+</body>
+</html>

index.html

@@ -0,0 +1,2 @@
+mode=p5.js
+mode.id=processing.mode.p5js.p5jsMode