Translate all pixels of a canvas?

p5.js Coding Questions
1

Hi!

I’m really new to P5.js and as I’m experimenting, I was wondering how to modify a pre existing file.
I was looking at Daniel Shiffman’s Slit Scan here:

The code is pretty simple and goes like this:

// Daniel Shiffman
// https://thecodingtrain.com
// https://youtu.be/WCJM9WIoudI
// https://youtu.be/YqVbuMPIRwY
let video;

let x = 0;

function setup() {
  createCanvas(800, 240);
  pixelDensity(1);
  video = createCapture(VIDEO);
  video.size(320, 240);
  background(51);
}

function draw() {
  video.loadPixels();
  let w = video.width;
  let h = video.height;
  copy(video, w/2, 0, 1, h, x, 0, 1, h);
  x = x + 1;
  if (x > width) {
    x = 0;
  }
}

I’m trying to figure out if there’s a way to reverse the effect so that instead of having one line of pixel moving across the canvas living it’s trace as it progresses, that line could stay at the very beginning of the canvas and stay updated by the video, but at each frame move all pixels to the right. Kind of as if the copied line was printing on a scrolling canvas. I’m not sure I’m being super clear but the gist is I’d like to know if there’s a way to have all of the pixels of a canvas slide 1px to the right every frame?

Thanks!

1 Like
2

You can “move” the whole area to the right by copying canvas and moving it one pixel right.
This command moves canvas to right by one pixel except one column of pixels, so there’s no overflow

copy(get(),0,0,width-1, height,1,0, width, height);

After that you just need to add scanned line from camera to the left side of canvas

EDIT:didn’t think it all the way and there were two wrong values.