Ship Flying Through Space

v4 Lock minimap to particular object v3 Scaling of the minimap and cropping of unnecessary data v2 Minimap using the same data as the larger map. v1 Ship follows mouse around canvas. Boundary of universe is slightly smaller than canvas so we can see that the ship is prevented from leaving the universe.

by djwelsh

HTML

<canvas id="c" width="400" height="400"></canvas>
<canvas id="_c" width="120" height="80"></canvas>
<div id="debug"></div>

CSS

#_c {
    display: block;
    outline: 1px dashed #ccc;
    
}
#c {
    outline: 1px solid #ccc;
    width: 400px;
    height: 400px;
    margin: 10px;
}
#debug {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 120px;
}

JavaScript

/*
MiniMap works by imagining that there is a hole in the main canvas. The other canvas is of the same size, and all we do is cut away everything we don't need. This is BAD. MiniMap canvas should be the same size as the minimap viewport itself. We don't want to draw things that we don't need to. The actual size of the minimap should not change, but if we need to use it for something else, we can dynamically change its size when we need to using JS. Perhaps for the in-game map; for panning and zooming we will probably use the same technique, so it will be useful.

In order to make this work, we need to know where the ship is in universe coordinates. We also need to know how much of the space around the ship we need to show for the minimap to work. This should be the exact amount plus the size of the largest object in the map (since circles are drawn from the center, they will suddenly appear as soon as their center crosses into the minimap, rather than appearing as a disc sliding into view). Knowing how much space around the ship is tricky. We need to know the current scale of the minimap. If on the main map, 1 unit = 1 pixel, then on a minimap of 1/5 size, 5 units = 1 pixel. Say the minimap is 100 x 100 square. So the area to show would be from shipXY - 50 * 5 to shipXY + 50 * 5.

On every runthrough, flag the items that need to be on the minimap - maybe put their ids in an array, then after run through them to draw the minimap. This will be easier for code separation. But it might not be good to loop twice every frame.

offsets = info about the currently-visible full map in the viewport. A smaller version of this should be shown in the minimap, which is why we need it.
panning = how far away from the origin the current view is.
panning is used to scroll the MAIN map.
offsets are used for the MINI map to determine which part to crop. 
*/

var canvas, ctx, _canvas, _ctx, colorOffset;
var c_width, c_height;
var ship = null;
var dummies = [];

//The amount by which...