# Rasterize Image/ Flowfield with Noise values from image

**URL:** <https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176>\
**Category:** Coding Questions\
**Created:** [July 31, 2022, 7:42pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176 "2022-07-31T19:42:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [July 31, 2022, 7:42pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/1 "2022-07-31T19:42:53Z")

</div>

Hi, how can I change the code below to shift lines that respond to the image file?

 ![Screen Shot 2022-07-31 at 12.42.02 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/f/6fc5fe3d50b8bcc7fc4dc17ba5750cdcc272b0f3.png)  
Via Coding Challenge #24: Perlin Noise Flow Field

```auto
PImage img;

void setup(){
  size(900, 900, P3D);
  img = loadImage("Jan24.jpg");
  img.resize(900,900);
  
}

void draw() {
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  
  float tiles = 100;
  float tileSize = width/tiles;
  
  push();
  translate(width/2,height/2);
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      
    color c = img.get(int(x*tileSize),int(y*tileSize));
    float b = map(brightness(c),0,255,01,0); 
    
    float z = map(b,0,1,-100,100);
    
    push();
    translate(x*tileSize - width/2,y*tileSize- height/2, z);
    sphere(tileSize*b);
    pop();
    
    
    }
    
  }
    
}

```

Via Tim Rodenbröker

---

<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:** [July 31, 2022, 11:11pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/2 "2022-07-31T23:11:24Z")

</div>

Hello @asymmetric ,

You need to map the brightness to an angle:

`float b = map(brightness(c), 0, 255, 0, PI); // angle in radians`

Replace the sphere with a line and translate and rotate it in this order:

- translate()
- rotate()
- line() \< Draw a line passing through (0, 0) if you are translating the same way you are translating sphere.

I was able to generate this with some modifications to your code:

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

Same image with color added to line:

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

`:)`

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 1, 2022, 4:16am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/4 "2022-08-01T04:16:48Z")

</div>

Thank you @glv! That’s exactly what I am looking for! I tried replacing the sphere(); with line(); and received compiler errors.

```auto
PImage img;

void setup(){
  size(900, 900, P3D);
  img = loadImage("Jan24.jpg");
  img.resize(900,900);
  
}

void draw() {
  background(#f1f1f1);
  fill(0);
  noStroke();
  line(0,0);
  //sphereDetail(3);
  //ellipse(mouseX,mouseY,40,40);
  
  float tiles = 100;
  float tileSize = width/tiles;
  
  push();
  rotateY(radians(frameCount) );
  translate(width/2,height/2);
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      
    color c = img.get(int(x*tileSize),int(y*tileSize));
    float b = map(brightness(c),0,255,0,PI); 
    
    float z = map(b,0,1,-100,100);
    
    push();
    translate(x*tileSize - width/2,y*tileSize- height/2, z);
    line(tileSize*b);
    pop();
    
    
    }
    
  }
    
}

```

---

<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:** [August 3, 2022, 11:35am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/5 "2022-08-03T11:35:41Z")

</div>

> [@asymmetric](#):
>
> I tried replacing the sphere(); with line(); and received compiler errors.

That will happen when you use the methods incorrectly.

I suggest you look up the reference for` line()`.

`:)`

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 4, 2022, 5:26pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/6 "2022-08-04T17:26:27Z")

</div>

Hi @glv ,

I can’t figure out how to change the direction of the lines to match the flow lines like the example image that you shared. What do I need to change? Please help 🙏

```auto
PImage img;

void setup(){
  size(1000, 1000, P3D);
  img = loadImage("Jan24.jpg");
  img.resize(1000,1000);
  
}

void draw() {
  background(#f1f1f1);
  stroke(0);
  strokeWeight(2);
  
  float tiles = 150;
  float tileSize = width/tiles;
  
  push();
  translate(width/2,height/2);
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      
    color c = img.get(int(x*tileSize),int(y*tileSize));
    float b = map(brightness(c),0,255,0,PI/180);
    
    float z = map(b,0,1,-100,100);
    

    stroke(c);
    
    
    push();
    translate(x*tileSize - width/2,y*tileSize- height/2, z);
    line(x,y,x+tileSize,y+tileSize);
    pop();
    
    
    }
    
  }
    
}

```

 ![Screen Shot 2022-08-04 at 10.25.46 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/a/aad2227db4c2a816104d1e00614cf3cfd7127987.jpeg)

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 4, 2022, 5:57pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/7 "2022-08-04T17:57:32Z")

</div>

> [@glv](#):
>
> float b = map(brightness(c), 0, 255, 0, PI); // angle in radians

This is my result when I use the code provided above. And I would like my image to look like the black and white image of the frog that you shared.

 ![Screen Shot 2022-08-04 at 10.56.14 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/a/fa274db0e693510b7535670fdf35aa1019308dcf.jpeg)

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 5, 2022, 12:15am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/8 "2022-08-05T00:15:25Z")

</div>

I tried the following code provided by Daniel Shiffman, but it isn’t working for some reason.

[https://github.com/nature-of-code/noc-examples-processing/tree/master/chp06\_agents/FlowfieldImage](https://github.com/nature-of-code/noc-examples-processing/tree/master/chp06_agents/FlowfieldImage)

```auto
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com

// Flow Field Following

class FlowField {

  // A flow field is a two dimensional array of PVectors
  PVector[][] field;
  int cols, rows; // Columns and Rows
  int resolution; // How large is each "cell" of the flow field

  FlowField(int r) {
    resolution = r;
    // Determine the number of columns and rows based on sketch's width and height
    cols = width/resolution;
    rows = height/resolution;
    field = new PVector[cols][rows];
    init();
  }

  void init() {
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
        field[i][j] = new PVector(width/2-i*resolution,height/2-j*resolution);
        field[i][j].normalize();
      }
    }

    // Reseed noise so we get a new flow field every time
    for (int i = 1; i < cols-1; i++) {
      for (int j = 1; j < rows-1; j++) {

        int x = i*resolution;
        int y = j*resolution;
        int c = img.pixels[x + y * img.width];

        // Map brightness to an angle
        float theta = map(brightness(c), 0, 255, 0, TWO_PI);
        // Polar to cartesian coordinate transformation to get x and y components of the vector
        field[i][j] = PVector.fromAngle(theta);
        field[i][j].normalize();
      }
    }
  }

  // Draw every vector
  void display() {
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
        drawVector(field[i][j], i*resolution, j*resolution, resolution-2);
      }
    }
  }

  // Renders a vector object 'v' as an arrow and a position 'x,y'
  void drawVector(PVector v, float x, float y, float scayl) {
    pushMatrix();
    // Translate to position to render vector
    translate(x, y);
    strokeWeight(2);
    stroke(255, 0, 0);
    // Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
    rotate(v.heading());
    // Calculate length of vector & scale it to be bigger or smaller if necessary
    float len = v.mag()*scayl;
    // Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
    line(0, 0, len, 0);
    //line(len,0,len-arrowsize,+arrowsize/2);
    //line(len,0,len-arrowsize,-arrowsize/2);
    popMatrix();
  }

  PVector lookup(PVector lookup) {
    int column = int(constrain(lookup.x/resolution, 0, cols-1));
    int row = int(constrain(lookup.y/resolution, 0, rows-1));
    return field[column][row].copy();
  }
}

```

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 5, 2022, 12:16am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/9 "2022-08-05T00:16:51Z")

</div>

```auto
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com

// Flow Field Following
// Via Reynolds: http://www.red3d.com/cwr/steer/FlowFollow.html

// Using this variable to decide whether to draw all the stuff
boolean debug = true;

PImage img;

// Flowfield object
FlowField flowfield;
// An ArrayList of vehicles
ArrayList<Vehicle> vehicles;

void setup() {
  size(500, 500);
  img = loadImage("Jan24.jpg");
  // Make a new flow field with "resolution" of 16
  flowfield = new FlowField(16);
  vehicles = new ArrayList<Vehicle>();
  // Make a whole bunch of vehicles with random maxspeed and maxforce values
}

void draw() {
  background(255);
  image(img, 0, 0);
  // Display the flowfield in "debug" mode
  if (debug) flowfield.display();
  // Tell all the vehicles to follow the flow field
  for (Vehicle v : vehicles) {
    v.follow(flowfield);
    v.run();
  }

  // Instructions
  fill(0);
  text("Hit space bar to toggle debugging lines.\nClick the mouse to generate a new flow field.", 10, height-20);
}

void keyPressed() {
  if (key == ' ') {
    debug = !debug;
  }
}

void mouseDragged() {
  vehicles.add(new Vehicle(new PVector(mouseX, mouseY), 3, 0.3));
}

```

---

<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:** [August 5, 2022, 12:56am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/10 "2022-08-05T00:56:07Z")

</div>

> [@asymmetric](#):
>
> I tried the following code provided by Daniel Shiffman, but it isn’t working for some reason.
> 
> [https://github.com/nature-of-code/noc-examples-processing/tree/master/chp06\_agents/FlowfieldImage](https://github.com/nature-of-code/noc-examples-processing/tree/master/chp06_agents/FlowfieldImage)

Go to the Contribution Manager in the Processing IDE and download the examples:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/6/06795d6c243085cd6050c8a115cc791207000e3c.png)

They will then be available to you:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/7/974d5013959fea14499428a0eaaa680350bffb23.png)

The example works:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/ab591b6a72fa1e7807a30ec720588d625e0f0433.png)

Or download the code from here:  
[https://github.com/nature-of-code/noc-examples-processing](https://github.com/nature-of-code/noc-examples-processing)

Look for this on the page:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/7/7736acb8d74f629b607b1dd617178a17d3d64622.png)

`:)`

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 5, 2022, 1:41am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/11 "2022-08-05T01:41:03Z")

</div>

![Screen Shot 2022-08-04 at 6.40.18 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/8/983fe5f7187638fa38c1f433f202f29c8a25f800.jpeg)  
I was able to get to the result that I have been striving for via modifying the example code!! Thank you @glv !!!

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [August 5, 2022, 8:30pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/12 "2022-08-05T20:30:33Z")

</div>

One more question, @glv! How do I remove the vehicle from the example code? I would like to simplify the code in order to understand it better.

---

<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:** [August 7, 2022, 12:39am UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/13 "2022-08-07T00:39:48Z")

</div>

> [@asymmetric](#):
>
> How do I remove the vehicle from the example code? I would like to simplify the code in order to understand it better.

[Scrutinize](https://dictionary.cambridge.org/dictionary/english/scrutinize) the code.

Try _commenting out_ code to see what it does.

`:)`

---

<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:** [August 7, 2022, 6:05pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/14 "2022-08-07T18:05:35Z")

</div>

> [@asymmetric](#):
>
> I can’t figure out how to change the direction of the lines to match the flow lines like the example image that you shared. What do I need to change?

I just worked through this with some “students” (young programming enthusiasts) here that I code with using the general instructions I provided you.

This is now a 2D mapping and you will not need the z component; make it zero.

```auto
    float b = map(brightness(c), 0, 255, 0, TWO_PI); // angle in radians

    push();
    translate(x*tileSize - width/2, y*tileSize - height/2, z);
    rotate(?); // What is the angle?
    strokeWeight(3);
    stroke(255, 0, 0); // Red 
    line(?); // Simple enough to do...
    pop();

```

And the end result:

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

`:)`