epicycle | boilerplate framework for building isomorphic applications | Runtime Evironment library

Before we begin, you may want to read my previous post which lead to the creation of this question:

Drawing/Rendering 3D objects with epicycles and fourier transformations [Animation]

Context:

Using the P5.js library and following a tutorial from The Coding Train (Coding Challenge #130.1 --> #130.3) i was able to animate and recreate any parametric drawing using epicycles and fourier transforms. (Read the Previous Post, trust me, it will help)

I am now looking to expand this to three Dimensions!

A helpful community member suggested breaking the 3D drawing into two planes. This way, i dont have to write new code, and could use my preexisting 2D code! cool right!

Another User suggested using the Three.JS library to create a 3D scene for this process.

So Far i have created 3 planes. I would like to essentially use these planes as TV Screens. TV screens where i can then display my 2D version from written in P5js and project a new point in 3D space to generate/draw a new 3D drawing.

First Note: They wont let me embed images until i have more reputation points (sorry), but all the links are images posted on imgur! :) thanks

I have replicated a method to animate any single path (1 closed path) using fourier transforms. This creates an animation of epicylces (rotating circles) which rotate around each other, and follow the imputed points, tracing the path as a continuous loop/function.

I would like to adopt this system to 3D. the two methods i can think of to achieve this is to use a Spherical Coordinate system (two complex planes) or 3 Epicycles --> one for each axis (x,y,z) with their individual parametric equations. This is probably the best way to start!!

2 Cycles, One for X and one for Y:

Picture: One Cycle --> Complex Numbers --> For X and Y

Fourier Transformation Background!!!:

• Eulers formula allows us to decompose each point in the complex plane into an angle (the argument to the exponential function) and an amplitude (Cn coefficients)

• In this sense, there is a connection to imaging each term in the infinite series above as representing a point on a circle with radius cn, offset by 2πnt/T radians

• The image below shows how a sum of complex numbers in terms of phases/amplitudes can be visualized as a set of concatenated cirlces in the complex plane. Each red line is a vector representing a term in the sequence of sums: cne2πi(nT)t

• Adding the summands corresponds to simply concatenating each of these red vectors in complex space:

Animated Rotating Circles:

Circles to Animated Drawings:

• If you have a line drawing in 2D (x-y) space, you can describe this path mathematically as a parametric function. (two separate single variable functions, both in terms of an auxiliary variable (T in this case):

• For example, below is a simple line drawing of a horse, and a parametric path through the black pixels in image, and that path then seperated into its X and Y components:

• At this point, we need to calculate the Fourier approximations of these two paths, and use coefficients from this approximation to determine the phase and amplitudes of the circles needed for the final visualization.

Python Code: The python code used for this example can be found here on guithub

I have successful animated this process in 2D, but i would like to adopt this to 3D.

The Following Code Represents Animations in 2D --> something I already have working:

[Using JavaScript & P5.js library]

The Fourier Algorithm (fourier.js):