Trying to target an area of square to apply noise function

Processing Coding Questions
1

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!

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

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)));
  }
}

:nerd_face:

2

Hello,

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

You may be able to extract something useful…

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

:)

1 Like
3

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!!
:nerd_face:

4

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 
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+

If you want to copy a PShape:
Copying a PShape?

:)

image

1 Like
5

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!!!
:nerd_face: