# Get-the-average-rgb-from-pixels (revisited)

**URL:** <https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661>\
**Category:** Beginners\
**Created:** [August 10, 2021, 10:34am UTC](https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661 "2021-08-10T10:34:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [August 10, 2021, 10:34am UTC](https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661/1 "2021-08-10T10:34:36Z")

</div>

@GoToLoop answered this but which of the two methods is better? Is there a reason to change the int for each of the three RGB channels to color???

Both methods work, I just want to understand.

[get-the-average-rgb-from-pixels](https://forum.processing.org/two/discussion/15573/get-the-average-rgb-from-pixels)

---

<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 10, 2021, 10:52am UTC](https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661/2 "2021-08-10T10:52:31Z")

</div>

Hello @paulstgeorge

I threw this _ **rough** _ code together the other day:

```auto
// Average colour within area of a circle
// v1.0.0
// GLV 2021-08-08

// This is a very rough first pass at this.
// Alpha component 0xFF000000 is added to the final color.

// References:
// https://processing.org/tutorials/pixels/

void setup() 
	{
  size(600, 300);
  background(255);
  stroke(0);
  strokeWeight(50);
  noSmooth();
	}

void draw() 
	{
  //background(128);
  loadPixels();  

  fill(255, 0, 0);
  circle(width/4, height/3, 80);
  
  fill(0, 255, 0);
  circle(2*width/4, height/3, 80);
  
  fill(0, 0, 255);
  circle(3*width/4, height/3, 80);
  
  int sqW = 10;
  int xMin = mouseX - sqW;
  int xMax = mouseX + sqW;
  int yMin = mouseY - sqW;
  int yMax = mouseY + sqW;
  
  int redAve = 0;
  int greenAve = 0;
  int blueAve = 0;
  int count = 0;
  int colAve = color(128);
  
  for (int x = xMin; x < xMax; x++) 
    {
    // Loop through every pixel row
    for (int y = yMin; y < yMax; y++) 
      {
      // Use the formula to find the 1D location
      int loc = x + y * width;
      if (loc>0 && loc<pixels.length)
        {
        if((x-mouseX)*(x-mouseX) + (y-mouseY)*(y-mouseY) < sqW*sqW)
          {
          //print(hex(pixels[loc]), " ");
          count++;  
          redAve += red(pixels[loc]);
          greenAve += green(pixels[loc]);
          blueAve += blue(pixels[loc]);
          
          colAve = 0xFF000000 | (redAve/count)<<16 | (greenAve/count)<<8 | (blueAve/(count+1))&0xFF;
          //println( hex(int(red(pixels[loc]))), hex(int(green(pixels[loc]))), hex(int(blue(pixels[loc]))) );
          //println(hex(redAve), hex(greenAve), hex(blueAve));
          println(hex(redAve/count), hex(greenAve/count), hex(blueAve/count));
          set(x, y+height/3, colAve);
          }   
        }
      }
    }
    
  fill(colAve);
  noStroke();
  circle(width/2, 3*height/4, 80);  
    
  println(); 
  }

```

The topic inspired me.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [August 10, 2021, 12:49pm UTC](https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661/3 "2021-08-10T12:49:09Z")

</div>

Wow, I have so many questions! First a simple one while I play with your code. Is the radius of the sample sqW (10)? What does println() on its own do???

---

<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 10, 2021, 11:24pm UTC](https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661/4 "2021-08-10T23:24:06Z")

</div>

> [@paulstgeorge](#):
>
> What does println() on its own do?

Processing source:  
[https://github.com/processing/processing4/blob/master/core/src/processing/core/PApplet.java#L4015](https://github.com/processing/processing4/blob/master/core/src/processing/core/PApplet.java#L4015)

```auto
static public void println() {
    System.out.println();
  }

```

Which is this in Java:  
[https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/io/PrintStream.html#println()](https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/io/PrintStream.html#println())

> [@paulstgeorge](#):
>
> Is the radius of the sample sqW (10)?

I believe so… I started with a square originally and got carried away.

All those `println()` were for debugging along the way; not a good place for them in the loop.  
See reference for a comment on this:  
`https://processing.org/reference/println_.html`

Keep in mind that this is just me having fun with code and its a mix of things.

I used `pixels[]` array instead of `get()`:

> **[Images and Pixels](https://processing.org/tutorials/pixels/)**
>
> How to load and display images as well as access their pixels.

`:)`

---

<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 11, 2021, 12:48am UTC](https://discourse.processing.org/t/get-the-average-rgb-from-pixels-revisited/31661/5 "2021-08-11T00:48:25Z")

</div>

Hello,

I had some fun with this an have a related gallery topic:

> [@Keep RGB Alive!](https://discourse.processing.org/t/keep-rgb-alive/31676):
>
> Hello, The objective is to keep the sketch window populated with an even mix of R, G and B circles. Start by moving your mouse over the initial colours and then try to keep up with any of the new circles to select the colours. There is some colour blending of a small circular area where you select so you have to choose wisely! Good luck! // Keep RGB Alive! // v1.0.0 // GLV 2021-08-10 // The objective is to keep the sketch window populated // with an even mix of R, G and B circles. // Goo…

`:)`