同时使用对象轨迹和像素数据，没有得到我希望的结果？

Question

我是一个非常新的编码员，老实说大部分时间都很困惑，任何建议都会很好。我正在做 Dan Shiffman vids 的练习。我正在尝试使用来自实时网络摄像头的像素数据绘制线条或笔画。 Two canvas, one live webcam tiny and a large canvas that has a lot of ellipse that are colored in pixel rgb from pixel array 这是我的最终产品的图片

我为粒子制作了一个单独的文件，然后使用构造函数和循环在draw()中显示和更新，而在粒子文件中我试图通过使用数组来使用直线而不是椭圆对象过去的位置。然而，它不会起作用吗？ canvas 只是显示为灰色。在 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();
    }
}

Img of what I hoped it would look like, there is definitely some additional flocking color averaging in the movement of the object however I'm just trying to get the basic line() function to work

Answer 1

有两个简单的问题。

您在 show 中遇到错误，因为索引 i+1 在 this.history[i + 1].x 中超出范围。运行for从0循环到history.length-1，解决问题：

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

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

一行无法填写(fill). A line has to be drawn by 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>

同时使用对象轨迹和像素数据，没有得到我希望的结果？

Using object trails and pixel data together , not getting what I hoped for?

javascript

class

pixel

webcam.js

p5.js