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;
}

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/public/style.css">
    <title>p5.js example</title>

  </head>
  <body>
<h1>p5 no.1</h1>

      <script src="/lib/p5.js"></script>
      <script src="/lib/p5.dom.js"></script>

      <script src="/sketch.js"></script>

  </body>
</html>
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
arnoldovna
  • 21
  • 2

1 Answers1

0

The call to background() clears out old frames.

If you want old frames to stay on the screen, remove the call to background() in your draw() function.

More info can be found in the reference. I'd also recommend reading through your code and making sure you understand every line. It might help to read it out loud, or to write down an English description of every line. That will help you find issues like this in the future.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107