Reflect color of one object to another object through cursor position

Processing Coding Questions
1

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!

2

Hi! Welcome to the forum!

First of all please format the code!

3

read this good start

https://processing.org/examples/lineargradient.html

4

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

5

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



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

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

image
image507×524 27.9 KB

7

hope this help you have to add controlP5 library

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();
}
8

Untitled 163
Untitled 1631200×714 60.1 KB

1 Like
9

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
image507×524 28.5 KB

10

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

11

Hello,

Some references:

Example:

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

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:

  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

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!

:)

12

This is my updated code:

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
image502×501 1.58 KB

13

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

1 Like
14

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:

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
image502×527 29.4 KB

PGraphics \ Language (API) \ Processing 3+

:)