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
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
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
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];
Hi, thanks for this but I don’t really know how to incorporate it. I’m just getting the error ‘imageData is not defined’.
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.
@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);