Fourier Transform

var duration, center, svgPoints, datas, cs, pg, lastPos;

var cycleCount = 250;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pg = createGraphics(windowWidth, windowHeight);

  duration = PI*2.0;

  center = createVector(width*0.5, height*0.5);

  svgPoints = [-91.20001, 47.600006, -81.0, 36.100006, -71.20001, 27.600006, -61.0, 20.200012, -44.600006, 11.399994, -29.899994, 3.0, -18.799988, -3.0, -5.299988, -9.5, 1.2000122, -13.700012, 8.600006, -21.100006, 17.899994, -32.299988, 24.899994, -42.899994, 30.0, -54.0, 31.399994, -67.100006, 30.0, -81.899994, 25.799988, -92.20001, 17.899994, -103.70001, 6.799988, -112.600006, -5.600006, -118.2, -18.100006, -118.899994, -30.799988, -116.8, -51.5, -109.8, -64.29999, -105.2, -77.29999, -98.899994, -91.20001, -91.70001, -102.600006, -84.70001, -115.399994, -75.899994, -125.600006, -68.0, -135.8, -60.100006, -146.7, -49.399994, -153.9, -36.399994, -160.9, -20.200012, -166.0, -2.5, -169.7, 19.799988, -172.0, 34.600006, -172.0, 52.299988, -170.6, 69.0, -168.3, 82.899994, -165.0, 96.399994, -158.2, 109.79999, -150.2, 124.70001, -148.8, 137.70001, -152.0, 153.0, -158.2, 169.09998, -160.4, 183.20001, -160.9, 200.40002, -158.2, 213.5, -153.0, 222.70001, -142.7, 237.5, -135.3, 245.0, -125.600006, 252.40002, -111.2, 259.8, -93.100006, 267.2, -67.100006, 274.2, -42.0, 277.0, -12.299988, 278.40002, 21.600006, 278.40002, 47.600006, 277.0, 72.20001, 274.2, 95.5, 268.59998, 116.79999, 261.2, 137.70001, 250.5, 156.29999, 236.59998, 169.29999, 218.0, 173.90002, 195.29999, 173.90002, 173.0, 165.59998, 154.40002, 150.70001, 137.70001, 137.70001, 153.5, 128.9, 162.29999, 115.399994, 171.09998, 99.600006, 179.0, 80.600006, 185.09998, 60.899994, 189.70001, 43.0, 192.5, 20.200012, 194.79999, -1.1000061, 195.29999, -27.899994, 193.90002, -48.899994, 191.59998, -66.600006, 187.40002, -85.100006, 182.29999, -106.100006, 172.5, -125.100006, 159.09998, -138.1, 146.79999, -150.2, 124.70001, -138.1, 146.79999, -125.100006, 159.09998, -106.100006, 172.5, -85.100006, 182.29999, -66.600006, 187.40002, -48.899994, 191.59998, -27.899994, 193.90002, -1.1000061, 195.29999, 20.200012, 194.79999, 43.0, 192.5, 60.899994, 189.70001, 80.600006, 185.09998, 99.600006, 179.0, 115.399994, 171.09998, 128.9, 162.29999, 137.70001, 153.5, 150.70001, 137.70001, 160.59998, 115.399994, 168.40002, 87.5, 173.90002, 56.399994, 176.29999, 30.899994, 176.29999, 7.700012, 173.5, -18.299988, 167.90002, -37.799988, 159.29999, -55.899994, 147.5, -71.29999, 135.4, -85.70001, 117.79999, -97.5, 96.5, -101.899994, 73.20001, -101.899994, 59.0, -99.5, 45.5, -93.600006, 36.299988, -87.29999, 30.0, -81.899994, 31.399994, -67.100006, 30.0, -54.0, 24.899994, -42.899994, 17.899994, -32.299988, 8.600006, -21.100006, 1.2000122, -13.700012, -5.299988, -9.5, -18.799988, -3.0, -29.899994, 3.0, -44.600006, 11.399994, -33.600006, 19.799988, -27.899994, 30.0, -27.899994, 50.899994, -31.799988, 66.20001, -41.100006, 82.20001, -31.799988, 66.20001, -27.899994, 50.899994, -27.899994, 30.0, -13.700012, 40.600006, 1.3999939, 46.700012, 18.399994, 48.5, 32.799988, 45.299988, 49.0, 37.399994, 67.100006, 24.899994, 85.20001, 7.200012, 96.899994, -2.100006, 109.70001, -8.600006, 125.20001, -11.799988, 109.70001, -8.600006, 96.899994, -2.100006, 85.20001, 7.200012, 67.100006, 24.899994, 49.0, 37.399994, 32.799988, 45.299988, 18.399994, 48.5, 1.3999939, 46.700012, -13.700012, 40.600006, -27.899994, 30.0, -33.600006, 19.799988, -44.600006, 11.399994, -29.899994, 3.0, -18.799988, -3.0, -5.299988, -9.5, 1.2000122, -13.700012, 8.600006, -21.100006, 17.899994, -32.299988, 24.899994, -42.899994, 30.0, -54.0, 31.399994, -67.100006, 30.0, -81.899994, 25.799988, -92.20001, 17.899994, -103.70001, 6.799988, -112.600006, -5.600006, -118.2, -18.100006, -118.899994, -30.799988, -116.8, -51.5, -109.8, -64.29999, -105.2, -77.29999, -98.899994, -91.20001, -91.70001, -102.600006, -84.70001, -115.399994, -75.899994, -125.600006, -68.0, -135.8, -60.100006, -146.7, -49.399994, -141.4, -80.5, -140.0, -98.899994, -140.9, -118.600006, -141.4, -146.0, -140.4, -180.2, -137.6, -212.4, -132.5, -238.0, -123.7, -260.2, -112.600006, -272.3, -98.20001, -280.2, -82.79999, -283.0, -73.600006, -282.9, -62.0, -279.7, -50.799988, -273.7, -41.700012, -264.6, -36.399994, -256.5, -30.399994, -239.8, -27.899994, -219.4, -30.399994, -190.1, -32.200012, -164.1, -32.700012, -144.6, -30.799988, -116.8, -18.100006, -118.899994, -5.600006, -118.2, 1.2000122, -145.1, 6.299988, -171.6, 12.299988, -196.2, 18.399994, -222.2, 24.899994, -247.2, 35.100006, -264.0, 49.5, -277.0, 59.600006, -280.2, 69.899994, -280.7, 79.70001, -280.4, 89.0, -278.8, 97.600006, -275.2, 105.70001, -269.1, 112.20001, -262.0, 118.20001, -251.9, 124.29999, -230.1, 125.600006, -205.9, 124.29999, -180.2, 121.0, -156.7, 115.399994, -133.9, 107.79999, -99.5, 96.5, -101.899994, 73.20001, -101.899994, 59.0, -99.5, 45.5, -93.600006, 36.299988, -87.29999, 30.0, -81.899994, 31.399994, -67.100006, 30.0, -54.0, 24.899994, -42.899994, 17.899994, -32.299988, 8.600006, -21.100006, 1.2000122, -13.700012, -5.299988, -9.5, -18.799988, -3.0, -29.899994, 3.0, -44.600006, 11.399994, -61.0, 20.200012, -71.20001, 27.600006, -81.0, 36.100006];

  processData();

}

​

function draw() {

  var globalTime = millis()*0.001;

  pg.background(0, 5);

  pg.strokeWeight(6);

  pg.stroke(255);

  let factor = (globalTime % duration) / duration;

  if (!lastPos) {

    lastPos = iDFT(factor);

    return;

  }

  let pos = iDFT(factor);

  pg.line(lastPos.x+center.x, lastPos.y+center.y, pos.x+center.x, pos.y+center.y);

  lastPos = pos;

  image(pg, 0, 0);

  drawCycles(globalTime);

}

​

function drawCycles(t) {

  let last = createVector(width*0.5, height*0.5);

  noFill();

  stroke(0, 255, 255, 200);

  for(let i = 0 ; i < min(/*cycleCount*/ 80, cs.length) ; i++) {

    strokeWeight(lerp(1, 3, float(i)/cs.length));

    let c = cs[i];

    let offset = createVector(cos(t*c.freq+c.phase), sin(t*c.freq+c.phase)).mult(c.amp);

    ellipse(last.x, last.y, c.amp*2, c.amp*2);

    line(last.x, last.y, last.x + offset.x, last.y + offset.y);

    last.add(offset);

  }

}

​

function processData() {

  datas = [];

  for(let i = 0 , N = svgPoints.length ; i < N ; i+=2) {

    datas.push(createVector(svgPoints[i], svgPoints[i+1]));

  }

  cs = DFT(datas);

  cs.sort(function(a, b) {

    return b.amp - a.amp;

  }); 

}