# Using pixels array to fill shape

**URL:** <https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526>\
**Category:** Coding Questions\
**Created:** [August 27, 2020, 4:57pm UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526 "2020-08-27T16:57:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![andypurbrick](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Post date:** [August 27, 2020, 4:57pm UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526/1 "2020-08-27T16:57:23Z")

</div>

Hi, I’m pretty new to p5 and have never used the pixels array before. I’ve read the documentation and watched some videos on the pixels array but I can’t work out how to achieve the specific effect I’m looking for.

I want to use pixels from vid1, which is hidden, to fill an ellipse that’s rendered when I move my mouse over the canvas so that it paints the same area of vid1 on to the canvas replacing vid2. The effect is sort of like a scratch card that reveals vid1 as you move the mouse over the canvas.

Is this possible? The code I have so far is below and I’ve created a sketch in editor:  
[https://editor.p5js.org/andy-pewter/sketches/SJwiNV7oy](https://editor.p5js.org/andy-pewter/sketches/SJwiNV7oy)

Thanks!

Andy

```auto
let vid1;
let vid2;
let cnv;
let positions = [];
let button;

function setup() {
  cnv = createCanvas(600, 400);

  vid1 = createVideo("cut1.mp4");
  vid2 = createVideo("cut2.mp4");

  button = createButton("play");
  button.mousePressed(togglePlaying);
  vid1.hide();
  vid2.hide();

}

function togglePlaying() {
  vid1.loop();
  vid1.volume(0);
  vid2.loop();
  vid2.volume(0);
}

function draw() {
  vid1.loadPixels();
  image(vid2, 0, 0);

  positions.push({ x: mouseX, y: mouseY });
  noStroke();
  fill(0); // need to fill using pixels from vid1

  for (let i = 0; i < positions.length; i++) {
    let x = positions[i].x;
    let y = positions[i].y;
    ellipse(x, y, 80, 80);
  }
}

```

---

<div class="post-metadata">

**Author:** ![AuXie2k9](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/auxie2k9/32/9907_2.png) [@AuXie2k9](https://discourse.processing.org/u/AuXie2k9)\
**Post date:** [August 29, 2020, 6:48am UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526/2 "2020-08-29T06:48:40Z")

</div>

I believe a much more intuitive and easy way would be to use a mask.  
Create a pgraphics where you will draw your ellipses (with or without arrays).  
Use this as a mask for vid1.  
Here’s another thread on how to use a mask with video.

> [@Video within a shape (or alpha mask)](https://discourse.processing.org/t/video-within-a-shape-or-alpha-mask/663):
>
> Hello everyone!, I´m rather new into processing, but I have experience coding. I want to put the video streaming withing a an irregular shape (it doesn´t have to be a rectangle). My approach, I did a b&w mask image with the same proportions of the windows. The white part of the mask is where I want to put the video pixels. So these are the steps. I get pixels from the video streaming I scan the mask by row and columns, and if this locations corresponds to a white pixel, I put the pixel o…

---

<div class="post-metadata">

**Author:** ![AuXie2k9](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/auxie2k9/32/9907_2.png) [@AuXie2k9](https://discourse.processing.org/u/AuXie2k9)\
**Post date:** [August 29, 2020, 6:54am UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526/3 "2020-08-29T06:54:03Z")

</div>

And more threads below.  
[https://forum.processing.org/one/topic/how-to-creat-a-mask-on-video.html](https://forum.processing.org/one/topic/how-to-creat-a-mask-on-video.html)  
[https://processing.org/discourse/beta/num\_1159143409.html](https://processing.org/discourse/beta/num_1159143409.html)

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/2661/use-a-video-as-mask)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

**Author:** ![andypurbrick](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Post date:** [September 1, 2020, 11:56am UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526/4 "2020-09-01T11:56:55Z")

</div>

Thanks @AuXie2k9, my original approach with the pixels array was creating performance issues so this is really useful, I’ll read up on using a mask 👍🏻

---

<div class="post-metadata">

**Author:** ![andypurbrick](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Post date:** [September 1, 2020, 2:52pm UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526/5 "2020-09-01T14:52:47Z")

</div>

Hi @AuXie2k9, thanks again for your advice, I’ve read up on using a mask and I’ve managed to get it working with an image as a mask on top of video, however, I can’t get it to work with video as a mask on top of video. In p5.js it throws a type error:

`Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'`

I think this might be because it’s expecting an image as opposed to a video.

Do you know if there’s support for video as a mask in p5? I can’t seem to find any official documentation on this. My updated code is as follows:

```auto
let video;
let video2;
let maskedVideo;
let maskImage;
let mask;

function preload() {
  video = createVideo(["cut1.mp4"]);
  video.hide();
  video.size(600, 600);

  video2 = createVideo(["cut2.mp4"]);
  video2.hide();
  video2.size(600, 600);

  maskImage = loadImage("mask.png");
}

function setup() {
  createCanvas(600, 600);

  mask = createGraphics(width, height);
  mask.imageMode(CENTER);

  maskedVideo = video2.get();
  maskedVideo.mask(mask.get());

  button = createButton("play");
  button.mousePressed(togglePlaying);
}

function togglePlaying() {
  video.loop();
  video.volume(0);

  video2.loop();
  video2.volume(0);
}

function draw() {
  image(video, 0, 0, 600, 600);
  image(maskedVideo, 0, 0, 600, 600);

  if (mouseIsPressed) {
    mask.image(maskImage, mouseX, mouseY, 100, 100);
    maskedVideo = video2.get();
    maskedVideo.mask(mask.get());
  }
}

```

Thanks!

---

<div class="post-metadata">

**Author:** ![andypurbrick](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Post date:** [September 1, 2020, 3:33pm UTC](https://discourse.processing.org/t/using-pixels-array-to-fill-shape/23526/6 "2020-09-01T15:33:49Z")

</div>

Hi @AuXie2k9, I solved it, I needed to use loadPixels() !