Not seeing correct colors?

I have an image on my canvas but am getting some wacky color values when trying to read colour values under my mouse.

Using an image like this to test my program.: test2

When I move my mouse over parts of the blocks of colour I sometimes get weird value or move the mouse from one block to the next produced weird output. The only weird colour values if present should be where two colours meet and there is some colour blending, otherwise every pixel of each bar should be the same colour but getting results that say otherwise.

Ideas on this one???

var state = 0;

function setup() {
  // create canvas
  var c = createCanvas(710, 400);
  background(100);
  // Add an event for when a file is dropped onto the canvas
  c.drop(gotFile);
}

function draw() {
  fill(255);
  noStroke();
  textSize(24);
  textAlign(CENTER);
  if (state == 0){
  text('Drag an image file onto the canvas.', width/2, height/2);
  noLoop();
  }

}

function gotFile(file) {
  // If it's an image file
  if (file.type === 'image') {
    // Create an image DOM element but don't show it
    var img = createImg(file.data).hide();
    // Draw the image onto the canvas
    image(img, 0, 0, width, height);
    state = 0;
  } else {
    println('Not an image file!');
  }
}

function mouseMoved(){
    var color_under_mouse = get(mouseX, mouseY);
    println(mouseX);
    println(mouseY);
    println(color_under_mouse);
}

The values of the colours are being printed every time the mouse is moved using a standard print statement.

Answers

  • PImage img = loadImage("http://forum.processing.org/two/uploads/imageupload/695/JUADTA7KBBW2.jpg");
    void setup(){
      size(img.width,img.height);
    }
    
    void draw(){
      image(img,0,0);
      fill(get(mouseX,mouseY));
      ellipse(mouseX,mouseY-40,20,20);
    }
    
    void mousePressed(){
      color c = get(mouseX, mouseY);
      println( "" + red(c) + " " + green(c) + " " + blue(c) );
    }
    
  • edited May 2015

    From your previous post:
    http://forum.processing.org/two/discussion/10953/trying-to-find-the-colour-of-the-pixels-of-an-image-i-am-loading

    I've mentioned:

    I see that you're using createImg() rather than loadImage() or createImage():
    http://p5js.org/reference/#/p5/createImg

    Be aware though that createImg() returns a p5.Element instead of a p5.Image:
    http://p5js.org/reference/#/p5.Element
    http://p5js.org/reference/#/p5.Image

    Although internally they're essentially the same, a p5.Image object is more streamlined into p5*js's API, bound to its canvas. While p5.Element is more loose in relation to p5's canvas.

    Back to your color problems, Processing frameworks blend colors placed into their canvas all the time.
    For a more faithful p5.Image representation, try out set() in place of image():

  • function setup() {
      // create canvas
      var c = createCanvas(810, 700);
    }
    
    function draw() {
        gotFile();
    }
    
    function gotFile() {
        loadImage("../test3.jpg", function(img) {
        set(0, 0, img);
        });
    }
    
    function mousePressed(){
      var c = get(mouseX, mouseY);
      println( "" + red(c) + " " + green(c) + " " + blue(c) );
    }
    

    Newer Test Image test3

    Really stripped everything out and using loadImage() now. Still getting all kind of wacky colour values. Please try running the code and clicking around on the colours and you will see the blocks do not return uniform values if you click all over them. Boundaries appear way off. Ideas?

  • I thought that but I am getting issues where I get consistent colours say half way through a box of colour then after the midway point it is all one other colour, as if the image is some how offset ... its not slightly off colours but showing white under a pixel when it should be blue for example

  • just tried png same result

  • edited May 2015

    Your draw() callback is programmatically wrong:

    function draw() {
        gotFile();
    }
    

    B/c draw() is by default invoked @ 60 FPS over & over:
    http://p5js.org/reference/#/p5/draw

    That's pretty basic knowledge for any Processing derived framework! :-@
    Therefore, it's a bad place to loadImage() or any other resource from!

    Rather than have your own loadImage()'s callback, give preference to much easier preload():
    http://p5js.org/reference/#/p5/preload

    And according to get()'s reference, it returns a regular RGBa array[] and not a p5.Color:
    http://p5js.org/reference/#/p5/get

    // forum.processing.org/two/discussion/10955/not-seeing-correct-colors
    
    var bg;
    
    function preload() {
      bg = loadImage("../test3.jpg");
    }
    
    function setup() {
      createCanvas(810, 700);
      noLoop();
      loadPixels();
    }
    
    function draw() {
      set(0, 0, bg);
      updatePixels();
    }
    
    function mousePressed(){
      const c = get(mouseX, mouseY);
      print( red(c) + ' ' + green(c) + ' ' + blue(c) );
    }
    
  • edited May 2015

    yes I realized that first mistake a bit ago. current code works similar to yours

    var r,g,b;
    var imageHolder;
    
    function preload() {
        imageHolder = loadImage("../test4.png");
    }
    
    function setup() {
      
      var cc = createCanvas(800, 700);
      background(250);
      loadPixels();
    }
    
    function draw() {
    
      // Draw a preview window
      strokeWeight(2);
      stroke(0);
      fill(r, g, b, 127);
      rect(400, 400, 40, 40);
    
      set(0,0,imageHolder);
      updatePixels();
    }
    
    function mouseMoved() {
      var c = get(mouseX, mouseY);
    
      r = red(c);
      g = green(c);
      b = blue(c);
    
      print( "(" + mouseX + "," + mouseY + ") \t\tColor: # " + c);
      println( "\tR: " + r + "\t G: " + g + "\t B: " + b );
    }
    

    What I now believe is happening is the canvas thinks the loaded image is taking up the entire space available.

    If you run the code above you will see that the preview box shows the mouse colour as if the loaded test image was huge.

    Ideas on this?

    Preview of what I think is happening (transparency of what the program seems to be reading but in reality only the small upper image is drawn to the screen)

    2015-05-23-02.28.56-pm

  • edited May 2015

    I didn't get exactly what you're asking now.
    Nevertheless I've re-tweaked my previous version w/ some of yours. :bz
    Just copy and paste it here: http://p5js.org/reference/#/p5/clear

    // forum.processing.org/two/discussion/10955/not-seeing-correct-colors
    
    var bg;
    
    function preload() {
      //bg = loadImage('assets/rockies.jpg');
      bg = loadImage('assets/moonwalk.jpg');
    }
    
    function setup() {
      createCanvas(bg.width, bg.height);
    
      noLoop();
      rectMode(CENTER);
    
      stroke(0);
      strokeWeight(2);
    }
    
    function draw() {
      set(0, 0, bg);
      updatePixels();
      rect(width>>1, height>>1, 50, 50);
    }
    
    function mouseMoved(){
      const c = get(mouseX, mouseY),
            r = red(c),
            g = green(c),
            b = blue(c);
    
      print( '(' + mouseX + ',' + mouseY + ') \t\tColor: # ' + c );
      print( 'R: ' + r + '\tG: ' + g + '\tB: ' + b );
    
      fill(r, g, b, 0350);
      redraw();
    }
    
  • thanks for all the help so far

    see the image below to see more what I mean, I used your code for this (copy and pasted) - the mouse is over the yellow rectangle but showing blue

    2015-05-23 04.53.27 pm

  • edited May 2015

    what I think it is doing is seeing the image as much much larger, such as

    2015-05-23-04.53.27-pm

    if you can just pretend it to that size when using the program then the preview window does show the right colour

  • 2015-05-23-04.53.27-pm2 one more example

  • I don't understand why it's not working for ya, sorry! :-<
    Pasting my version into http://p5js.org/reference/#/p5/clear works for me. :-\"
    Maybe your p5*js version is old or your Chrome for Mac browser is buggy! ~:>

  • does this work correctly for you?

    var bg;
     
    function preload() {
      //bg = loadImage('assets/rockies.jpg');
      bg = loadImage('http://i.imgur.com/ZdLVqbr.png');
    }
     
    function setup() {
      createCanvas(bg.width, bg.height);
     
      noLoop();
      rectMode(CENTER);
     
      stroke(0);
      strokeWeight(2);
    }
     
    function draw() {
      set(0, 0, bg);
      updatePixels();
      rect(width>>1, height>>1, 50, 50);
    }
     
    function mouseMoved(){
      const c = get(mouseX, mouseY),
            r = red(c),
            g = green(c),
            b = blue(c);
     
      print( '(' + mouseX + ',' + mouseY + ') \t\tColor: # ' + c );
      print( 'R: ' + r + '\tG: ' + g + '\tB: ' + b );
     
      fill(r, g, b, 0350);
      redraw();
    }
    
  • edited May 2015 Answer ✓

    If I copy & paste your latest example into http://p5js.org/reference/#/p5/clear
    it does work correctly for me! 8-|

  • Works fine for me 'out of the box' (Chrome running on Linux). One way I did manage to break it was by manually overriding the size of the canvas element with some CSS: e.g. canvas { width: 100%; } In this case results were erratic as you describe... If you do have any local CSS; try loading the sketch without it?

  • edited May 2015

    wow just tried it on my windows partition and it works perfectly, crazy!

    it doesn't work properly in chrome or safari on my mac, appears to be a bug but works fine in windows

  • Have you tried Firefox on your Mac yet? :-/

  • yup its breaks on firefox too, its a mac / windows problem

  • edited May 2015

    Very awkward indeed! But since @blindfish already tested in Linux and me in Windows, it's a bug isolated in Macs only it seems! ~:>

Sign In or Register to comment.