Perlin noise between given points.

edited October 2014 in How To...

Hello,

I am trying to figure out a way of drawing a noisy line which must pass through a number of given points. I've been looking at some examples such as (example from Matt Pearson's Generative Art).

void setup() {
  size(500, 100);
  background(255);
  strokeWeight(5);
  smooth();

  stroke(0, 30);
  line(20, 50, 480, 50);

  stroke(20, 50, 70);
  int step = 10;  
  float lastx = -999;
  float lasty = -999;
  float ynoise = random(10);
  float y;
  for (int x = 20 ; x <= 480 ; x += step) {
    y = 10 + noise(ynoise) * 80;
    if (lastx > -999) {
      line(x, y, lastx, lasty);
    }
    lastx = x;
    lasty =y;
    ynoise += 0.1;
  }
}

I am able to set the starting point fairly easily but I can't work out how to get the line to pass through and finish at specific x/y coordinates.

Tagged:

Answers

  • Perhaps you should mention that this is an example from Matt Pearson's Generative Art.

    Look into recursion to break lines that have to follow a path.

  • First step: parametrize the start and end points.

    void setup() {
      size(500, 100);
      background(255);
      strokeWeight(5);
      smooth();
    
      PVector start = new PVector(20, 50);
      PVector end = new PVector(480, 50);
    
      stroke(0, 30);
      line(start.x, start.y, end.x, end.y);
    
      stroke(20, 50, 70);
      int step = 10; 
      float lastx = -999;
      float lasty = -999;
      float ynoise = random(10);
      float y;
      for (float x = start.x; x <= end.x; x += step) {
        y = 10 + noise(ynoise) * 80;
        if (lastx > -999) {
          line(x, y, lastx, lasty);
        }
        lastx = x;
        lasty =y;
        ynoise += 0.1;
      }
    }
    

    Then, you can add a slope.

    void setup() {
      size(500, 100);
      background(255);
      strokeWeight(5);
      smooth();
    
      PVector start = new PVector(20, 10);
      PVector end = new PVector(480, 90);
    
      stroke(0, 30);
      line(start.x, start.y, end.x, end.y);
    
      stroke(20, 50, 70);
      int step = 10; 
      float lastx = -999;
      float lasty = -999;
      float ynoise = random(10);
      float y;
      for (float x = start.x; x <= end.x; x += step) {
        y = (0.5 - noise(ynoise)) * 80 + lerp(start.y, end.y, x / (end.x - start.x));
        if (lastx > -999) {
          line(x, y, lastx, lasty);
        }
        lastx = x;
        lasty = y;
        ynoise += 0.1;
      }
    }
    

    lerp() allows to add an y amount depending on current x position.

Sign In or Register to comment.