Dynamic Camera, Heatmap and Box Blur

Dynamic Camera

Algorithm I wrote that always keeps the camera slightly ahead of the player (or ship). The distance between the center of the screen to the ship's location depends on the ships current speed. Especially challenging was smoothing the camera movement upon hitting an obstacle (or edge, in this case). I eventually ended up to use the same steering mechanisms I use in other sketches to achieve the smoothing effect.


This simple heatmap illustrates the amount of time the ship spends in different areas of the playing field. Each frame, the value of the grid sector the player is currently located at increases by 1.

Implementation was more tricky than anticipated. Deactivate blurring and turn off 'cut outliers' to see the main issue: When the ship idles for too long in one place, the heatmap value for this sector quickly becomes really high compared to other, less visited sectors. Since the heatmap does not show absolute values but instead compares the value of each map area to the overall highest value, the relative values (ratios) for little visited areas quickly become so small that they can hardly be displayed. To solve this problem, I added a simple lowpass filter which identifies outliers and normalizes very high values to a range between the median and the upper, outer outlier fence. (How to calculate outliers)

Box Blur

Box blur is a simple blurring algorithm for images (I use it on the heatmap). For each pixel, the average color of its neighbors is calculated and stored in a separate pixel array. The slider 'iterations' controls the number of times the algorithm is run each frame. 'Kernel size' refers to the side length of the pixel area that is used to calculate the new value for each individual pixel.

Careful! High iterations / kernel sizes might slow down your browser. Watch the framerate in the top right corner - it should ideally be around 60 fps.


  • W, A, S & D - move ship
  • SPACE - shoot
  • R - reset heatmap
  • C - toggle outlier cut
  • B - toggle blurring
  • T - project heatmap or color gradient onto terrain
  • 1 - show/hide camera shift frame
  • 2 - show/hide velocity vector