Animation frames overwrite themselves. Why?

p5.js Coding Questions
1

I am using a video input to draw onto a canvas in order to get the color of the pixel in the very middle of the canvas.

With the recent code I have the pixel color and pass it as a color value to draw a line. This line should run from left to right drawing the different colors of the video onto the canvas and add up with every line. But the line seems to be overwritten with every frame. Only one line is displayed which is moving from left to right. Can someone help me understand why and how I can change this behavior?

Thank you very much in advance.

let movie;
let playButton;
let movieInput = "/public/IMG_1569.m4v";
var playing = false;

function setup() {
    let canvas = createCanvas(534, 300);

    pixelDensity(1);
    movie = createVideo(movieInput);
    movie.size(width, height);

    playButton = createButton("play").addClass("button");
    playButton.mouseClicked(playVideo);
}

function draw() {
    if (playing) {
        movie.loadPixels();
        var i = image(movie, 0, 0, width, height);
        let pixelColor = get(width / 2, height / 2);
        background(255);
        let px = frameCount % width;
        stroke(pixelColor);
        var fineLine = line(px, 0, px, height);
    }
}

function playVideo() {
    if (playing) {
        movie.pause();
        playButton.html("play");
    } else {
        movie.play();
        playButton.html("pause");
    }

    playing = !playing;
}
2

It is overwritten bc of you are calling backgorund() as you can see next:

var i = image(movie, 0, 0, width, height);
let pixelColor = get(width / 2, height / 2);
background(255);

Notice you are also calling image before background. So what you are doing is drawing the image, getting the color and then setting the sketch background color to white. Consider the following code:

//var i = image(movie, 0, 0, width, height);
let pixelColor = movie.get(movie.width / 2, movie.height / 2);
//background(255);

This is not the final solution but it shows something closer to what you want. Notice that using get() is slower than managing the pixels array directly in Processing java. I am going to guess it is also the same in p5.js. A prefer approach would be:
let pixelColor = movie.pixels[movie.width * movie.height / 2]);

Kf

3

cool. thank you very much. I solved it using copy() instead of get() and image()

4

If you’re going to post your question to multiple sites, please link between crossposts so we don’t repeat help you’ve already received.

This question has also been posted here: