fourier.py

function preload(){
  imgjson = loadJSON('https://raw.githubusercontent.com/itspacchu/Javascript-projects/master/fourierCirclesRE/jsondata.json');
  ref = loadImage('imgs/whoCouldItBeEh.png');
}

function setup() {
  //img = loadImage('imgs/whoCouldItBeEh.png');
  width = window.innerWidth;
  height = window.innerHeight;
  thecanvas = createCanvas(width, height);
  thecanvas.position(0,0);
  thecanvas.style('z-index','-2');
  imgpercent = 1;

  t = 0
  timescaler = 1;
  scal = 1;
  frameRate(24);
  x = [];
  elemns = 608;
  // Fourier Calculations
  for(let i = 0;i < elemns;i++){
    q = imgjson[i].x;
    p = imgjson[i].y;
    x[i] = new cmpx(p,q);
  }
  cn = fourierCalculator(x);

  tracer = []
  print(cn);
  circlecount = cn.length;
  
}

function windowResized(){
  width = window.innerWidth;
  height = window.innerHeight;
  resizeCanvas(width,height);
}
class cmpx {
  constructor(a,b){
    this.re = a;
    this.im = b;
  }

  add(c){
    this.re += c.re;
    this.im += c.im;
  }

  mult(c) {
    const re = this.re * c.re - this.im * c.im;
    const im = this.re * c.im + this.im * c.re;
    return new cmpx(re,im);
  }
}
function fourierCalculator(x,dt){
  const fX = [];
  const N = x.length;
  for(let k=0;k<N;k++){
    let sum = new cmpx(0,0);
    let re = 0;
    let im = 0;
    for(let n =0 ;n<N;n++){
      let phi = TWO_PI * k * n / N;
      const c = new cmpx(cos(phi) , -sin(phi));
      sum.add(x[n].mult(c));

    }

    sum.re = sum.re / N;
    sum.im = sum.im / N;
    
    let mag = sqrt(sum.re*sum.re + sum.im*sum.im);
    let ang = atan2(sum.im,sum.re);
    let freq = k;
    fX[k] = {re:sum.re , im:sum.im , mag , ang , freq};

  }
  return fX;
}
function draw() {
  translate(width - 350 , height/2)
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    scale(0.75,0.75);
    translate(300 ,height/4);
    frameRate(24);
   }else{
    scale(1.5,1.5);
    frameRate(60);
   }
  
  background(42);
  let i = 0;
  let i_old = 0;
  let j = 0;
  let j_old = 0;
  push();
  scale(-1,1);
  //image(ref, -260, -370 , img.width , img.height);
  pop();
  background(42,42,42,200);
  strokeWeight(0.3);
  for(let n = 1; n < cn.length;n++){
    i_old = i;
    j_old = j;
    rad = cn[n].mag * scal;
    i += rad * cos(cn[n].freq*t + cn[n].ang + HALF_PI);
    j += rad * sin(cn[n].freq*t + cn[n].ang + HALF_PI);
    stroke(125);

    noFill();
    strokeWeight(0.25);
    ellipse(i_old,j_old,rad*2);
    //ellipse(i, j, 5);
    iv = createVector(i_old, j_old);
    jv = createVector(i, j)
    //drawArrow(iv,jv,'white');
    strokeWeight(0.5);
    line(iv.x,iv.y,jv.x,jv.y);
  }
  fill(255);
  ellipse(i, j, 5);


  //tracing action
  tracer.unshift(createVector(i,j));
  if(tracer.length > 800){
    tracer.pop();
  }

  for(let n = tracer.length-1 ; n > 0  ; n--){
    strokeWeight(1);
    stroke(map(n,0,tracer.length,150,42),map(n,0,tracer.length,150,42),map(n,0,tracer.length,255,42));
    line(tracer[n-1].x,tracer[n-1].y,tracer[n].x,tracer[n].y)
  }
  //ticking
  t+= TWO_PI * timescaler / cn.length;

  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    return;
   }

  translate(-width/4 , 0);
  push();
  rotate(PI/4);
  for(let i = 0; i < 300; i+=60){
    for(let j = 0; j < 300; j+=60){
      fill(255,255,255,120);
      noStroke();
      ellipse(i,j,20);
    }
  }
  pop();
}