How do I get a pixel colour at a position on canvas?

Specifically I want to get the colour of a pixel that’s in an AR background ( based on a position relative to a 3d object in the scene) and then use that information to colour something else.

Possible?
Thanks

1 Like

Yes, Posible, It occurs to me that you could start with something like this,

(...)canvas.getContext('2d');

Check the following link of Mozilla for information that will be very useful: https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/getContext

1 Like

For reading the component value pixel in 100,50 coordinartes

blueComponent = imageData.data,()

var xCoord = 50;
var yCoord = 100;
var canvasWidth = 1024;

function getColorIndicesForCoord(x, y, width) {
  var red = y * (width * 4) + x * 4;
  return [red, red + 1, red + 2, red + 3];
}

var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);

var redIndex = colorIndices[0];
var greenIndex = colorIndices[1];
var blueIndex = colorIndices[2];
var alphaIndex = colorIndices[3];

var redForCoord = imageData.data[redIndex];
var greenForCoord = imageData.data[greenIndex];
var blueForCoord = imageData.data[blueIndex];
var alphaForCoord = imageData.data[alphaIndex];
1 Like

Hi, thanks for this but I don’t really know how to incorporate it. I’m just getting the error ‘imageData is not defined’.

giphy

Please review this full code on 8thwall.com/8thwall.
there are examples of complete html code about what you are trying to do. With a little effort I could be able to link it to Playcanvas without problem. This project is very interesting, I would like to have more time to collaborate but my work steals my whole day.

1 Like

@Grimmy Here we have a closer example, still very rustic.

Could you please @yaustar, help me launch some events from it? For magenta and cyan color detected.


  // CMYK color recognition

(...)
<div class="demo-title">
 
   <p><a href="http://trackingjs.com" target="_parent">tracking.js</a>
 - use magenta color to draw and cyan to erase</p>
 
 </div>

  <div class="demo-frame">
    <div class="demo-container">
  
    <div class="draw-frame">
      
  <video id="video" width="400" height="300" preload autoplay loop muted></video>
   
     <canvas id="canvas" width="400" height="300"></canvas>
 
     </div>
    </div>
  </div>

  <script>
    window.onload = function() {
  
    var video = document.getElementById('video');
    
  var canvas = document.getElementById('canvas');
  
    var context = canvas.getContext('2d');

      var drawSegments = [[]];
 
     var segment = 0;

      var tracker = new tracking.ColorTracker(['magenta', 'cyan']);

     
 tracking.track('#video', tracker, { camera: true });

      tracker.on('track', function(event) {
       
 if (event.data.length === 0 && drawSegments[segment].length > 0) {
          segment++;

    
      if (!drawSegments[segment]) {
            drawSegments[segment] = [];
          }
        }

      
  event.data.forEach(function(rect) {
  
      
  if (rect.color === 'magenta') {

 draw(rect);
 
this.app.fire=("magentaDetected");  // fire if magenta color is recognized from webcam
         }

 else if (rect.color === "cyan') {
 
erase(rect);
 
this.app.fire=("cyanDetected"); 
          } 

});  });

   
   function draw(rect) {
        drawSegments[segment].push(rect.x + rect.width / 2, rect.y +
 rect.height / 2);
      }

      function erase(rect) {
        context.clearRect(rect.x, rect.y, rect.width, rect.height);
   
   }

      function isInsideRect(x, y, rect) {
        return rect.x <= x && x <= rect.x + rect.width &&
       
     rect.y <= y && y <= rect.y + rect.height;
      }

      (function loop() {
       
   for (var i = 0, len = drawSegments.length; i < len; i++) {
          
    drawSpline(context, drawSegments[i], 0.5, false);
          }

        
  drawSegments = [drawSegments[drawSegments.length - 1]];
        
  segment = 0;

          requestAnimationFrame(loop);
      }());
    };
  

(...)

Sorry, I don’t know what you mean by events? You could fire events on the app object?

var app = pc.Application.getApplication();
app.fire('something', someData);