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

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


  function handleFileSelect(evt) {
    var 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.*')) {

      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="',,
                            '" title="', escape(, '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);

      // Read in the image file as a data URL.

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

   body {padding: 0; margin: 0;} 


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


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

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


Sign In or Register to comment.