Trying to find the colour of the pixels of an image I am loading....

jonhaber

I am trying to find the colour underneath my mouse pointer. I want to be able to load an image from a local folder selected by a user (ie through a file window open dialogue box) then scroll over any part of the image and capture the RGB value below my pointer.

Currently the html code loads an image to the screen but then p5 cannot read the value of the pixel of the loaded image (I believe because they are being drawn to separate frames/canvases ?) It is correctly reading colour of pixels of things drawn in the sketch.js file (below this is shown with a test shape - a red circle)

Thanks for the help. Code below...

index.html

  
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render image.
          var span = document.createElement('span');
          span.innerHTML = ['img src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);


  
  
   body {padding: 0; margin: 0;} 

---

sketch.js

function setup(){
  colorMode(RGB, height, height, height);
  createCanvas(1024, 768);

}

function draw() {
  // put drawing code here
  fill("red");
  ellipse(50, 50, 80, 80); // putting something on the sketch canvas
}

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

_vk

First things first

:)

jonhaber

the pre code always fails me when just trying to write < img so the '<' is missing on line 19 of the code above

_vk

You don't need the pre tag, only four spaces before line start and a 2 blank lines before and after the code… I guess… Let's see:

 '<img src="', e.target.result, '" title="', escape(theFile.name), '"/>'

I think you need to display the image using p5.js with an image(ing, x, y); function, in draw(). Not using HTML.

GoToLoop

• Just like Processing Java Mode, p5*js also has its own <canvas>.
• Most of its API, like get(), rect(), image(), etc., act upon its bound <canvas> only.
• Therefore, in order to use get(), any p5.Image gotta be stamped into the <canvas>.

GoToLoop

BtW, < in HTML code is <. ;)

jonhaber

how would I "stamp' it into a shared canvas? thx

GoToLoop

• Use image() function of course: http://p5js.org/reference/#/p5/image
• Or even set(): http://p5js.org/reference/#/p5/set
• But it's gotta be a p5.Image: http://p5js.org/reference/#/p5.Image
• Get 1 via loadImage(): http://p5js.org/reference/#/p5/loadImage
• Or make 1 via createImage(): http://p5js.org/reference/#/p5/createImage