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

Processing Coding Questions
#1

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

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);

}
#2

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.

color p=get(x,y);

You can use

fill(p,100);

then.

#3

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
Also: https://processing.org/reference/PImage_get_.html
Another edit: this simple code works:

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);
}
#4

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.

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.

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.

https://processing.org/reference/get_.html

2 Likes