# Import Image and apply pattern

**URL:** <https://discourse.processing.org/t/import-image-and-apply-pattern/12229>\
**Category:** Coding Questions\
**Created:** [June 21, 2019, 11:43am UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229 "2019-06-21T11:43:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [June 21, 2019, 11:43am UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/1 "2019-06-21T11:43:57Z")

</div>

Hi,

How can I import a black an white image and apply a patter like the image that I attached in this message?  
Hope someone can help,

Thanks !

![rd](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a4d7450bee82a9bbeef32ce5fbfd67669635daf4.png)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 21, 2019, 10:12pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/2 "2019-06-21T22:12:44Z")

</div>

It’s interesting because it looks like this video from Daniel Shiffman’s channel :

[![](https://img.youtube.com/vi/BV9ny785UNc/hqdefault.jpg "Coding Challenge #13: Reaction Diffusion Algorithm in p5.js") ](https://www.youtube.com/watch?v=BV9ny785UNc)

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [June 22, 2019, 11:49am UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/3 "2019-06-22T11:49:54Z")

</div>

HI @josephh 🙂

Exactly ! I followed that tutorial and now I’m trying to import an image and to apply the reaction diffusion,

Cheers

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 22, 2019, 8:48pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/4 "2019-06-22T20:48:42Z")

</div>

@alice

Glad to see that it’s what you were looking for, don’t hesitate to post your solution 🙂

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 26, 2019, 9:26pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/5 "2019-06-26T21:26:57Z")

</div>

Hi @alice – were you able to get the tutorial working?

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [June 27, 2019, 12:00pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/6 "2019-06-27T12:00:23Z")

</div>

Hi !  
still working on It ☹

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 27, 2019, 5:22pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/7 "2019-06-27T17:22:04Z")

</div>

If you have code in progress that you would like to share with more specific questions, feel free to do that here.

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 7, 2019, 5:50pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/8 "2019-07-07T17:50:58Z")

</div>

Hi @jeremydouglass , thanks, I managed to have the code and I’m sharing with you It!  
Now I have the Reaction Diffusion based on points, what I want to do now is to add a black and white image inside the code and in the “condition loop” I want to apply the reaction diffusion only where the color is black… Do you have any idea how to do It ?  
I’m sending you the code and a reference image ( the image can be any in black and white)

```auto
import java.awt.Color;

Cell[][] grid;
Cell[][] prev;

void setup() {
  size(300, 300);
  grid = new Cell[width][height];
  prev = new Cell[width][height];

  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j ++) {
      float a = 1;
      float b = 0;
      grid[i][j] = new Cell(a, b);
      prev[i][j] = new Cell(a, b);
    }
  }

  for (int n = 0; n < 50; n++) {
    int startx = int(random(20, width-20));
    int starty = int(random(20, height-20));

    for (int i = startx; i < startx+10; i++) {
      for (int j = starty; j < starty+10; j ++) {
        float a = 5;
        float b = 5;
        grid[i][j] = new Cell(a, b);
        prev[i][j] = new Cell(a, b);
      }
    }
  }
}

float dA = 1.0;
float dB = 0.5;
float feed = 0.08;  
float k = 0.06;

class Cell {
  float a;
  float b;

  Cell(float a_, float b_) {
    a = a_;
    b = b_;
  }
}

void update() {
  for (int i = 1; i < width-1; i++) {
    for (int j = 1; j < height-1; j ++) {

      Cell spot = prev[i][j];
      Cell newspot = grid[i][j];

      float a = spot.a;
      float b = spot.b;

      float laplaceA = 0;     
      laplaceA += a*-1;
      laplaceA += prev[i+1][j].a*0.2;
      laplaceA += prev[i-1][j].a*0.2;
      laplaceA += prev[i][j+1].a*0.2;
      laplaceA += prev[i][j-1].a*0.2;
      laplaceA += prev[i-1][j-1].a*0.05;
      laplaceA += prev[i+1][j-1].a*0.05;
      laplaceA += prev[i-1][j+1].a*0.05;
      laplaceA += prev[i+1][j+1].a*0.05;

      float laplaceB = 0;
      laplaceB += b*-1;
      laplaceB += prev[i+1][j].b*0.2;
      laplaceB += prev[i-1][j].b*0.2;
      laplaceB += prev[i][j+1].b*0.2;
      laplaceB += prev[i][j-1].b*0.2;
      laplaceB += prev[i-1][j-1].b*0.05;
      laplaceB += prev[i+1][j-1].b*0.05;
      laplaceB += prev[i-1][j+1].b*0.05;
      laplaceB += prev[i+1][j+1].b*0.05;

      newspot.a = a + (dA*laplaceA - a*b*b + feed*(1-a))*1;
      newspot.b = b + (dB*laplaceB + a*b*b - (k+feed)*b)*1;

      newspot.a = constrain(newspot.a, 0, 1);
      newspot.b = constrain(newspot.b, 0, 1);
    }
  }
}  

void swap() {
  Cell[][] temp = prev;
  prev = grid;
  grid = temp;
}  

void draw() {
  //println(frameRate);

  for (int i = 0; i < 1; i++) {
    update();
    swap();
  }

  loadPixels();
  for (int i = 1; i < width-1; i++) {
    for (int j = 1; j < height-1; j ++) {
      Cell spot = grid[i][j];
      float a = spot.a;
      float b = spot.b;
      int pos = i + j * width;
      //pixels[pos] = color((a-b)*255);

      color aColor = color (0, 0, 0);
      color bColor = color (255, 255, 255);
      pixels[pos] = lerpColor(aColor, bColor, (a-b));
    }
  }
  updatePixels();

 }

```

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

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 7, 2019, 5:52pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/9 "2019-07-07T17:52:25Z")

</div>

I’m trying to follow some tutorials online to undertstand how to do It, If you have any tricks please share ! 🙂

Thanks!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 7, 2019, 7:32pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/10 "2019-07-07T19:32:16Z")

</div>

Sure. Just load a PImage, then copy its darkest pixels into your Cells. That’s it!

Add this line to your header:

```auto
PImage img;

```

This to the top of your setup loop:

```auto
void setup(){
  size(512, 512); // match image size here -- then use that to make Cells

  img = loadImage("https://processing.org/img/processing3-logo.png");
  img.loadPixels();

```

and in your Cell initialization loop, change a=1; b=0; to this:

```auto
      if(brightness(img.get(i,j))>16){ // values lighter than 16 are not drawn
        a = 1;
        b = 0;
      } else {
        a = 5;
        b = 5;
      }

```

You can delete the second (random dot creation) loop entirely, now that you have image data instead.

Here is the modified sketch:

```auto
// reaction diffusion -- add image
// https://discourse.processing.org/t/import-image-and-apply-pattern/12229/8

import java.awt.Color;

PImage img;

Cell[][] grid;
Cell[][] prev;

void setup() {
  size(512, 512);

  grid = new Cell[width][height];
  prev = new Cell[width][height];

  img = loadImage("https://processing.org/img/processing3-logo.png");
  img.loadPixels();

  float a = 1;
  float b = 0;
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j ++) {
      if (brightness(img.get(i, j))>16) {
        a = 1;
        b = 0;
      } else {
        a = 5;
        b = 5;
      }
      grid[i][j] = new Cell(a, b);
      prev[i][j] = new Cell(a, b);
    }
  }
}

float dA = 1.0;
float dB = 0.5;
float feed = 0.08;  
float k = 0.06;

class Cell {
  float a;
  float b;

  Cell(float a_, float b_) {
    a = a_;
    b = b_;
  }
}

void update() {
  for (int i = 1; i < width-1; i++) {
    for (int j = 1; j < height-1; j ++) {

      Cell spot = prev[i][j];
      Cell newspot = grid[i][j];

      float a = spot.a;
      float b = spot.b;

      float laplaceA = 0;     
      laplaceA += a*-1;
      laplaceA += prev[i+1][j].a*0.2;
      laplaceA += prev[i-1][j].a*0.2;
      laplaceA += prev[i][j+1].a*0.2;
      laplaceA += prev[i][j-1].a*0.2;
      laplaceA += prev[i-1][j-1].a*0.05;
      laplaceA += prev[i+1][j-1].a*0.05;
      laplaceA += prev[i-1][j+1].a*0.05;
      laplaceA += prev[i+1][j+1].a*0.05;

      float laplaceB = 0;
      laplaceB += b*-1;
      laplaceB += prev[i+1][j].b*0.2;
      laplaceB += prev[i-1][j].b*0.2;
      laplaceB += prev[i][j+1].b*0.2;
      laplaceB += prev[i][j-1].b*0.2;
      laplaceB += prev[i-1][j-1].b*0.05;
      laplaceB += prev[i+1][j-1].b*0.05;
      laplaceB += prev[i-1][j+1].b*0.05;
      laplaceB += prev[i+1][j+1].b*0.05;

      newspot.a = a + (dA*laplaceA - a*b*b + feed*(1-a))*1;
      newspot.b = b + (dB*laplaceB + a*b*b - (k+feed)*b)*1;

      newspot.a = constrain(newspot.a, 0, 1);
      newspot.b = constrain(newspot.b, 0, 1);
    }
  }
}  

void swap() {
  Cell[][] temp = prev;
  prev = grid;
  grid = temp;
}  

void draw() {
  //println(frameRate);

  for (int i = 0; i < 1; i++) {
    update();
    swap();
  }

  loadPixels();
  for (int i = 1; i < width-1; i++) {
    for (int j = 1; j < height-1; j ++) {
      Cell spot = grid[i][j];
      float a = spot.a;
      float b = spot.b;
      int pos = i + j * width;
      //pixels[pos] = color((a-b)*255);

      color aColor = color (0, 0, 0);
      color bColor = color (255, 255, 255);
      pixels[pos] = lerpColor(aColor, bColor, (a-b));
    }
  }
  updatePixels();
}

```

 ![005](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eb9bd6f2c5201da7df52336969d931a25a38505c.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 7, 2019, 7:41pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/11 "2019-07-07T19:41:57Z")

</div>

The following are suggestions on style that won’t affect what your code draws:

Your Cell class is good but not strictly necessary. Processing already has a built in class for holding two floats that you could use instead–it is PVector, and you can store your floats in vec.x, vec.y rather than cell.a, cell.b if you wish.

You could also move aColor, bColor to the header and define them in setup – no need to declare repeatedly in an inner loop.

Likewise, no need to shuffle spot.a and spot.b variables around into other variables ‘a’ ‘b’ – just use them directly.

```
{
  Cell spot = grid[i][j];
  pixels[i + j * width] = lerpColor(aColor, bColor, (spot.a-spot.b));
}
```

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 7, 2019, 8:11pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/12 "2019-07-07T20:11:40Z")

</div>

Hi @jeremydouglass ! THANK YOU 🙂 !!  
I actually don’t know how to use PVector as you explained…If you don’t mind can you please show me how do It in my code , I’m curious to see how you do It and to learn to do It,

Anyway thanks a lot for your help !!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 8, 2019, 5:49pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/13 "2019-07-08T17:49:08Z")

</div>

> [@alice](#):
>
> how to use PVector

Just replace “Cell” with “PVector” and .a .b with .x .y. That’s it, really.

> **[PVector / Reference](https://processing.org/reference/PVector.html)**
>
> A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, st…

However, you don’t gain anything by this in your current sketch. If in the future you wanted to do other things to your cell values – like scale them all at the same time, for example – then PVector has lots of pre-built-in methods to help you loop over your cells and do a/b math to them. If you go in a different direction, then having Cell is convenient for simply adding your own methods.

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 8, 2019, 5:57pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/14 "2019-07-08T17:57:03Z")

</div>

Hi @jeremydouglass , Thanks a lot for your help !  
I’ll try for sure ! 😄  
You have been so helpful, I appreciate It !

Thanks again 🙂

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 13, 2019, 10:13am UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/15 "2019-07-13T10:13:22Z")

</div>

Thanks everybody for your precious help, so far I’m playing with the code to have different results.  
What I’m trying to do now is to apply the reaction diffusion only in one part of the grid ( example right or left ) , something like the image that I uploaded ![4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/01095f8db91a0a16ccbf04e39512b6efa14b123c.png) ,

PS: Do you think the coefficent Time can help to have the pattern only in some parts ?

This is the image that I have imported in the code : ![2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83bb13816ba896d28300ebd052e7c5d7b743c98d.png)

```auto
  import java.awt.Color;

PImage img;

Cell[][] grid;
Cell[][] prev;

void setup() {
  size(305, 305);

  grid = new Cell[width][height];
  prev = new Cell[width][height];

  img = loadImage("2.PNG");
  img.loadPixels();

  float a = 1;
  float b = 0;
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j ++) {
      if (brightness(img.get(i, j))>16) {
        a = 1;
        b = 0;
      } else {
        a = 5;
        b = 5;
      }
      grid[i][j] = new Cell(a, b);
      prev[i][j] = new Cell(a, b);
    }
  }
}

float dA = 1.0;
float dB = 0.5;
float feed = 0.08;  
float k = 0.06;

class Cell {
  float a;
  float b;

  Cell(float a_, float b_) {
    a = a_;
    b = b_;
  }
}

void update() {
  for (int i = 1; i < width-1; i++) {
    for (int j = 1; j < height-1; j ++) {

      Cell spot = prev[i][j];
      Cell newspot = grid[i][j];

      float a = spot.a;
      float b = spot.b;

      float laplaceA = 0;     
      laplaceA += a*-1;
      laplaceA += prev[i+1][j].a*0.2;
      laplaceA += prev[i-1][j].a*0.2;
      laplaceA += prev[i][j+1].a*0.2;
      laplaceA += prev[i][j-1].a*0.2;
      laplaceA += prev[i-1][j-1].a*0.05;
      laplaceA += prev[i+1][j-1].a*0.05;
      laplaceA += prev[i-1][j+1].a*0.05;
      laplaceA += prev[i+1][j+1].a*0.05;

      float laplaceB = 0;
      laplaceB += b*-1;
      laplaceB += prev[i+1][j].b*0.2;
      laplaceB += prev[i-1][j].b*0.2;
      laplaceB += prev[i][j+1].b*0.2;
      laplaceB += prev[i][j-1].b*0.2;
      laplaceB += prev[i-1][j-1].b*0.05;
      laplaceB += prev[i+1][j-1].b*0.05;
      laplaceB += prev[i-1][j+1].b*0.05;
      laplaceB += prev[i+1][j+1].b*0.05;

      newspot.a = a + (dA*laplaceA - a*b*b + feed*(1-a))*1;
      newspot.b = b + (dB*laplaceB + a*b*b - (k+feed)*b)*1;

      newspot.a = constrain(newspot.a, 0, 1);
      newspot.b = constrain(newspot.b, 0, 1);
    }
  }
}  

void swap() {
  Cell[][] temp = prev;
  prev = grid;
  grid = temp;
}  

void draw() {
  //println(frameRate);

  for (int i = 0; i < 1; i++) {
    update();
    swap();
  }

  loadPixels();
  for (int i = 1; i < width-1; i++) {
    for (int j = 1; j < height-1; j ++) {
      Cell spot = grid[i][j];
      float a = spot.a;
      float b = spot.b;
      int pos = i + j * width;
      //pixels[pos] = color((a-b)*255);

      color aColor = color (0, 0, 0);
      color bColor = color (255, 255, 255);
      pixels[pos] = lerpColor(aColor, bColor, (a-b));
    }
  }
  updatePixels();
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 13, 2019, 3:31pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/16 "2019-07-13T15:31:02Z")

</div>

please format your forum code with the \</\> button, or with three ticks ``` – not \< and \>

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 13, 2019, 4:02pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/17 "2019-07-13T16:02:34Z")

</div>

Here is where you are currently copying your reaction diffusion onto the visible canvas.

```
for (int i = 1; i < width-1; i++) {
  for (int j = 1; j < height-1; j ++) {
    // ...
    pixels[pos] = lerpColor(aColor, bColor, (a-b));

```

It sounds like you only want to do that pixel copy **if** (i, j) is inside one or more defined rectangles. You could use point-rect collision detection to check whether this is true.

- [http://jeffreythompson.org/collision-detection/point-rect.php](http://jeffreythompson.org/collision-detection/point-rect.php)

You could calculate this each time for each pixel – is the pixel inside the rectangle? If so, copy the value to the canvas.

```
for (int i = 1; i < width-1; i++) {
  for (int j = 1; j < height-1; j ++) {
    if(pointRect(i, j, rx, ry, rw, rh){
      // ...
      pixels[pos] = lerpColor(aColor, bColor, (a-b));
    }
  }
  updatePixels();
}

```

Or, to manage complex regions like in your right-hand example (multiple rectanges, triangles, circles, etc.) you could use a mask image. Then you will be computing the whole image every time, but only showing part of it through the mask onto the canvas.

- [https://processing.org/reference/PImage\_mask\_.html](https://processing.org/reference/PImage_mask_.html)

A third approach is manual masking. Create a PGraphics, and draw some black on it (rectangles, triangles, whatever). Then compute and copy your reaction diffusion pixel to the canvas ONLY if the corresponding pixel on your PGraphics is marked. This means you needn’t bother computing any pixel that isn’t marked on your manual mask.

```
    if(myMask.get(i,j) != emptypixel){
      // ...
      pixels[pos] = lerpColor(aColor, bColor, (a-b));
    }
```

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 13, 2019, 6:41pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/18 "2019-07-13T18:41:19Z")

</div>

HI @jeremydouglass , thanks again for your quick reply, I have tried the third approch with mask : I made 2 images with the same size and I imported both inside the code , one as a image and one as a mask, I got the error that “emptyPixels cannot be resolved to a variable” , this is how I changed the code :

```auto
import java.awt.Color;

PImage img, maskImage;

Cell[][] grid;
Cell[][] prev;

void setup() {
 size(364, 364);

 grid = new Cell[width][height];
 prev = new Cell[width][height];

 img = loadImage("1.png");
 img.loadPixels();
 maskImage = loadImage("mask.png");
 img.mask(maskImage);

 float a = 1;
 float b = 0;
 for (int i = 0; i < width; i++) {
   for (int j = 0; j < height; j ++) {
     if (brightness(img.get(i, j))>16) {
       a = 1;
       b = 0;
     } else {
       a = 5;
       b = 5;
     }
     grid[i][j] = new Cell(a, b);
     prev[i][j] = new Cell(a, b);
   }
 }
}

float dA = 1.0;
float dB = 0.5;
float feed = 0.08;  
float k = 0.06;

class Cell {
 float a;
 float b;

 Cell(float a_, float b_) {
   a = a_;
   b = b_;
 }
}

void update() {
 for (int i = 1; i < width-1; i++) {
   for (int j = 1; j < height-1; j ++) {

     Cell spot = prev[i][j];
     Cell newspot = grid[i][j];

     float a = spot.a;
     float b = spot.b;

     float laplaceA = 0;     
     laplaceA += a*-1;
     laplaceA += prev[i+1][j].a*0.2;
     laplaceA += prev[i-1][j].a*0.2;
     laplaceA += prev[i][j+1].a*0.2;
     laplaceA += prev[i][j-1].a*0.2;
     laplaceA += prev[i-1][j-1].a*0.05;
     laplaceA += prev[i+1][j-1].a*0.05;
     laplaceA += prev[i-1][j+1].a*0.05;
     laplaceA += prev[i+1][j+1].a*0.05;

     float laplaceB = 0;
     laplaceB += b*-1;
     laplaceB += prev[i+1][j].b*0.2;
     laplaceB += prev[i-1][j].b*0.2;
     laplaceB += prev[i][j+1].b*0.2;
     laplaceB += prev[i][j-1].b*0.2;
     laplaceB += prev[i-1][j-1].b*0.05;
     laplaceB += prev[i+1][j-1].b*0.05;
     laplaceB += prev[i-1][j+1].b*0.05;
     laplaceB += prev[i+1][j+1].b*0.05;

     newspot.a = a + (dA*laplaceA - a*b*b + feed*(1-a))*1;
     newspot.b = b + (dB*laplaceB + a*b*b - (k+feed)*b)*1;

     newspot.a = constrain(newspot.a, 0, 1);
     newspot.b = constrain(newspot.b, 0, 1);
   }
 }
}  

void swap() {
 Cell[][] temp = prev;
 prev = grid;
 grid = temp;
}  

void draw() {
 //println(frameRate);

 for (int i = 0; i < 1; i++) {
   update();
   swap();
 }

 loadPixels();
 for (int i = 1; i < width-1; i++) {
   for (int j = 1; j < height-1; j ++) {
     if (maskImage.get(i, j) != emptypixel) {
       Cell spot = grid[i][j];
       float a = spot.a;
       float b = spot.b;
       int pos = i + j * width;
       //pixels[pos] = color((a-b)*255);

       color aColor = color (0, 0, 0);
       color bColor = color (255, 255, 255);
       pixels[pos] = lerpColor(aColor, bColor, (a-b));
     }
   }
   updatePixels();
 }
}

```

these 2 images are my mask ( black rectangle) and the image :

![mask](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/99b466358bd6b363d6be8d8dddcc556216b987d2.png)

![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d4c7bf433841417ad892dbee9e0e5d4d0fb7bbfc.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 14, 2019, 3:21am UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/19 "2019-07-14T03:21:20Z")

</div>

You are mixing the second and third approach. If you want the manual approach, then you don’t need to apply your mask() – as you will be doing that manually.

First, create a global color variable – that isn’t a processing built-in, it is just a normal integer where you are keeping the color value that you intend to ignore in your manual mask.

```auto
color emptypixel;

```

Now define what color on your mask means empty:

```auto
 maskImage = loadImage("mask.png");
 //img.mask(maskImage);
 maskImage.loadPixels();
 emptypixel = maskImage.get(3,3); // define what an empty pixel is

```

Now the rest of your code will work. If the mask color is white, don’t bother to compute the Cell.

However, your example images aren’t going to do anything because your input image (two black and white halves isn’t reactive. Make sure there is texture within your active zones.

 ![13%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/733d9cbe4af5e44f4deaab86e428b0099aa409b5.png)

```auto
import java.awt.Color;

PImage img, maskImage;

Cell[][] grid;
Cell[][] prev;

color emptypixel;

void setup() {
 size(364, 364);

 grid = new Cell[width][height];
 prev = new Cell[width][height];

 img = loadImage("https://processing.org/img/processing3-logo.png");
 img.resize(width, height);
 img.loadPixels();
 maskImage = loadImage("mask.png");
 //img.mask(maskImage);
 maskImage.loadPixels();
 emptypixel = maskImage.get(10,10); // define what an empty pixel is

 float a = 1;
 float b = 0;
 for (int i = 0; i < width; i++) {
   for (int j = 0; j < height; j ++) {
     if (brightness(img.get(i, j))>16) {
       a = 1;
       b = 0;
     } else {
       a = 5;
       b = 5;
     }
     grid[i][j] = new Cell(a, b);
     prev[i][j] = new Cell(a, b);
   }
 }
}

float dA = 1.0;
float dB = 0.5;
float feed = 0.08;  
float k = 0.06;

class Cell {
 float a;
 float b;

 Cell(float a_, float b_) {
   a = a_;
   b = b_;
 }
}

void update() {
 for (int i = 1; i < width-1; i++) {
   for (int j = 1; j < height-1; j ++) {

     Cell spot = prev[i][j];
     Cell newspot = grid[i][j];

     float a = spot.a;
     float b = spot.b;

     float laplaceA = 0;     
     laplaceA += a*-1;
     laplaceA += prev[i+1][j].a*0.2;
     laplaceA += prev[i-1][j].a*0.2;
     laplaceA += prev[i][j+1].a*0.2;
     laplaceA += prev[i][j-1].a*0.2;
     laplaceA += prev[i-1][j-1].a*0.05;
     laplaceA += prev[i+1][j-1].a*0.05;
     laplaceA += prev[i-1][j+1].a*0.05;
     laplaceA += prev[i+1][j+1].a*0.05;

     float laplaceB = 0;
     laplaceB += b*-1;
     laplaceB += prev[i+1][j].b*0.2;
     laplaceB += prev[i-1][j].b*0.2;
     laplaceB += prev[i][j+1].b*0.2;
     laplaceB += prev[i][j-1].b*0.2;
     laplaceB += prev[i-1][j-1].b*0.05;
     laplaceB += prev[i+1][j-1].b*0.05;
     laplaceB += prev[i-1][j+1].b*0.05;
     laplaceB += prev[i+1][j+1].b*0.05;

     newspot.a = a + (dA*laplaceA - a*b*b + feed*(1-a))*1;
     newspot.b = b + (dB*laplaceB + a*b*b - (k+feed)*b)*1;

     newspot.a = constrain(newspot.a, 0, 1);
     newspot.b = constrain(newspot.b, 0, 1);
   }
 }
}  

void swap() {
 Cell[][] temp = prev;
 prev = grid;
 grid = temp;
}  

void draw() {
 //println(frameRate);

 for (int i = 0; i < 1; i++) {
   update();
   swap();
 }

 loadPixels();
 for (int i = 1; i < width-1; i++) {
   for (int j = 1; j < height-1; j ++) {
     if (maskImage.get(i, j) != emptypixel) {
       Cell spot = grid[i][j];
       float a = spot.a;
       float b = spot.b;
       int pos = i + j * width;
       //pixels[pos] = color((a-b)*255);
       color aColor = color (0, 0, 0);
       color bColor = color (255, 255, 255);
       pixels[pos] = lerpColor(aColor, bColor, (a-b));
     }
   }
   updatePixels();
 }
}

```

…or maybe I misunderstood, and you wanted the two halves to be the mask, and the little shapes to be the image. That would work.

 ![52%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2f9891e8b3e092c633d44455035daba2dbe3a8fb.png)

Note also that with **EDIT your diffusion is evolving the same way underneath, in update(), but being copied selectively. If you used the mask code in update instead, multiple small windows it mayevolve differently than if you were computing the diffusion across the whole grid and then only revealing part of it as in approach 2. Instead, you would be** computing a bunch of small diffusions that are never developing beyond their own edges – and thus never interacting with each other. On the other hand, that is much faster if you are only computing the pixels that you show.

---

<div class="post-metadata">

**Author:** ![alice](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alice](https://discourse.processing.org/u/alice)\
**Post date:** [July 14, 2019, 12:44pm UTC](https://discourse.processing.org/t/import-image-and-apply-pattern/12229/20 "2019-07-14T12:44:39Z")

</div>

HI @jeremydouglass ,  
I just realised that with the black and white mask I can’t have a gradual change of the pattern, please have a look at this image to show you what I’m trying to do : ![6](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6daa920465b1e3198101921bb6d207b54144b0a7.png) ![3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8ceb4c100bd5c15c386c3c0e7dbd5200919109c9.png)

Looks like I need to have a gradient colour as a mask to have that result ? I actually want to see the black rectangles on the left and slowly when I go on the right there is a gradual born of the pattern when the rectangles are black…

mmm I’m trying again ,

Thanks!

[Next page](https://discourse.processing.org/t/import-image-and-apply-pattern/12229.md?page=2)