# Circumscribe perlin cloud

**URL:** <https://discourse.processing.org/t/circumscribe-perlin-cloud/12152>\
**Category:** Coding Questions\
**Created:** [June 18, 2019, 1:21pm UTC](https://discourse.processing.org/t/circumscribe-perlin-cloud/12152 "2019-06-18T13:21:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![excalibas](https://avatars.discourse-cdn.com/v4/letter/e/b5e925/32.png) [@excalibas](https://discourse.processing.org/u/excalibas)\
**Post date:** [June 18, 2019, 1:21pm UTC](https://discourse.processing.org/t/circumscribe-perlin-cloud/12152/1 "2019-06-18T13:21:26Z")

</div>

Hello, I am trying to draw something that looks like a cloud. I like the effect I get with using perlin noise like this:

```auto
float t1 = 0.0;
float t2 = 10000;
void setup(){
  size(700,700);
  noLoop();
  loadPixels();

}

void draw(){
  float xx=t1;
  for(int i = 0; i<width; i++){
    float yy=t2;
    for(int j = 0; j<height; j++){
      float bright = map(noise(xx,yy,t2),0,1,0,255);
      colorMode(HSB, 256);
      pixels[i + j *width] = color(20, 100, bright); 
      yy += 0.008;

    }
    xx += 0.008;

  }
  updatePixels();
}

```

Can someone help me to find a way to restrict the cloud to a part of the image, preferably forming an oval shape?  
I tried to change width in line 12 to (width-100) but the cloud gets cut and that is not what I am looking for.  
Thank you for the help

---

<div class="post-metadata">

**Author:** ![20203](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/20203/32/8164_2.png) [@20203](https://discourse.processing.org/u/20203)\
**Post date:** [February 25, 2020, 11:47pm UTC](https://discourse.processing.org/t/circumscribe-perlin-cloud/12152/2 "2020-02-25T23:47:16Z")

</div>

Using the dist() function, we can see if the pixels are close enough to the center. I added some new variables at the top to help with adjusting.  
Code:

```auto
float t1 = 0.0;
float t2 = 10000;
int size = 100;
int posX;
int posY;
void setup(){
  size(700,700);
  loadPixels();
  noLoop();
  posX = width/2;
  posY = height/2;
}

void draw(){
  float xx=t1;
  for(int i = 0; i<width; i++){
    float yy=t2;
    for(int j = 0; j<height; j++){
      float bright = map(noise(xx,yy,t2),0,1,0,255);
      colorMode(HSB, 256);
      if(dist(posX, posY, i, j)<size) {
        pixels[i + j *width] = color(0, 100, bright);
      } else {
        pixels[i + j *width] = color(0, 0, 0, 0); 
      }
      yy += 0.008;
    }
    xx += 0.008;
  }
  updatePixels();
}

```

Personally, I don’t like using loadPixles()/updatePixles(), but you do you!

---

<div class="post-metadata">

**Author:** ![excalibas](https://avatars.discourse-cdn.com/v4/letter/e/b5e925/32.png) [@excalibas](https://discourse.processing.org/u/excalibas)\
**Post date:** [February 26, 2020, 9:16am UTC](https://discourse.processing.org/t/circumscribe-perlin-cloud/12152/3 "2020-02-26T09:16:15Z")

</div>

Thanks. The effect I am looking for is more like a cloud in the middle of the image and not so much like a circle with a cloud pattern. I don’t specially like using loadPixles()/updatePixles() it is just the way I found to do something like a cloud. How would you do it?

---

<div class="post-metadata">

**Author:** ![20203](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/20203/32/8164_2.png) [@20203](https://discourse.processing.org/u/20203)\
**Post date:** [February 29, 2020, 3:55pm UTC](https://discourse.processing.org/t/circumscribe-perlin-cloud/12152/4 "2020-02-29T15:55:00Z")

</div>

Sorry about how long I’m taking to get back to you, I think I can have it done by today.