# Trying to target an area of square to apply noise function

**URL:** <https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786>\
**Category:** Coding Questions\
**Created:** [June 18, 2021, 10:17pm UTC](https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786 "2021-06-18T22:17:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 18, 2021, 10:17pm UTC](https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786/1 "2021-06-18T22:17:47Z")

</div>

I am trying to target selected areas of a square.  
In the code below I have targeted the top edge of the shape. Am I on the right path? It seems like this current iteration should work, but it’s not.  
Any guidance is most appreciated!

////////////////////////////////////////////////////////////////////////////////////////////////////

```auto
ArrayList<PVector> square = new ArrayList<PVector>();

void setup() {
  size(640, 360);
  noLoop();

  // vertices placed along 4 straight lines to make a square shape

  int ranSz = 150; //line length of the square's sides

  // Top of square
  for (int x = -ranSz; x < ranSz; x += 1) {
    square.add(new PVector(x, -ranSz));
  }
  // Right side
  for (int y = -ranSz; y < ranSz; y += 1) {
    square.add(new PVector(ranSz, ranSz));
  }
  // Bottom
  for (int x = ranSz; x > -ranSz; x -= 1) {
    square.add(new PVector(ranSz, ranSz));
  }
  // Left side
  for (int y = ranSz; y > -ranSz; y -= 1) {
    square.add(new PVector(-ranSz, ranSz));
  }

  translate(width/2, height/2);

  beginShape();

  fill(255, 0, 0);
  noStroke();

  for (PVector v : square) {
    vertex(v.x, v.y);
  }

  endShape(CLOSE);
}

void draw() {
  
  //in draw alternate placement for drawing the square shape
  //translate(width/2, height/2);
  //strokeWeight(4);

  //beginShape();
  
  //fill(255, 0, 0);
  //noStroke();

  //for (PVector v : square) {
  //vertex(v.x, v.y);
  //}

  //endShape(CLOSE);

  //top line of vertices in square should move due to noise()... 
  for (int i = 0; i < 150; i++) {
    PVector v = square.get(i);
    vertex(v.x, v.y+(300*noise(-0.1, 0.1)));
  }
}

```

🤓

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 18, 2021, 11:52pm UTC](https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786/2 "2021-06-18T23:52:09Z")

</div>

Hello,

I was just playing with this for a bit to get an output.

You may be able to extract something useful…

```auto
ArrayList<PVector> square = new ArrayList<PVector>();

PShape s;

void setup() {
  size(640, 360);
  //noLoop();

  // vertices placed along 4 straight lines to make a square shape

  int ranSz = 150; //line length of the square's sides

  // Top of square
  for (int x = -ranSz; x < ranSz; x += 1) {
    square.add(new PVector(x, -ranSz));
  }
  // Right side
  for (int y = -ranSz; y < ranSz; y += 1) {
    square.add(new PVector(ranSz, ranSz));
  }
  // Bottom
  for (int x = ranSz; x > -ranSz; x -= 1) {
    square.add(new PVector(ranSz, ranSz));
  }
  // Left side
  for (int y = ranSz; y > -ranSz; y -= 1) {
    square.add(new PVector(-ranSz, ranSz));
  }

  //translate(width/2, height/2);

  s = createShape();
  
  s.beginShape();

  s.fill(255, 0, 0);
  //s.noStroke();

  for (PVector v : square) {
    s.vertex(v.x, v.y);
  }

  s.endShape(CLOSE);
}

void draw() {
  
  //in draw alternate placement for drawing the square shape
  //translate(width/2, height/2);
  //strokeWeight(4);

  //beginShape();
  
  //fill(255, 0, 0);
  //noStroke();

  //for (PVector v : square) {
  //vertex(v.x, v.y);
  //}

  //endShape(CLOSE);

// fill(255, 0, 0);
// shape(s, 50, 50);

  //top line of vertices in square should move due to noise()... 
  for (int i = 0; i < 300; i++) 
    {
    //vertex(v.x, v.y+(300*noise(-0.1, 0.1)));
    PVector v = s.getVertex(i);
    //v.x += random(-10, 10);
    //v.y = random(-10, 10);
    v.y += random(-10, 10);
    s.setFill(color(0, 255, 0));
    s.setVertex(i, v);
    }
  
  shape(s, 50, 50);
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/481f33107dbab97a574c758ce9851e92a527fa8c.png)

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 19, 2021, 12:38am UTC](https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786/3 "2021-06-19T00:38:33Z")

</div>

This is super helpful. Have been wrestling with this the past couple of days. But I _think_ I see how to proceed now.  
Thank you again!!  
🤓

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 19, 2021, 10:47am UTC](https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786/4 "2021-06-19T10:47:38Z")

</div>

Hello,

This may be a better example… but still just a quick one.

I was not too confident in my tinkering with the other code (done very quickly!) and added some points (hints and actual points!) to help visualize what was being modified.

> **Example Code**
>
> ```auto
> ArrayList<PVector> square = new ArrayList<PVector>();
> 
> PShape s;
> 
> public void settings() 
> {  
> size(400, 400, P2D); 
> }
> 
> public void setup() 
> {
> //noLoop();
> 
> for(int x = 0; x < 10; x += 1) 
> {
> float y = x;  
> square.add(new PVector(x*10, y*10)); //Should be a diagonal line
> }
> 
> s = createShape();
> s.beginShape();
> s.fill(255, 0, 0);
> for (PVector v : square) {
> s.vertex(v.x, v.y);
> }
> 
> s.endShape(CLOSE);
> }
> 
> public void draw() 
> {
> background(255);
>   
> // vertices modified and displayed 
> for (int i = 0; i < s.getVertexCount(); i++) 
> {
> PVector v = s.getVertex(i);
> v.y += random(-1, 1);
> //v.y = random(-10, 10);
> s.setFill(color(255, 255, 0));
> s.setVertex(i, v);
>     
> // These help to see the modified vertices and NOT part of shape
> strokeWeight(5);
> stroke(255, 0, 0);
> point(v.x, v.y);
> }
>   
> // New modified shape
> s.setStrokeWeight(2);
> shape(s, 100, 100);
> }
> 
> ```

Once you get the hang of this you won’t be able to stop!

Some nuggets in here:  
_[PShape \ Language (API) \ Processing 3+](https://processing.org/reference/PShape.html)_

If you want to copy a PShape:  
_[Copying a PShape?](https://discourse.processing.org/t/copying-a-pshape/1081)_

`:)`

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0f74073da06ff822038555e5d2b8f68f25cd3ee0.png)

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 19, 2021, 4:47pm UTC](https://discourse.processing.org/t/trying-to-target-an-area-of-square-to-apply-noise-function/30786/5 "2021-06-19T16:47:34Z")

</div>

This looks like it will help wonderfully! Especially the addition of the vertices to visualize!! Will have a chance to study this more closely later today but at first look… **Thank you so much!!!**  
🤓