将物体轨迹和像素数据结合在一起，却没有得到我所希望的

Question

我是一个非常新的程序员，大多数时候都很困惑，任何建议都会很好。我在做Dan Shiffman视频中的一个练习。我正试图用实时网络摄像头的像素数据画一条线或一笔。两个画布，一个小的实时网络摄像头和一个有很多椭圆的大画布，这些椭圆以像素阵列中的像素rgb为颜色这是我的最终产品的图片

我为粒子制作了一个单独的文件，然后使用构造函数和循环在draw((中显示和更新，而在粒子文件中，我试图通过使用对象过去位置的数组来使用直线而不是椭圆。然而，它不会起作用吗？画布只是呈现灰色。在particle.js文件中，当我使用line((函数和ellipse((函数时，我没有得到绘画般的笔触效果，不确定我的逻辑是否正确。这是代码->很抱歉有很多。第一个位是particle.js文件，第二个位是主草图文件。

function P(x, y) {
this.x = x;
this.y = y;
this.r = random(4, 32);
this.history = [];
this.update = function() {
this.x = constrain(this.x, 0, width);
this.y = constrain(this.y, 0, height);
this.x += random(-10,10);   
this.y += random(-10,10); // accelaration
this.history.push(createVector(this.x,this.y));
}

this.show = function() {
noStroke();
// fill(255);
let px = floor(this.x/vScale); // formula to convert from small orignal video to large canvas - ratio is 16
let py = floor(this.y/vScale);
let col = video.get(px,py); // get() gives you an array of r, g, b and a value from the corresponding pixel
// console.log(col);
fill(col[0], col[1], col[2], slider.value); // for r g b value in array
// ellipse(this.x,this.y, this.r);
// line(this.x, this.y, this.x,this.y)
for (let i = 0; i < this.history.length; i++) {
let pos = this.history[i]; // pos stores each array item as we are cycling through the loop
// ellipse(pos.x,pos.y,8,8);
// console.log(pos);
line(this.history[i].x, this.history[i].y, this.history[i + 1].x, this.history[i + 1].y);
}
}
}

let video;
let vScale = 16;
let p = [];
// const flock = [];
let slider;
function setup() {
createCanvas(640,480);
pixelDensity(1);
video = createCapture(VIDEO);
video.size(width/vScale,height/vScale);
for (let i = 0; i < 50; i ++) {
p[i] = new P(random(width),random(height));
}
background(51);
slider = createSlider(0,255,127);
}
function draw() {
// background(51);
video.loadPixels(); // to put all the pixels of capture in an array
for (let i = 0; i < p.length; i ++) {
p[i].update();
p[i].show();
}
}

正如我所希望的那样，在物体的运动中肯定会有一些额外的植绒颜色平均，但我只是想让基本的line((函数来工作

Answer 1

有两个简单的问题。

show中出现错误，因为索引i+1在this.history[i + 1].x中越界。运行从0到history.length-1的for循环，以解决问题：

for (let i = 0; i < this.history.length; i++)

for (let i = 0; i < this.history.length-1; i++)

无法填充一行(fill(。必须由stroke绘制一条线。例如：

noStroke();

stroke(255);

function P(x, y) {
this.x = x;
this.y = y;
this.r = random(4, 32);
this.history = [];
this.update = function() {
this.x = constrain(this.x, 0, width);
this.y = constrain(this.y, 0, height);
this.x += random(-10,10);   
this.y += random(-10,10); // accelaration
this.history.push(createVector(this.x,this.y));
}
this.show = function() {
//noStroke();
stroke(255);
// fill(255);
let px = floor(this.x/vScale); // formula to convert from small orignal video to large canvas - ratio is 16
let py = floor(this.y/vScale);
let col = video.get(px,py); // get() gives you an array of r, g, b and a value from the corresponding pixel
// console.log(col);
fill(col[0], col[1], col[2], slider.value); // for r g b value in array
// ellipse(this.x,this.y, this.r);
// line(this.x, this.y, this.x,this.y)
for (let i = 0; i < this.history.length-1; i++) {
let pos = this.history[i]; // pos stores each array item as we are cycling through the loop
// ellipse(pos.x,pos.y,8,8);
// console.log(pos);
line(this.history[i].x, this.history[i].y, this.history[i + 1].x, this.history[i + 1].y);
}
}
}
let video;
let vScale = 16;
let p = [];
// const flock = [];
let slider;
function setup() {
createCanvas(640,480);
pixelDensity(1);
video = createCapture(VIDEO);
video.size(width/vScale,height/vScale);
for (let i = 0; i < 50; i ++) {
p[i] = new P(random(width),random(height));
}
background(51);
slider = createSlider(0,255,127);
}
function draw() {
// background(51);
video.loadPixels(); // to put all the pixels of capture in an array
for (let i = 0; i < p.length; i ++) {
p[i].update();
p[i].show();
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>