Surround video with opaque circle efficiently

p5.js Coding Questions
1

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

person_circle
person_circle851×905 10.2 KB

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

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.

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?

2

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

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.

1 Like