> ## Content Index
> Fetch the complete content index at: https://alexcodesart.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Drawing Noisy Circles with p5.js: A Deep Dive into Polar Coordinates and Perlin Noise
- URL: https://alexcodesart.com/drawing-noisy-circles-with-p5-js-a-deep-dive-into-polar-coordinates-and-perlin-noise/
- Published: 2025-06-17T14:08:29.000Z
- Updated: 2026-04-07T12:35:09.000Z
- Author: Alex Postolache
- Tags: Tutorials

In this creative coding tutorial, we’re building animated noisy circles using p5.js. These aren’t just ordinary circles—they pulse, shift, and morph over time. The motion comes from Perlin noise, and the structure is based on polar coordinates. You can tweak everything from color modes to noise intensity via a Tweakpane interface.

Whether you're just starting to learn to code or diving deeper into generative art, this sketch offers a hands-on way to explore math, motion, and design.

---

## The Setup Function

Let’s break down the `setup()` function:

```javascript
function setup() {
  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
  pixelDensity(4);
  setupGui();
}

```

We use `WEBGL` to allow for more advanced transformations and better performance. `pixelDensity(4)` sharpens visuals, especially on high-resolution displays. Finally, `setupGui()` initializes our interactive controls using Tweakpane.

## The Draw Function

Every frame, the canvas refreshes with a new frame of shifting curves:

```javascript
function draw() {
  apply2DTransformations();
  noFill();
  strokeWeight(params.weight);

  colorGen = new ColorGenerator(params.baseColor);
  complementary = colorGen.getShades(2);
  background(complementary[1]);

  switch (params.colorMode) {
    case "tints":
      colors = colorGen.getTints(params.numberOfCurves, 90);
      break;
    case "shades":
      colors = colorGen.getShades(params.numberOfCurves, 10);
      break;
    case "triadic":
      colors = colorGen.getTriadic();
      break;
    case "tetradic":
      colors = colorGen.getTetradic();
      break;
  }

  createNoisyCircles(width / 2, height / 2, colors);
}

```

We:

- Set stroke weight and disable fill
- Generate a background color based on shades of the base color
- Pick a color palette based on the selected color mode
- Call `createNoisyCircles()` to draw all the animated curves

To easily generate colors that work together, I used p5.colorGenerator, a library I created that can be found here:

[GitHub - alexandru-postolache/p5.colorGenerator: A library for p5.js to create color palettes.A library for p5.js to create color palettes. Contribute to alexandru-postolache/p5.colorGenerator development by creating an account on GitHub.![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/icon/pinned-octocat-093da3e6fa40.svg)GitHubalexandru-postolache![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/thumbnail/p5.colorGenerator)](https://github.com/alexandru-postolache/p5.colorGenerator?ref=alexcodesart.com)

## Creating Noisy Circles

Here’s the core of the visual effect:

```javascript
function createNoisyCircles(centerX, centerY, colors) {
  for (j = 0; j < params.numberOfCurves; j++) {
    beginShape();
    stroke(colors[j % colors.length]);
    curveNoiseFactor = params.noiseFactor + j;

    for (i = 0; i <= params.resolution; i++) {
      circlePoint = map(i, 0, params.resolution, 0, TWO_PI);
      curveRadius = j * params.gap;

      x = centerX + cos(circlePoint) * curveRadius;
      y = centerY + sin(circlePoint) * curveRadius;

      n = noise(
        x * params.noiseDetail,
        y * params.noiseDetail,
        frameCount * params.speed
      );

      let offsetX = n * cos(circlePoint) * curveNoiseFactor;
      let offsetY = n * sin(circlePoint) * curveNoiseFactor;

      vertex(x + offsetX, y + offsetY);
    }
    endShape();
  }
}

```

### Shape Drawing: beginShape(), vertex(), endShape()

This trio of functions is how p5.js draws custom shapes.

- `beginShape()` tells p5.js you're about to define a shape.
- `vertex(x, y)` places a point.
- `endShape()` finishes the shape and connects all the points.

In our case, each loop over `i` adds a new vertex to form a circle-like path. Because of the noise, it's not a perfect circle—it looks more organic, like ripples or ink on wet paper.

### The Role of map()

```javascript
circlePoint = map(i, 0, params.resolution, 0, TWO_PI);

```

The `map()` function remaps values from one range to another. Here, we’re taking a loop variable `i` from `0` to `params.resolution`, and translating that into angles from `0` to `TWO_PI` (which is 360° in radians).

This turns each value of `i` into a point along the circle’s circumference.

### Polar Coordinates in Action

```javascript
x = centerX + cos(circlePoint) * curveRadius;
y = centerY + sin(circlePoint) * curveRadius;

```

Using cosine and sine with the angle lets us calculate the x and y coordinates of a point on a circle. Multiply those by the radius, and you've got a full circle around the center.

I explained more about polar coordiantes in this article, if you want to learn more

[Create Abstract Art with p5.js: Animate the Sun and WavesHello and welcome back to another exciting tutorial! Today, we’ll dive deeper into creative coding with p5.js and explore some fundamental programming concepts. In this session, we’ll create an abstract art piece featuring a sun and waves, and by the end, we’ll animate both the sun and the waves![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/icon/Logo--1--1.png)Alex Codes ArtAlex Postolache![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/thumbnail/download--17-.png)](https://alexcodesart.com/create-abstract-art-with-p5-js-animate-the-sun-and-waves/)

### Introducing Perlin Noise

```javascript
n = noise(x * params.noiseDetail, y * params.noiseDetail, frameCount * params.speed);

```

Perlin noise gives us smooth randomness. By feeding it x, y, and time (`frameCount * speed`), we get a shifting value between 0 and 1 that changes slowly and predictably over time.

This noise value is used to create displacement:

```javascript
let offsetX = n * cos(circlePoint) * curveNoiseFactor;
let offsetY = n * sin(circlePoint) * curveNoiseFactor;

```

We offset each vertex outward or inward based on the noise value, creating the effect of a circle that breathes or morphs as time passes.

### Looping Over Multiple Curves

We draw multiple noisy circles by repeating the process `params.numberOfCurves` times. Each circle gets its own radius and slightly different noise factor, which increases outward:

```javascript
curveNoiseFactor = params.noiseFactor + j;

```

The result is a series of layered, animated, organic shapes that shimmer and move independently.

## Interactive Controls with Tweakpane

Users can tweak noise strength, resolution, curve count, spacing, color modes, and stroke thickness:

```javascript
pane.addInput(params, "noiseDetail", { min: 0, max: 0.3, step: 0.001 });
pane.addInput(params, "numberOfCurves", { min: 1, max: 150, step: 1 });
pane.addInput(params, "colorMode", {
  options: { Tints: "tints", Shades: "shades", Triadic: "triadic", Tetradic: "tetradic" },
});

```

This makes the sketch not just a generative system but a playground for experimentation.

## Final Thoughts

This sketch is a fun way to explore how math and noise can work together to produce flowing, organic animations. 

Generative art is all about systems and surprises—and here, both come to life through circles that are never quite the same.

I encourage you to play around with the sliders and see what you can come up with. Here are a few of my results:

![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2025/06/download--1-.png)

![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2025/06/download--2-.png)

![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/2025/06/download--3-.png)

Different results by playing around with the sliders

🥳 That's all, congrats for following along and learning more about creative coding, generative art, Perlin noise and p5.js.

Like always, you can find the full code here:

[Lesson 10 by alex.codes.art -p5.js Web EditorA web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/icon/favicon-2.ico)](https://editor.p5js.org/alex.codes.art/sketches/mukYcMTM8?ref=alexcodesart.com)

---

To stay informed about future articles, feel free to subscribe. It’s free, and your support means a lot. Thank you!

## Sign up for Alex Codes Art

Art with code for curious minds

Subscribe 

Email sent! Check your inbox to complete your signup. 

No spam. Unsubscribe anytime.

---

## Wrapping Up

Thank you for following along with this tutorial! If you have any questions, feedback, or just want to share your own creations, please feel free to leave a comment below. I’ll make sure to respond and help you out as best as I can.

Stay connected for more exciting tutorials and creative coding tips by subscribing to this blog. I really appreciate it!

Happy coding, and see you in the next tutorial!

## Next tutorial

In the next tutorial, we will explore the world of shaders and how we can use them to create metaballs, using a concept called SDFs. I hope to see you there!

[Create Animated Metaballs with Shaders in p5.js — A Creative Coding TutorialHey there and welcome to another tutorial about creative coding and generative art. In this tutorial we will look at what SDFs are and how we can use them to create metaballs. Metaballs are a classic technique in generative art used to create organic, fluid shapes that morph and merge![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/icon/Logo--1--4.png)Alex Codes ArtAlex Postolache![](https://storage.ghost.io/c/02/0d/020db2da-24e8-4541-a343-67633f75baaf/content/images/thumbnail/download--2--1-1.png)](https://alexcodesart.com/create-animated-metaballs-with-shaders-in-p5-js-a-creative-coding-tutorial/)