Drawing with Fourier Transform, Polygon Guesser, Mustafa Bakir, Week 3 assignment

Inspiration

This idea initially was sparked by my a Youtube channel called 3Blue1Brown, from this video specifically.

Design

Initially, before implementing any program, you have to design proper psuedocode and sometimes a flowchart to aid with you coding your project.

I first did my research on the topic, from a page in Wikipedia, this gave me some general ideas of the mathematical concepts used to utilize Discrete Fourier Transformation. I then watched this youtube video to give me a better idea to how to design and implement the DFT algorithm. Moreover, this article gave me more insight on the topic.

I didn’t need to do any sketches as the videos and blogs I watched and read gave me a rough idea, I only had to design the algorithms I am going to use.

I used latex to design my algorithms.

I made use of the built in p5 functions to implement those mathematical notations as such:

Then I implemented the resample function, which standardizes the distribution of points along a given path.

Lastly, I designed the draw function to keep the drawing animated.

Sketch

Creativity elements: what makes this different that other DFT projects?

The usage of DFT (Discrete Fourier Transformation) in video projects or art sketches is usually done by setting certain coordinates for pre-determined shapes and objects. For my project, the user gets to draw their own shape which will be traced by the epicycles, which revolutionizes DFT to be much more utilizable in different fields. The background, being plane black acts as a canvas for the user to not be influenced or distracted with background elements but rather truly unleash the original shape the user has in mind.

Moreover, the big center circle acts as a centralizer, if the user draws a triangle on the corner of the canvas for example, the exact same triangle will be traced but it will be in the middle of the canvas, this enhances user experience and avoids uninentional behavior. Lastly, It would be really hard for the user to precisely trace a fully enclosed shape if the user is using a mouse to draw, therefore, for aesthetic purposes and improved user experience, the shapes automatically close upon mouse release.

Code Highlights

// -------------- epicycle class --------------

// represents one epicycle for fourier reconstruction

class Epicycle {

constructor(x, y, coeff) {

this.x = x; // x coordinate of center

this.y = y; // y coordinate of center

this.freq = coeff.freq; // set freq from coefficient

this.amp = coeff.amp * scaleFactor; // set amplitude with scaling

this.phase = coeff.phase; // set phase from coefficient

}

// compute endpoint of epicycle at given time

update(time) {

let angle = this.phase + TWO_PI * this.freq * time; // calc angle using phase and freq

let dx = this.amp * cos(angle); // calc x displacement

let dy = this.amp * sin(angle); // calc y displacement

return createVector(this.x + dx, this.y + dy); // return new endpoint as vector

}

// draw epicycle's circle on canvas

display() {

stroke(255, 100); // set stroke color with transparency

noFill(); // no fill for circle

ellipse(this.x, this.y, 2 * this.amp); // draw circle with diameter equal to 2 * amp

}

// -------------- epicycle class -------------- // represents one epicycle for fourier reconstruction class Epicycle { constructor(x, y, coeff) { this.x = x; // x coordinate of center this.y = y; // y coordinate of center this.freq = coeff.freq; // set freq from coefficient this.amp = coeff.amp * scaleFactor; // set amplitude with scaling this.phase = coeff.phase; // set phase from coefficient } // compute endpoint of epicycle at given time update(time) { let angle = this.phase + TWO_PI * this.freq * time; // calc angle using phase and freq let dx = this.amp * cos(angle); // calc x displacement let dy = this.amp * sin(angle); // calc y displacement return createVector(this.x + dx, this.y + dy); // return new endpoint as vector } // draw epicycle's circle on canvas display() { stroke(255, 100); // set stroke color with transparency noFill(); // no fill for circle ellipse(this.x, this.y, 2 * this.amp); // draw circle with diameter equal to 2 * amp } }

// -------------- epicycle class --------------
// represents one epicycle for fourier reconstruction
class Epicycle {
  constructor(x, y, coeff) {
    this.x = x; // x coordinate of center
    this.y = y; // y coordinate of center
    this.freq = coeff.freq; // set freq from coefficient
    this.amp = coeff.amp * scaleFactor; // set amplitude with scaling
    this.phase = coeff.phase; // set phase from coefficient
  }
  // compute endpoint of epicycle at given time
  update(time) {
    let angle = this.phase + TWO_PI * this.freq * time; // calc angle using phase and freq
    let dx = this.amp * cos(angle); // calc x displacement
    let dy = this.amp * sin(angle); // calc y displacement
    return createVector(this.x + dx, this.y + dy); // return new endpoint as vector
  }
  // draw epicycle's circle on canvas
  display() {
    stroke(255, 100); // set stroke color with transparency
    noFill(); // no fill for circle
    ellipse(this.x, this.y, 2 * this.amp); // draw circle with diameter equal to 2 * amp
  }
}

This is the class I used that is used to create the epicycles to draw the the traced curves.

if (closedShape && path.length > 0) {

// if closed shape flag set and path exists

vertex(path[0].x, path[0].y); // close shape by connecting to first pt

}

if (closedShape && path.length > 0) { // if closed shape flag set and path exists vertex(path[0].x, path[0].y); // close shape by connecting to first pt }

if (closedShape && path.length > 0) {
  // if closed shape flag set and path exists
  vertex(path[0].x, path[0].y); // close shape by connecting to first pt
}

This code ensures that the shape is closed by checking the distance between initial point and the last point of the array

Struggles I faced

I was struggling with the smoothness of the curves, so I tried to implement a moving average filter, which is a filter for the coordinates. That was really bad so I texted my friend who is pretty smart at coding.

I remembered that a low pass filter is used to smoothen frequencies, and I did impelement that after my friend Iakob inspired me, it ended up so nice.

Future Improvements

The animation of how the shape closes is very fast in relation to the drawing animation, I need to enhance the algorithm to match the number of epicycles and control the speed of the closing animation accordingly

I really dislike how the speed has to change when the number of epicycles changes, and you basically have to trial-and-error your way through, I want to re-implement some stuff to combine those two things which would make anyone whos tweaking the code’s life much easier

AI usage declaration

I admit that I used artificial intelligence to help me with this assignment, especially with the resample function, but all the work, design, concept, and implementation was mine, I only used AI to help me debug and orient/guide me throughout the process of creating this art piece.