---
title: "Prodigy · generative art"
description: "Symmetry with Perlin Noise. Generative art plate #15 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/prodigy"
---

![](https://vorillaz.com/_astro/prodigy.CixNxwTG_1XfcGO.webp)

fig. #15 · rendered live in your browser from the code below

# #15 prodigy

Symmetry with Perlin Noise

- date

  2020.03.29

- tags

  generative-art · javascript

- fork

  [codepen ↗](https://codepen.io/TheodoreVorillas/full/KKwEOYR)

Creating progressive animations using Perlin noise can produce linear, visually aesthetic and somehow more natural results, especially for abstract artistic results.

Perlin noise can produce pseudo-random values within a frame of time with smooth results, basically, using Ken Perlin’s algorithm we can create a deterministic vertex within a timeframe. In this example, I have tried to recreate the feeling of a continuous moving blob. Enjoy.

## The algorithm

```javascript
p.blob = (size, xCenter, yCenter, k, t, noisiness) => {
  p.beginShape();
  let angleStep = 360 / 500;
  let r, r1, r2, x, y;
  for (let theta = 0; theta <= 361; theta += angleStep) {
    r1 = p.cos(theta) + 1;
    r2 = p.sin(theta) + 1;
    r = size + p.noise(k * r1, k * r2, t) * noisiness;
    x = xCenter + r * p.cos(theta);
    y = yCenter + r * p.sin(theta);
    p.curveVertex(x, y);
  }
  p.endShape(p.CLOSE);
};
```

## References

- [Processing and Perlin Noise](https://www.youtube.com/watch?v=8ZEMLCnn8v0)