javascript - 如何在 p5.js 中跟踪两种颜色?
问题描述
首先,这是我第一次在堆栈上发帖,所以我很抱歉我是一个菜鸟和糟糕的代码格式!
我的项目基于跟踪 3D 打印的刷新图标——一个橙色和一个蓝色。我希望两者都被跟踪(椭圆会显示)。我正在使用 p5.js(即使我将来想使用 openCV)。
我已经成功跟踪了橙色图标!据我了解,当我查看像素数组以识别颜色时,我还需要遍历目标数组(以便它可以容纳一种以上的颜色)。
//code that tracks the orange
var video;
var target;
// XY coordinate of closest color
var closestX = 0;
var closestY = 0;
var threshold = 25;
function setup() {
createCanvas(640, 480);
pixelDensity(1);
video = createCapture(VIDEO);
video.hide();
noStroke();
target = new TargetColor(color(255,127,80));
}
function draw() {
background(0);
image(video, 0, 0);
video.loadPixels();
var worldRecord = 500;
for (var x = 0; x < video.width; x += 1){
for (var y = 0; y < video.height; y += 1) {
var index = (x + (y * video.width)) * 4;
var redSource = video.pixels[index + 0];
var greenSource = video.pixels[index + 1];
var blueSource = video.pixels[index + 2];
var d = dist(redSource, greenSource, blueSource, target.red,
target.green, target.blue);
if (d < worldRecord) {
worldRecord = d;
closestX = x;
closestY = y;
}
}
}
if (worldRecord < 10) {
//draw ellipse
fill(target.rgb);
strokeWeight(4);
stroke(0);
ellipse(closestX, closestY, 16, 16);
}
}
//snippet of code that should allow multiple color tracking
//TWO - COLOR TRACKING
var video;
var target = [] // Empty array for targets so we can have more than 1
"object-colors"
var particles = [] //empty array of particles
// XY coordinate of closest color
var closestX = 0;
var closestY = 0;
var threshold = 25;
function setup() {
createCanvas(640, 480);
pixelDensity(1);
video = createCapture(VIDEO);
video.hide();
noStroke();
//pushing an object of type Target Color on the target array
target.push(TargetColor(color(255,127,80)));
}
function draw() {
background(0);
image(video, 0, 0);
video.loadPixels();
var worldRecord = 500;
//For loop - Access each individual pixel in video by iterating
through array
//for loop that allows us to loop over the contents of the array - targets
for (var i = 0; i < target.length; i++){
for (var x = 0; x < video.width; x += 1){
for (var y = 0; y < video.height; y += 1) {
var index = (x + (y * video.width)) * 4;
var redSource = video.pixels[index + 0];
var greenSource = video.pixels[index + 1];
var blueSource = video.pixels[index + 2];
var d = dist(redSource, greenSource, blueSource, target[i].red,
target[i].green, target[i].blue);
if (d < worldRecord) {
worldRecord = d;
closestX = x;
closestY = y;
}
}
}
}
if (worldRecord < 10) {
//draw ellipse
fill(target.rgb);
strokeWeight(4);
stroke(0);
ellipse(closestX, closestY, 16, 16);
}
}
function mousePressed() {
// Save color where the mouse is clicked in target variable
target = new TargetColor(video.get(mouseX, mouseY));
}
function TargetColor(_color){
this.rgb = _color;
this.red = red(_color);
this.green = green(_color);
this.blue = blue(_color);
}
我已将目标的 for 循环放在嵌套循环中的几个不同位置,但我仍然无法弄清楚。我得到的结果是黑屏显示“未捕获类型错误:无法读取未定义的属性“红色”。
但是,它不是已经定义了吗?我错过了什么?
我将非常感谢任何提示和前进的方法!
解决方案
推荐阅读
- python - 如何从 TextCtrl 派生 wxPython 自定义控件
- typescript - 深度合并两个嵌套对象的正确类型(默认配置和自定义)
- macos - 如何找到在 macOS 中无响应的应用程序的错误消息?
- c - 如何监视目录或文件是否在 C 中重命名?
- java - Java:通过Unix换行符分割行
- python - 尝试通过 Telegram API 发送消息时出现错误代码 400(错误请求)
- javascript - 将 React 应用程序中的请求发布到 localhost 上 Apache 服务器中的 PHP 文件时出现 CORS 错误
- c# - 如何重复生成具有相同名称的输出文件
- python - 如何在 x 异常或 403 后计数和停止脚本
- node.js - res.redirect 附加到当前 url 不打开该 url