# How to apply color pixels

**URL:** <https://discourse.processing.org/t/how-to-apply-color-pixels/11941>\
**Category:** Libraries\
**Created:** [June 9, 2019, 9:42am UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941 "2019-06-09T09:42:18Z")\
**Posts on this page:** 9\
**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 9, 2019, 9:42am UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/1 "2019-06-09T09:42:18Z")

</div>

Hi all, I’m new using processing and still learning, I hope someone can help me .

I have this script of the reaction Diffusion, I just want to apply a color of the chemical A and B.  
Also how to import an image and apply the reaction diffusion of that image that I imported,

Hope someone can help, below the script for processing 3, :

```auto
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 < 10; 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 = 1;
        float b = 1;
        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.055;
float k = 0.062;

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 ++) {
      //pixels[j]= color(0,0,255);

      Cell spot = grid[i][j];
      float a = spot.a;
      float b = spot.b;
      int pos = i + j * width;
   
      pixels[pos] = color((a-b)*255);
      //pixels[pos] = color((a-b)*255,0,0);
    }
  }
  updatePixels();
}

```

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [June 9, 2019, 10:27am UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/2 "2019-06-09T10:27:42Z")

</div>

Hi Alice, welcome to the community!

* * *

> [@alice](#):
>
> apply a color of the chemical A and B

To get a mix between two colors you can can use lerpColor(), which blends two colors together with a weighted average.

```auto
color aColor = color(204, 102, 0); //color of chemical a
color bColor = color(0, 102, 153); //color of chemical b
pixels[pos] = lerpColor(aColor, bColor, (a-b)); //blend of a and b's colors depending on how much a or b there is

```

* * *

> [@alice](#):
>
> import an image

You can import an image by placing it in your sketch folder and then by using the following code:

```auto
PImage img; //declare the variable

void setup(){
  ...
  img = loadImage("myImage.png") //Load the image from the file path myImage.png
  ...
}

```

If you then want to display the image you can use the [image function](https://processing.org/reference/image_.html).

* * *

> [@alice](#):
>
> apply the reaction diffusion of that image that I imported

I’m not sure what you mean by this.  
Do you mean overlaying the image  
or blending between two images  
or warping the pixels?  
Do you have an example of what you are trying to achieve?

* * *

Also could you make sure your code is properly indented (press crtl+T in the Processing IDE) and format it as code (select the code and press the \</\> button here on the forum).

---

<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 9, 2019, 11:06am UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/3 "2019-06-09T11:06:50Z")

</div>

Hi Wizard, @TheWizardBear  
Thanks for your quick reply and help! the colour is working perfectly !  
I sent you some images to show you what I’m trying to achieve: from the lines of an image I can have different pattern or also to start from lines or dots.

 ![16](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f50e522c7e16508ca5cd1b8d99c5c2098face8da.jpeg)

Please let me know If It’s clear and thanks again

Cheers

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [June 9, 2019, 12:35pm UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/4 "2019-06-09T12:35:31Z")

</div>

Ha ha I understand what you are trying to achieve now but I don’t really know how to achieve it!

Maybe try seeding the image with more of chemical a/b where the picture is lighter/darker or where there is more of a color difference between that pixel and nearby ones?  
Perhaps you could try to limit the spread or have a higher kill rate where the picture is darker?

There is probably some documentation (e.g. articles or code) for this kind of effect somewhere, you just have to find it! Where did you get these images from? Maybe there is some more information there?

---

<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 9, 2019, 5:29pm UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/5 "2019-06-09T17:29:59Z")

</div>

Hi @TheWizardBear I found those images in internet but now I’m trying to find more documentations and more tutorial of processing to see how to do It 🙂

Thanks again for your help!

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [June 10, 2019, 8:12am UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/6 "2019-06-10T08:12:52Z")

</div>

No problem. Sorry I didn’t know how do do that reaction/diffusion image thing.  
If you still can’t work out how to do it, try opening it as new topic (though I would try out a few things first like increasing the kill/feed rate where the picture is lighter/darker).

---

<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 10, 2019, 1:32pm UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/7 "2019-06-10T13:32:30Z")

</div>

@TheWizardBear Hi, I tried to set the color in this new code but It’s not working here… ☹  
Also how I can “deactivate” the mouse pressed ( It means that when I draw in the window, the reaction /diffusion will formed, but I don’t want )  
Below the code in proccessing 1.5,  
Thanks a lot

\<

import toxi.sim.grayscott._;  
import toxi.math._;

GrayScott gs;

void setup() {  
size(256, 256);  
gs=new GrayScott(width, height, false);  
gs.setCoefficients(0.023, 0.074, 0.095, 0.03);  
}

void draw() {  
if (mousePressed) {  
gs.setRect(mouseX, mouseY, 20, 20);  
}  
loadPixels();  
for (int i=0; i\<10; i++) gs.update(1);  
for (int i=0; i\<gs.v.length; i++) {  
float cellValue=gs.v[i];  
int col=255-(int)(min(255, cellValue\*768));

```
pixels[i]=col<<16|col<<8|col|0xff000000;

```

}  
updatePixels();  
}

void keyPressed() {  
gs.reset();  
}

>

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [June 11, 2019, 3:26pm UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/8 "2019-06-11T15:26:50Z")

</div>

Maybe try removing this if statement:  
`if (mousePressed) {`

---

<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 11, 2019, 10:27pm UTC](https://discourse.processing.org/t/how-to-apply-color-pixels/11941/9 "2019-06-11T22:27:39Z")

</div>

Hi @TheWizardBear,

Thanks a lot for your help, I’m still working on it ,

Cheers