# Surround video with opaque circle efficiently

**URL:** <https://discourse.processing.org/t/surround-video-with-opaque-circle-efficiently/22884>\
**Category:** Coding Questions\
**Created:** [July 28, 2020, 7:12pm UTC](https://discourse.processing.org/t/surround-video-with-opaque-circle-efficiently/22884 "2020-07-28T19:12:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![alphydan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alphydan/32/536_2.png) [@alphydan](https://discourse.processing.org/u/alphydan)\
**Post date:** [July 28, 2020, 7:12pm UTC](https://discourse.processing.org/t/surround-video-with-opaque-circle-efficiently/22884/1 "2020-07-28T19:12:52Z")

</div>

I am trying to have the person in a **video** appear in the middle of a circle.  
Like so:

 ![person_circle](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cfb287490121fee89f24e7a3affe789538c24d07.png)

Here’s my naive approach.  
Find the height of the person and the middle of the person with posenet:

```auto
hPerson = dist(pose.nose.x, pose.nose.y, pose.rightAnkle.x, pose.rightAnkle.y)
middlePerson = {x:(pose.rightHip.x+pose.leftHip.x)/2, y:(pose.rightHip.y+pose.leftHip.y)/2}

```

Loop over all pixels. If it’s far enough, make it black.

```auto
loadPixels();
  for (var x=0; x < width; x+=2){
    for (var y=0; y < height; y+=2){
    pix_to_middle = dist(middlePerson.x,middlePerson.y,x,y)
     if (pix_to_middle > 0.8*hPerson){
		    pixel_colour = 0;
		    pixel_location = (x + y*width)*4;
		    pixels[pixel_location + 0] = pixel_colour;
		    pixels[pixel_location + 1] = pixel_colour;
		    pixels[pixel_location + 2] = pixel_colour;
		    pixels[pixel_location + 3] = 255;
		}
	    }
	}
	updatePixels();

```

This works, but it seems really inefficient. Is there a better way to achieve this?

---

<div class="post-metadata">

**Author:** ![capbap](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/capbap/32/10112_2.png) [@capbap](https://discourse.processing.org/u/capbap)\
**Post date:** [July 28, 2020, 11:39pm UTC](https://discourse.processing.org/t/surround-video-with-opaque-circle-efficiently/22884/2 "2020-07-28T23:39:04Z")

</div>

If you need better performance you could loop through each line and calculate where that line intersects the circle. Something like this.

```auto
loadPixels();
var hPersonSquared=0.64*hPerson*hPerson; //0.8*hPerson squared
for (var x=0; x < width; x+=2){
    var xDistanceSquared=(middlePerson.x-x)*(middlePerson.x-x); 
    var yIntersect=sqrt(hPersonSquared-xDistanceSquared); //use pythagoras to calculate y intersect
    for (var y=0; y < yIntersect; y+=2){
	    pixel_colour = 0;
	    pixel_location = (x + y*width)*4;
	    pixels[pixel_location + 0] = pixel_colour;
	    pixels[pixel_location + 1] = pixel_colour;
	    pixels[pixel_location + 2] = pixel_colour;
	    pixels[pixel_location + 3] = 255;
            pixel_location = (x + (height-y)*width)*4; //repeat from the other side because circles are symmetric
	    pixels[pixel_location + 0] = pixel_colour;
	    pixels[pixel_location + 1] = pixel_colour;
	    pixels[pixel_location + 2] = pixel_colour;
	    pixels[pixel_location + 3] = 255;
    }
}
updatePixels();

```

If you’re doing this for every frame of a video you might also consider making an array of which pixels you want to black out. Though I’m not sure if that will save much processing time.