# A dynamically deformable circle (+shader)

**URL:** <https://discourse.threejs.org/t/a-dynamically-deformable-circle-shader/33113>\
**Category:** Resources\
**Tags:** uv-mapping, animation, geometry, shaders\
**Created:** [December 29, 2021, 11:25am UTC](https://discourse.threejs.org/t/a-dynamically-deformable-circle-shader/33113 "2021-12-29T11:25:01Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 8, 2022, 8:07pm UTC](https://discourse.threejs.org/t/a-dynamically-deformable-circle-shader/33113/6 "2022-01-08T20:07:02Z")

</div>

**Advanced application**

The method can be used to achieve performant dynamic base geometries very easily.

* * *

`const geometry = new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 360, 10, false );`  
or  
`const geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0, 100, 100, 100 );`

```javascript
  vec3 getPoint( vec3 p ) {
    float r = length( p.xzy );
    float phi = atan( p.x, p.z );
    p.xz += p.xz * 0.2 * r * sin( 3.0 * phi ) * ( 1.0 + cos( u_time ) ); // 4.0 * phi box
    return p;
  }

```

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f152b37bac696eb729c696d0439079172cca6f4.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f152b37bac696eb729c696d0439079172cca6f4.mp4)

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/56c4aee7f0c9125c774571108b46050ad98c77d9.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/56c4aee7f0c9125c774571108b46050ad98c77d9.mp4)

* * *

`const geometry = new THREE.PlaneBufferGeometry( 1.0, 1.0, 100, 100 );`

```javascript
 vec3 getPoint(vec3 p){
    float lenx = length( p.x);
    float leny = length( p.y);
    p.z = 0.04 * ( 1.0 + sin( PI * 24.0 * lenx * leny ) ) * cos( u_time * 0.3 );
    return p;
  }

```

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/6/666cb609f9da3e1fb4d1c8411d710c7e7cd95187.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/6/666cb609f9da3e1fb4d1c8411d710c7e7cd95187.mp4)

* * *

`const geometry = new THREE.PlaneBufferGeometry( 1.0, 1.0, 100, 100 );`

```javascript
  float f( float d ) {       
        return 0.5 * ( 1.0 + sin( d ) ) * sqrt( d );           
  }
  vec3 getPoint( vec3 p ) {   
    float lenx = length( p.x );
    float leny = length( p.y );  
    p.z = ( lenx - leny ) * ( leny - lenx ) * f( lenx ) * f( leny ) * 6.0 * sin( u_time );
    // p.z = ( lenx + leny ) * ( leny + lenx ) * f( lenx ) * f( leny ) * 0.6 * sin( u_time ); // try out
    return p;
  }

```

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/4/2490860ff6cba79dc4f026f9f516e9e314e5186d.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/4/2490860ff6cba79dc4f026f9f516e9e314e5186d.mp4)

* * *

`const geometry = new THREE.TorusGeometry( 1, 0.5, 64, 100 );`

```javascript
  vec3 getPoint( vec3 p ) { 
    p.z = abs( p.z ) > 0.3 ? sign( p.z ) * 0.3 : p.z; // symmetrical
    return p;  
  }

```

![2022-01-09 20.26.01](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/a/5afd4c7ac099fd8da35322a7fdeb85dd428d45f8.png)  
see also [Best way to flatten the top and bottom of a torus geometry - #7 by hofk](https://discourse.threejs.org/t/best-way-to-flatten-the-top-and-bottom-of-a-torus-geometry/23620/7)

* * *

`const geometry = new THREE.BoxGeometry( 1, 1, 1, 360, 1, 1 );`

```javascript
  vec3 getPoint( vec3 p ) {
   // @author prisoner89
    float r = 2.0;
    float R = 3.0;
    float waves = 5.0;
    float angle = p.x * PI * 2.0;
    float radius = p.z > 0.0 ? R : r;
    float y = p.y < 0.5 ? p.y : p.y + sin( p.x * PI * 2.0 * waves ) * 0.25;
    p = vec3( cos( angle ) * radius, y, -sin( angle ) * radius );
    return p;  
  }

```

![2022-01-09 20.53.38](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/0/e042bfa4bba303afe4b2a3541c3061494418043f.png)

see also [How to create sine-wave groove in ring geometry with extrudegeometry? - #6 by prisoner849](https://discourse.threejs.org/t/how-to-create-sine-wave-groove-in-ring-geometry-with-extrudegeometry/23068/6)

---

_[View the full topic](https://discourse.threejs.org/t/a-dynamically-deformable-circle-shader/33113)._