Say I have a 2D surface defined with the use of bitmap.

I want to use this bitmap for collision detection (white color is where object can move freely, with black I mark the walls).

How can I numerically calculate the surface normal vector at given point?

For example, in the attached picture, how can I calculate the surface normal vector for the red point?

Example path

  • \$\begingroup\$ It looks like this image also has some intermediate grey values where the edge has been antialiased. Is that true of your source image, or is it a compression artifact applied to the upload? \$\endgroup\$
    – DMGregory
    Mar 13, 2019 at 21:12
  • \$\begingroup\$ @DMGregory In example it does, but I would like it to work (at least more or less OK) for aliased images as well. \$\endgroup\$
    – zduny
    Mar 13, 2019 at 21:20

1 Answer 1


You should use the Sobel opererator, which is a type of convolution filter.

A 3x3 pixel convolution would work fine, but you need to do it twice: once for horizontal edges, then once for vertical edges.

Your normal will be (x,y) where x is the output from the horizontal edge detect, and y is the output from the vertical edge detect.

You need to normalize the result though, and use 'undefined' values where both convolution filters return zero.

If you want to have more gradual normals, then a 5x5 filter will generate a more diverse set of angles for the normals.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .