An exploration of the 3D extension of the superformula equation with GLSL in p5.js. The presented shapes have 5 parameters that feed the model with the superformula equation. The original scope is to translate biodata to the supershape equation parameters and create real-time biodata digital sculptures. The captured biodata are from BIOPAC's heart rate and respiratory medical devices and deliver biodata in real-time. With every breath, a new virtual artifact is created.
The outcome so far embraces the errors of ray marching and glitches the edges of the shapes. This 'glitch', started as an error, but it turned into an interesting exploration and further translation into other tools and mediums.
How it works:
Application in Javascript with GLSL shaders.
Started with Ray Marching | Michael Walczyk, and adapted further from Karl Yerkes - Supershapes. The GUI interface was created with HTML and the p5.js library gives the user the opportunity to change the parameters of the equation in real time.
The Superformula Equation
By choosing different values for the parameters a, b, m, n1, n2, and n3, different shapes can be generated. The extension of the formula to 3,4, or n dimensions, is possible by the means of the spherical product of superformulas. For the 3D parametric supershape, it had to be obtained by multiplying two superformulas r1 and r2.
x = r1(θ)cosθ * r2(φ)cosφ,
y = r1(θ)sinθ * r2(φ)cosφ,
z= r2(φ)sinφ
[-π/2 ≤ φ ≤ π/2 (latitude), -π ≤ θ ≤ π (longitude)]
Further Explorations:
- Connect this p5.js sketch with Max MSP to get the biodata in real-time.
- Translate the shape into a path or a mesh for potential fabrication.
- Implement the same GLSL code in other tools such as Touchdesigner, Houdini, and Unreal Engine.