# Trying to fill a shape with a pixel colour from a loaded image

**URL:** <https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996>\
**Category:** Coding Questions\
**Created:** [August 2, 2020, 4:13pm UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996 "2020-08-02T16:13:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jesspayne](https://avatars.discourse-cdn.com/v4/letter/j/f07891/32.png) [@jesspayne](https://discourse.processing.org/u/jesspayne)\
**Post date:** [August 2, 2020, 4:13pm UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/1 "2020-08-02T16:13:21Z")

</div>

Hi!

Firstly please excuse my newbie question! Could anyone point me in the right direction please? I am trying to source a random pixel colour from a loaded image and load it in to a shape. I have spent a few hours looking through the forums but have not found anything so far.

Thanks in advance,  
Jess

```auto
PImage img;
float pointillize = 100;
PShape svg;
float my_num = 0;

void setup() {
  size(900,900);
  svg = loadShape("Virus_organic.svg");
  img = loadImage("Snake.jpg");
  background(255);
  smooth();
}

void draw() {
  img.resize(900,900);
  float x = noise(my_num) * width;
  float y = noise (my_num + 40) * height;
  float loc = x + y*img.width;
  
  my_num = my_num + 0.02;
  
  //here I am trying to locate a random pixel colour from my loaded image
  //loadPixels();
  //float r = red(img.pixels[loc]);
  //float g = green(img.pixels[loc]);
  //float b = blue(img.pixels[loc]);
  //noStroke();
  
  
shape(svg, x, y, pointillize, pointillize);
  shapeMode(CENTER);
  svg.disableStyle();
  //here I am trying to fill my shape with the random pixel colour from my loaded image
  //fill(r,g,b,100);

}

```

---

<div class="post-metadata">

**Author:** ![NumericPrime](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/numericprime/32/16318_2.png) [@NumericPrime](https://discourse.processing.org/u/NumericPrime)\
**Post date:** [August 2, 2020, 5:14pm UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/2 "2020-08-02T17:14:41Z")

</div>

I don’t know if it’s that your Looking for but you can use the get method to read the Color of a Pixel on the screen. It works like this.

```auto
color p=get(x,y);

```

You can use

```auto
fill(p,100);

```

then.

---

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [August 2, 2020, 5:23pm UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/3 "2020-08-02T17:23:26Z")

</div>

The Coidng Train on youtube has a processing pixels playlist, it could help you.  
Edit: [https://www.youtube.com/watch?v=EmtU0eloTlE&list=PLRqwX-V7Uu6YB9x6f23CBftiyx0u\_5sO9&index=4](https://www.youtube.com/watch?v=EmtU0eloTlE&list=PLRqwX-V7Uu6YB9x6f23CBftiyx0u_5sO9&index=4)  
Also: [get() / Reference / Processing.org](https://processing.org/reference/PImage_get_.html)  
Another edit: this simple code works:

```auto
PImage img;
//the images width and height is 640
int e = int(random(0, 641));
int e2 = int(random(0, 641));

void setup() {
  size(640, 640);
  img = loadImage("blabla.png");
}

void draw() {
  color c = img.get(e, e2);
  fill(c);
  rect(0, 0, 100, 100);
}

```

---

<div class="post-metadata">

**Author:** ![MelonMan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/melonman/32/10141_2.png) [@MelonMan](https://discourse.processing.org/u/MelonMan)\
**Post date:** [August 2, 2020, 10:45pm UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/4 "2020-08-02T22:45:24Z")

</div>

I’m confused as to why you would need a random color from an image instead of just a random color, but there’s another way that hasn’t been mentioned yet, that seems to be close to what you were attempting.

I was able to complete that task here, with the color changing, unsure of your purpose so you may need to store the value before using it.

```auto
PImage bg;

void setup() {
  bg = loadImage("background.jpg");
  bg.loadPixels();
  size(1920, 1080);
  background(0);
}
void draw() {
  background(0);
  stroke(bg.pixels[floor(random(0, bg.width * bg.height))]);
  strokeWeight(5);
  line(0, 0, width, height);
}

```

if you’re using a different r, g, and b color, you’re going to get a random color, and may as well just make a random color. here by using the specific color of the selected pixel, we get a color unique to the image.

The same code can be used with fill to get a random color.  
It’s important to know that pixels provides a full color (including r, g, and b) that can be used in most places requiring r g and b values, making getting separate values just extra fluff.

```auto
PImage bg;

void setup() {
  bg = loadImage("background.jpg");
  bg.loadPixels();
  size(1920, 1080);
  background(0);
}
void draw() {
  translate(width/2, height/2);
  background(0);
  fill(bg.pixels[floor(random(0, bg.width * bg.height))]);
  strokeWeight(5);
  rectMode(CENTER);
  rect(0, 0, 100, 100);
}

```

highly recommend checking out qewer3322’s provided links, the coding train on youtube is a great source of inspiration and instruction.

As to using “get(x, y)” or “pixels[int]”

checking the reference provides some insight.

> Getting the color of a single pixel with **get(x, y)** is easy, but not as fast as grabbing the data directly from **pixels[]**. The equivalent statement to **get(x, y)** using **pixels[]** is **pixels[y\*width+x]**. See the reference for pixels[] for more information.

> **[get() / Reference](https://processing.org/reference/get_.html)**
>
> Reads the color of any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a…

---

<div class="post-metadata">

**Author:** ![jesspayne](https://avatars.discourse-cdn.com/v4/letter/j/f07891/32.png) [@jesspayne](https://discourse.processing.org/u/jesspayne)\
**Post date:** [August 8, 2020, 7:01am UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/5 "2020-08-08T07:01:11Z")

</div>

thank you so much for the reply - I’ll have a play today - really appreciate your help.

---

<div class="post-metadata">

**Author:** ![jesspayne](https://avatars.discourse-cdn.com/v4/letter/j/f07891/32.png) [@jesspayne](https://discourse.processing.org/u/jesspayne)\
**Post date:** [August 8, 2020, 7:02am UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/6 "2020-08-08T07:02:53Z")

</div>

Thank you. I have watched a few coding train videos which are very useful - thanks for pointing me to this one. Really appreciate you providing the code - I’ll have a play today.

---

<div class="post-metadata">

**Author:** ![jesspayne](https://avatars.discourse-cdn.com/v4/letter/j/f07891/32.png) [@jesspayne](https://discourse.processing.org/u/jesspayne)\
**Post date:** [August 8, 2020, 7:07am UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/7 "2020-08-08T07:07:24Z")

</div>

That’s great, thank you. I’m working with a series of photographs from a uni project that I’d like look up (not all at once) in order to get the random colour. It’s a project that’s gone off on a bit of a tangent but I’m interested to see where this leads me. I really appreciate the code and will have a play today with it.

---

<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 8, 2020, 4:53pm UTC](https://discourse.processing.org/t/trying-to-fill-a-shape-with-a-pixel-colour-from-a-loaded-image/22996/8 "2020-08-08T16:53:47Z")

</div>

> [@MelonMan](#):
>
> why you would need a random color from an image

You may want to use colors from the palette of colors from a source image.  
I have done this for some of my creative work.

`:)`