Not seeing correct colors?

jonhaber

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.:

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.

TfGuy44

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

_vk

Also you might like to have a look here:

http://forum.processing.org/two/discussion/8086/what-is-a-color-in-processing

GoToLoop

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:

• Get 1 via loadImage(): http://p5js.org/reference/#/p5/loadImage
• Or make 1 via createImage(): http://p5js.org/reference/#/p5/createImage

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():

• Use image() function of course: http://p5js.org/reference/#/p5/image
• Or even set(): http://p5js.org/reference/#/p5/set

jonhaber

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

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?

koogs

jpg compression.

http://en.wikipedia.org/wiki/JPEG#JPEG_compression

http://en.wikipedia.org/wiki/JPEG#Compression_ratio_and_artifacts

jonhaber

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

jonhaber

just tried png same result

GoToLoop

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

jonhaber

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)

GoToLoop

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

jonhaber

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

jonhaber

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

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

jonhaber

one more example

GoToLoop

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! ~:>

jonhaber

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

GoToLoop

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

blindfish

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?

jonhaber

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

GoToLoop

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

jonhaber

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

GoToLoop

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