# Rasterize Image/ Flowfield with Noise values from image Two --- the answer

**URL:** <https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image-two-the-answer/38316>\
**Category:** Libraries\
**Created:** [August 11, 2022, 4:35pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image-two-the-answer/38316 "2022-08-11T16:35:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![f42ter](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/f42ter/32/16793_2.png) [@f42ter](https://discourse.processing.org/u/f42ter)\
**Post date:** [August 11, 2022, 4:35pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image-two-the-answer/38316/1 "2022-08-11T16:35:38Z")

</div>

Here is an other solution [https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/4](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image/38176/4)

This is for a single video (noLoop) or a video stream.  
Will be simple to adopt it for pictures.

Play with videoScale form 1 … 16  
And i.e.

> Blockquote  
> strokeWeight(2); //

```auto
// Based on 
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 16-7: Video pixelation

import processing.video.*;

// Size of each cell in the grid, ratio of window size to video size
int videoScale = 5;
// Number of columns and rows in our system
int cols, rows;

// Variable to hold onto Capture object
Capture video;

void setup() {
  size(640, 480);

  // Initialize columns and rows
  cols = width / videoScale;
  rows = height / videoScale;
// scale video capture 
  video = new Capture(this, cols, rows);
  video.start();
}

void captureEvent(Capture video) {
  // Read image from the camera
  video.read();
}

void draw() {
  noLoop(); // one picture, comment out for video stream
  video.loadPixels();

  // Begin loop for columns
  for (int i = 0; i < cols; i++) {
    // Begin loop for rows
    for (int j = 0; j < rows; j++) {

      // Where are we, pixel-wise?
      int x = i * videoScale;
      int y = j * videoScale;
      // Looking up the appropriate color in the pixel array
      color c = video.pixels[i + j * video.width];
      // calculte rotation angle based on color in the pixel array
      float rot = map(brightness(c), 0, 255, 0, PI);
      // for each reactange in col and row 
      push();
      // set color 
      stroke(c);
      //Sets the style for rendering line endings.
      strokeCap(ROUND);  
      // translate to screen position of the related video rectangle 
      translate(x, y);
      // rotate 
      rotate(rot);
      // draw rotated line in the coresponding rectangle
      strokeWeight(2); // Thicker
      line(0, 0, videoScale, videoScale);
      pop();
    }
  }
}

```

 ![Screenshot from 2022-08-11 11-26-01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/c/2ce4dea81813c44fd54247929ed30804b5b1145d.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 15, 2022, 4:38pm UTC](https://discourse.processing.org/t/rasterize-image-flowfield-with-noise-values-from-image-two-the-answer/38316/2 "2022-08-15T16:38:55Z")

</div>

That’s really cool!!! 😀