# Reflect color of one object to another object through cursor position

**URL:** <https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888>\
**Category:** Coding Questions\
**Created:** [May 5, 2021, 2:05pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888 "2021-05-05T14:05:25Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![joelm03](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@joelm03](https://discourse.processing.org/u/joelm03)\
**Post date:** [May 5, 2021, 2:05pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/1 "2021-05-05T14:05:25Z")

</div>

I am trying to have a gradient RGB rectangle to reflect each color on a bigger rectangle depending on the mouse’s position. I was able to come up with this:

void draw() {  
noStroke();  
for (i = 0;i \< width; i++)  
{  
fill(i, 100, 100);  
rect(i+x, 0, width, 50);

```
color mouseColor = get(mouseX, mouseY);
fill(mouseColor);
//noStroke();
rect(0,i+50,width,height-50);

```

}  
}

The problem is, all colors on the RGB gradient get displayed one by one on top of one another as the cursor moves past them. What I want is for the colors to be separately reflected. Any help would be appreciated. I’m very much a newbie in Processing. Thanks!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 5, 2021, 7:36pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/2 "2021-05-05T19:36:26Z")

</div>

Hi! Welcome to the forum!

First of all please format the code!

[https://www.khm.de/~n.hieda/discourse-code.mp4](https://www.khm.de/~n.hieda/discourse-code.mp4)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 5, 2021, 7:56pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/3 "2021-05-05T19:56:09Z")

</div>

read this good start

[https://processing.org/examples/lineargradient.html](https://processing.org/examples/lineargradient.html)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 5, 2021, 8:08pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/4 "2021-05-05T20:08:39Z")

</div>

hmmm in fact I think the problem is that the rectangle overlay is overwriting the texture (I assume that the op somehow made gradient texture similar to this example). Perhaps the op needs to separate the background into a PGraphics so it won’t be affected by overlay

[https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 5, 2021, 8:21pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/5 "2021-05-05T20:21:53Z")

</div>

see this example i am not sure the i understand whats your real issue

```auto

void setup() {
  size(600, 600);
  noStroke();
}

void draw() {

  int x = (int) map(mouseY, 0, height, 0, 180);
  int y = (int) map(mouseY, 0, height, 80, 255);

  for (int i=height/2; i>0; i-=1) {

    color a = color(x, 0, 0);
    color b = color(y, 0, 0);

    color in = lerpColor(a, b, map(i, height/2, 0, 1.0, 0.0));
    fill(in);
    rect(0, 0, width, i);

    in = lerpColor(a, b, map(i, height/2, 0, 0.0, 1.0));
    fill(in);  
    rect(0, height/2, width, i);
  }
}

```

---

<div class="post-metadata">

**Author:** ![joelm03](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@joelm03](https://discourse.processing.org/u/joelm03)\
**Post date:** [May 6, 2021, 12:41am UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/6 "2021-05-06T00:41:36Z")

</div>

Hi, sorry I could not explain well in words my issue. But this is what I’m trying to achieve

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/adda866ec7bfc16d427eb2eb66463cc8ff8419be.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 6, 2021, 3:32am UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/7 "2021-05-06T03:32:26Z")

</div>

hope this help you have to add controlP5 library

```auto
import controlP5.*;

ControlP5 cp5;
ColorWheel col; 

void setup() {

  size(800, 600);

  cp5 = new ControlP5(this);
  col = cp5.addColorWheel("COLOR")
    .setPosition(20, 220)
    .setRGB(color(31, 128, 255));
}

void draw() {
  background(0);
  pushMatrix();
  lights();
  translate(width/2, height/2, 0);
  fill(col.getRGB());
  noStroke();
 rect(222,1,555,666);
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 6, 2021, 4:01am UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/8 "2021-05-06T04:01:30Z")

</div>

![Untitled 163](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/40c2ab8cdb9038e5d2fa1e56990b647c3c2be869.jpeg)

---

<div class="post-metadata">

**Author:** ![joelm03](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@joelm03](https://discourse.processing.org/u/joelm03)\
**Post date:** [May 6, 2021, 1:02pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/9 "2021-05-06T13:02:49Z")

</div>

thank you for the suggestion! I did try PGraphics and was successful. My remaining problem is how to display the colors in a “gradient” HSB like the one in the image below. Right now I’m only able to display solid colors.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5906e93e9e7831e59ef89e1bdc8fc2a50d83635b.jpeg)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 6, 2021, 3:05pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/10 "2021-05-06T15:05:13Z")

</div>

great, but without your entire code / updated code it’s hard to say anything. I think the link jafal posted above will be helpful

> [@Reflect color of one object to another object through cursor position](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/3):
>
> read this good start [https://processing.org/examples/lineargradient.html](https://processing.org/examples/lineargradient.html)

---

<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:** [May 7, 2021, 1:05am UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/11 "2021-05-07T01:05:01Z")

</div>

Hello,

Some references:

- [Color \ Processing.org](https://processing.org/tutorials/color/)
- [colorMode() \ Language (API) \ Processing 3+](https://processing.org/reference/colorMode_.html)
- [get() \ Language (API) \ Processing 3+](https://processing.org/reference/get_.html)
- [mouseX \ Language (API) \ Processing 3+](https://processing.org/reference/mouseX.html)
- [https://processing.org/tutorials/pixels/\*](https://processing.org/tutorials/pixels/*)

Example:

```auto
void setup() 
  {
  size(360, 360);           
  colorMode(HSB, 360);
  }

void draw() 
  {
  background(0);
  
  for (int i = 0; i < 360; i++) 
    {
    stroke(i);
    line(i, 0, i, 100);
    }
  }

```

I removed the saturation and brightness from colorMode() and stroke() in the above example.

You can restore them and get a color gradient. Use P2D in size.  
Example is black and white:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b7851979c881c54615f7f241938dfeb324fd4528.png)

A combination of mouseX(), mouseY() and get() will extract the color from the gradient bar.

I created a rectangle with vertices and used fill() for each of the corners:

```auto
  beginShape(QUADS);
  fill(col); vertex( 360, 360);
  fill(col); vertex(0, 360);
  fill(col); vertex(0, 100);
  fill(col); vertex( 360, 100);
  endShape(CLOSE);

```

The colors are all the same in my example but you can extract hue(), saturation() and brightness() and color and fill() each corner achieve this effect:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8cbdb3a9043549f286bbd94a9c4d30d6d96000ea.jpeg)

You can tweak this to your liking.

There are other ways to do this with pixels[] and and get() and set() that may be better to show the hue, saturation and brightness in the rectangle.

This was just a quick exploration of this.  
I have done this before and do something different each time.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![joelm03](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@joelm03](https://discourse.processing.org/u/joelm03)\
**Post date:** [May 7, 2021, 1:31pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/12 "2021-05-07T13:31:11Z")

</div>

This is my updated code:

```auto
PGraphics display;
int x = 0;
int i = 0;
void setup(){
  size(500,550);
  colorMode(HSB, 500, 100, 100);
  
  
  display = createGraphics(width,height-50);
}

void draw(){
  noStroke();
  for (i = 0;i < width; i++)   
  {
    fill(i, 100, 100);
    rect(i+x, 0, width, 50);
  
  display.beginDraw();
  display.background(get(mouseX, mouseY));
  display.endDraw();
  
  image(display,0,50);
}
}

```

This is how it looks like now, with solid colors being displayed on the bottom square.

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

---

<div class="post-metadata">

**Author:** ![joelm03](https://avatars.discourse-cdn.com/v4/letter/j/df788c/32.png) [@joelm03](https://discourse.processing.org/u/joelm03)\
**Post date:** [May 7, 2021, 1:32pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/13 "2021-05-07T13:32:11Z")

</div>

Thank you! I will try to incorporate this into my code.

---

<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:** [May 7, 2021, 2:49pm UTC](https://discourse.processing.org/t/reflect-color-of-one-object-to-another-object-through-cursor-position/29888/14 "2021-05-07T14:49:27Z")

</div>

Hello,

Example that creates the PGraphic in setup() and uses it in draw().  
Your code (I had some fun with it) and modified PGraphics reference combined:

```auto
PGraphics display;
int x = 0;
int i = 0;
void setup()
  {
  size(500, 500);
  colorMode(RGB);  
  display = createGraphics(width/2, height/2);
  
  display.beginDraw();
  display.noStroke();
  for (i = 0; i < width/2; i++)   
    {
    display.fill(i*255.0/(width/2));
    display.circle(width/2-width/4, height/2-width/4, width/2-i);
    }
  display.endDraw();
  }
  
void draw()
  {
  background(get(mouseX, mouseY));
  image(display, width/4, height/4);
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c48e3514f44eff08bb0f298e82fb51a49ca8c1e4.png)

_[PGraphics \ Language (API) \ Processing 3+](https://processing.org/reference/PGraphics.html)_

`:)`