# Help writing a visual code for deforming circle

**URL:** <https://discourse.processing.org/t/help-writing-a-visual-code-for-deforming-circle/12648>\
**Category:** Libraries\
**Created:** [July 10, 2019, 6:47pm UTC](https://discourse.processing.org/t/help-writing-a-visual-code-for-deforming-circle/12648 "2019-07-10T18:47:08Z")\
**Posts on this page:** 1\
**Showing post:** 14

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 14, 2019, 4:30pm UTC](https://discourse.processing.org/t/help-writing-a-visual-code-for-deforming-circle/12648/14 "2019-07-14T16:30:25Z")

</div>

Returning to the morph base sketch concept:

[https://processing.org/examples/morph.html](https://processing.org/examples/morph.html)

…you can demonstrate adding audio to the morph demo by changing a single line to add random noise:

```
vertex(v.x + random(-5,5), v.y + random(-5,5));

```

The concept is that each vertex is a combination of two things – its geometric postiion (a square, a circle, whatever) and its audio displacement. Create an ArrayList of current geometry vertices and another of target vertices to lerp towards – periodically load an new geometry into the target array, and now you have a morphing display (as in the starting morph sketch). This can be used for [squircles](https://discourse.processing.org/t/rect-corner-radius-issue-squircles/3924) – or any closed shape, really.

Now, for any geometry, add audio displacement at draw time. You can do clever things with the displacement by using the built-in PVector methods. For example, rather than adding random x,y, you can PVector.lerp() your geometry point into a display point that is shifted away from (or towards) the center of the sketch, creating radial displacement – or even make that “center” a bouncing ball, or track the mouse, etc–so audio displacement is mapped onto your base vertex geometry, but also interactive and/or the mapping changes over time.

```auto
  PVector center = new PVector(mouseX-width/2, mouseY-height/2);
  for (PVector v : morph) {
    PVector v2 = v.copy().lerp(center, random(-0.5, 0.5));
    vertex(v2.x, v2.y);
  }

```

---

_[View the full topic](https://discourse.processing.org/t/help-writing-a-visual-code-for-deforming-circle/12648)._