🏐🧘🏻‍♀️ The Breathing Deformer: Customizable Sphere

• Prompt & Resources

<aside> 💡 I wanted to make a customizable sphere where players can drag vertices of the sphere and model their own 3D mesh

</aside>

🎨 Final Sketch

🔵 # 1 Version, This creature deforms by users dragging its lines. It internalizes the external forces to become a coherent being.

• drag the white lines outward to deform
• scroll to zoom in & out
• drag empty spaces to spin

Screen Recording 2023-03-28 at 11.09.40 PM.mov

https://editor.p5js.org/junebee66/sketches/BJObbh_eH

💡Idea of Customizable Pictures

<aside> 💡 What if the customizable deformation is intelligent which always balance itself into a coherent being

</aside>

1️⃣ A Simple Sphere - the 360 direction

• Sphere has faces of all directions → creating more platforms and spaces for deformations

2️⃣ Shader for Distortion - Soften Rigidbody & Color Sections

• using shaders is a easy way to:
  • access vertices
  • and determine plane sections (good for debugging too)

3️⃣ Dynamic Vertices & Chain Effects - Toxiclibs Physics

• Vertices = Verlet2DParticle
  • every vertices are draggable = customizable mesh
• Lines/ Connections/ chain effects = Spring
  • spring motions = cancel/balance external force

Screen Recording 2023-03-28 at 11.09.04 PM.mov

Screen Recording 2023-03-28 at 11.01.08 PM.mov

✍🏻 Making Process

1️⃣ Simple Sphere

By using theta to draw out the sphere instead of using sphere p5 built-in geometry helps to get every point of a sphere easier. Initally I was thinking of distorting the sphere right when I make them like the sketch on the right, but it ended up having too many particles at initalization/setup() and the sketch will never load. Therefore, I tried different shapes and figured a simple sphere is the easiest.

• references

https://editor.p5js.org/junebee66/full/5jN5ZSgKE

for(let phi = 0; phi < 180; phi += 360/24){
    beginShape();
    for(let theta = 0; theta < 360; theta += 360/24){
      let x = r * cos(phi);
      let y = r * sin(phi) * sin(theta);
      let z = r * sin(phi) * cos(theta);
      vertex(x, y, z);
    }
    endShape(CLOSE);
  }

https://editor.p5js.org/junebee66/full/gGfWX-mOT

2️⃣ Shader for Distortion

Screen Recording 2023-03-28 at 6.48.23 PM.mov

https://editor.p5js.org/junebee66/full/cmlA62e-J

I used a shader that my shader professor gives us as a sample to distort a mesh with a noise map. I found that it will be interesting to have these method of accessing vertices to be implemented first then have the VerletParticle to interact with toxiclibs physics. Moreover, it also colors different faces of the mesh with different colors. It is also good debugging tool.

<script id="phong.vert" type="x-shader/x-vertex"> 
  
    #ifdef GL_ES
      precision highp float;
      precision mediump int;
    #endif

    // attributes, in
    attribute vec3 aPosition;
    attribute vec3 aNormal;
    attribute vec2 aTexCoord;
    attribute vec4 aVertexColor;

    // attributes, out
    varying vec3 var_vertPos;
    varying vec4 var_vertCol;
    varying vec3 var_vertNormal;
    varying vec2 var_vertTexCoord;
    
    // matrices
    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;
    uniform mat3 uNormalMatrix;

    void main() {
      gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

      // just passing things through
      var_vertPos      = aPosition;
      var_vertCol      = aVertexColor;
      var_vertNormal   = aNormal;
      var_vertTexCoord = aTexCoord;
    }

  </script>

• Full Shader Code

Screen Recording 2023-03-28 at 10.36.28 PM.mov