Help me. Please. (Image and color)

Processing Project Guidance
1

Hello everyone,

I am a newbie in Processing! I have to submit a project very soon for the final exam at university but i don’t know how i can do this.
Could someone help me?
Taking any image, I should be able to create a Bezier triangle, with 3 main colors of the image at the vertices. When i click on each vertex, I must be able to select any color in order to change that color on the image.
Like this…

Screenshot (4)
Screenshot (4)803×466 60.1 KB

Thanks in advance for your help.
Please help me, I’m really thankful to everybody.

2

Any code so far? Or a start at implementation?

3

Hello,

There are lots of resources (tutorials, examples, references, etc.) here:

Also check out the examples that come with the Processing PDE:

image
image773×646 57.6 KB

The RGB cube is one example that is not on website (should be!).
It has an example of how to add color to vertices.

For starters, break it down into pieces and find an example for each component of your project (to learn from) and generate snippets of code (you should write these) for later to integrate into the larger project.

If you are using code with permission be sure to cite all references to this code.

This is achievable and will require some work on your part.

Have fun!

:)

4

tutorial https://www.processing.org/tutorials/color/

break down you problem into chunks

load Image in setup

for loop over the content to find the 3 main colors of the image

in draw():

use lerpColor to make the triangle

display the triangle

receive mouse Input (triangle / buttons) in mousePressed



// color picker 

// uploaded by Jean-no
// see https://www.openprocessing.org/sketch/8816#

float luminosite=300;
int[] picked;
PGraphics monPicker;
color colorPickerReturnColor; 

// --------------------------------------------------------------------------------------------------

void setup() {
  size(660, 960);
  setupColorPicker();
}

void draw() {
  background(0); 

  fill(colorPickerReturnColor);
  rect(width-120, 100, 100, 100); 

  drawColorPicker();
}

// --------------------------------------------------------------------------------------------------

void setupColorPicker() {
  // je me mets en HSB, je décide que H va de 0 à 2xpi, que S va de 0 à 150 et B de 0 à 300.  
  colorMode(HSB, TWO_PI, 150, 300); 

  noFill();
  picked = new int[2];
  picked[0]=250;
  picked[1]=200;
  monPicker = createGraphics(300, 300);
  redessinePicker();
}

// --------------------------------------------------------------------------------------------------

void drawColorPicker() {

  // State currState = states.get(state);

  rectMode(CORNER);
  colorMode(RGB, 255); 

  fill(150);
  noStroke();
  rect (58, 8, 450-15-50+8, 800-150 ); // main rect 
  stroke(255);
  noFill();
  rect( 58+2, 8+2, 450-15-50+8-4, 800-150-4 );
  textAlign(LEFT); 

  rectMode(CENTER);
  colorMode(HSB, TWO_PI, 150, 300); 
  noFill();
  image(monPicker, 100, 50);

  if (mousePressed) {
    if (mouseY>390 && mouseY<440) {
      luminosite =  constrain((mouseX-100), 0, 300);
    } else { 
      if (dist(mouseX, mouseY, 250, 200)<150) {
        picked[0]=mouseX;
        picked[1]=mouseY;
      }
    }
    redessinePicker();
  }
  for (int a=0; a<300; a++) {
    stroke(0, 0, a);
    line(a+100, 400, a+100, 440);
  }
  line(luminosite+100, 398, luminosite+100, 442);
  colorPickerReturnColor=get(picked[0], picked[1]);

  fill(0, 0, 255);
  text("R: "+regledetrois(red(colorPickerReturnColor), TWO_PI, 255), 380, 50);
  text("G: "+regledetrois(green(colorPickerReturnColor), 150, 255), 380, 65);
  text("B: "+regledetrois(blue(colorPickerReturnColor), 300, 255), 380, 80);
  rect(picked[0], picked[1], 4, 4);
  fill(colorPickerReturnColor);

  rect(420, 330, 40, 40);

  fill(255);
  text ("        Use mouse to change color for pen.", 
    47+35, 800-150-10);
  strokeWeight(1);
  rectMode(CORNER);

  fill(255);
  text("Color Selector: Hit Escape key or X to cancel; use mouse to choose color. Use Check to confirm.", 30, height-44);
}

// --------------------------------------------------------------------------------------------------

int regledetrois(float val, float scalo, int scald) {
  int val2 = (int)((val/scalo)*scald);
  return val2;
}

void redessinePicker() {
  monPicker.beginDraw();
  monPicker.colorMode(HSB, TWO_PI, 150, 300); 
  for (int x=0; x<300; x++) {
    for (int y=0; y<300; y++) {
      float Saturation =dist(x, y, 150, 150);
      if (Saturation<150) {
        float Teinte = atan2(150-y, 150-x)+PI; 
        monPicker.stroke(Teinte, Saturation, luminosite);
        monPicker.point(x, y);
      }
    }
  } 
  monPicker.endDraw();
}
//
1 Like
5

thank you so much :smiley:

1 Like