# Trying to make a perlin noise loop into a Music visualization

**URL:** https://discourse.processing.org/t/trying-to-make-a-perlin-noise-loop-into-a-music-visualization/20988
**Category:** Coding Questions
**Created:** [May 17, 2020, 10:34pm UTC](https://discourse.processing.org/t/trying-to-make-a-perlin-noise-loop-into-a-music-visualization/20988 "2020-05-17T22:34:12Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Cub](https://avatars.discourse-cdn.com/v4/letter/c/a183cd/32.png) [@Cub](https://discourse.processing.org/u/Cub)
#### Post date: [May 17, 2020, 10:34pm UTC](https://discourse.processing.org/t/trying-to-make-a-perlin-noise-loop-into-a-music-visualization/20988/1 "2020-05-17T22:34:12Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

```auto
int totalFrames = 100;
int counter = 0;
boolean record = false;

Particle[] particles = new Particle[100];

void setup() {
  size(600, 600);
  for (int i = 0; i < particles.length; i++) {
    particles[i] = new Particle();
  frameRate(1000);
    
  }
  
}

void draw() {
   float percent = 0;
  if (record) {
    percent = float(counter) / totalFrames;
  } else {
    percent = float(counter % totalFrames) / totalFrames;
  }
  render(percent);
  if (record) {
    saveFrame("output/gif-"+nf(counter, 3)+".png");
    if (counter == totalFrames-1) {
      exit();
    }
  }
  counter++;
}

void render(float percent) {
  background(10);
  float a = percent * TWO_PI;
  for(Particle p : particles) {
    p.render(a);
  
 
   
   
  }
  
}
class Particle {
  NoiseLoop xNoise;
  NoiseLoop yNoise;
  NoiseLoop dNoise;
  NoiseLoop rNoise;
  NoiseLoop bNoise;

  Particle() {
    xNoise = new NoiseLoop(0.2, 0, width);
    yNoise = new NoiseLoop(0.2, 2, height);
    dNoise = new NoiseLoop(1, 100, 255);
    rNoise = new NoiseLoop(1, 100, 255);
    bNoise = new NoiseLoop(1, 100, 255);
  }

  void render(float a) {
    stroke(0, 0, 255);

    float y = yNoise.value(a);

    float r = rNoise.value(a);
    float b = bNoise.value(a);
    fill(r, 0, b, 5);
    rect(y, y, y, y);

    rect(y, y, -y, -y);
  }
}
class NoiseLoop {
  float diameter;
  float min, max;
  float cx;
  float cy;
  
  NoiseLoop(float diameter, float min, float max) {
    this.diameter = diameter;
    this.min = min;
    this.max = max;
    cx = random(100);
    cy = random(100);
    
  }
  
  float value(float a) {
    float xoff = map(cos(a), -1, 1, cx, cx + diameter);
    float yoff = map(sin(a), -1, 1, cy, cy + diameter);
    float r = noise(xoff, yoff);
    return map(r, 0, 1, min, max);
  }
}

```

---

<div class="post-metadata">

### Author: ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)
#### Post date: [May 18, 2020, 1:26am UTC](https://discourse.processing.org/t/trying-to-make-a-perlin-noise-loop-into-a-music-visualization/20988/2 "2020-05-18T01:26:55Z")

</div>

Hey Cub, welcome to the forums. Please include a thorough description of your problem at the top of your post. It’s not enough to have a vague request in the title.