Round at draw stage

gfx.js

@@ -25,11 +25,15 @@ export function clipCanvas(ctx, fn) {
 }
 
 export function plot(ctx, x, y, color) {
+  x = Math.round(x); y = Math.round(y);
   ctx.fillStyle = color;
   ctx.fillRect(x, y, 1, 1);
 }
 
 export function drawLine(ctx, x1, y1, x2, y2, color, plotFn=plot) {
+  x1 = Math.round(x1); y1 = Math.round(y1);
+  x2 = Math.round(x2); y2 = Math.round(y2);
+
   const steep = Math.abs(y2 - y1) > Math.abs(x2 - x1);
   if (steep) [x1, y1, x2, y2] = [y1, x1, y2, x2];
   if (x1 > x2) [x1, y1, x2, y2] = [x2, y2, x1, y1];
@@ -53,34 +57,35 @@ export function drawLineVirtual(x1, y1, x2, y2, color) {
 }
 
 export function drawRect(ctx, x, y, w, h, color) {
+  x = Math.round(x); y = Math.round(y);
+  w = Math.round(w); h = Math.round(h);
   ctx.fillStyle = color;
   ctx.fillRect(x, y, w, h);
 }
 
 export function strokeRect(ctx, x, y, w, h, color) {
   if (w === 1 || h === 1) return drawRect(x, y, w, h, color);
+  x = Math.round(x); y = Math.round(y);
+  w = Math.round(w); h = Math.round(h);
   ctx.lineWidth = 1;
   ctx.strokeStyle = color;
   ctx.strokeRect(x+0.5, y+0.5, w-1, h-1);
 }
 
 export function drawCircle(ctx, x, y, r, color) {
+  x = Math.round(x);
+  y = Math.round(y);
+  r = Math.round(r);
   for (let cy = -r; cy <= r; cy++) {
     const w = Math.round(Math.sqrt(r*r - cy*cy));
     drawRect(ctx, x-w, y+cy, w*2, 1, color);
   }
 }
 
-export function plotParable(ctx, x, y, a, v, g) {
-  for (let t=0; t<1000; t+=0.01) {
-    const [fx, fy] = parable(t, x, y, a, v, g);
-    plot(ctx, (fx), (fy), 'white');
-  }
-}
-
 /** @param align {CanvasTextAlign} */
 /** @param baseline {CanvasTextBaseline} */
 export function drawText(ctx, text, x, y, color, align='left', baseline='top') {
+  x = Math.round(x); y = Math.round(y);
   ctx.font = '5px text';
   ctx.textBaseline = baseline;
   ctx.textAlign = align;
@@ -91,8 +96,9 @@ export function drawText(ctx, text, x, y, color, align='left', baseline='top') {
 }
 
 export function drawParagraph(ctx, text, x, y, w, h, color) {
-  let tx = 0;
-  let ty = 0;
+  x = Math.round(x); y = Math.round(y);
+  w = Math.round(w); h = Math.round(h);
+  let tx = 0; let ty = 0;
   // FIXME: Handle unbreakable words longer than width
   const words = splitWords(text);
   for (let word of words) {

main.js

@@ -38,7 +38,7 @@ for (let c of [sky, terrain, traces, foreground]) {
 // Init players
 let i=0;
 for (let color of PLAYER_COLORS) {
-  const x = Math.round(50 + (W-100) / 5 * i);
+  const x = 50 + (W-100) / 5 * i;
   const y = landHeight(terrain, x) + 1;
   const a = x > W/2 ? 45 : 180-45;
   players.push({
@@ -152,8 +152,8 @@ function update() {
         PROJECTILE_MIN_SOUND_FREQUENCY
       );
       projectile.t += PROJECTILE_ITERATION_PROGRESS;
-      projectile.x = Math.ceil(x);
-      projectile.y = Math.floor(y);
+      projectile.x = x;
+      projectile.y = y;
       projectile.osc.frequency.setValueAtTime(f, audio.currentTime);
 
       if (projectile.y > H || isTerrain(terrain, projectile.x, projectile.y)) {
@@ -315,8 +315,8 @@ function updateParticles() {
     );
 
     particle.t++;
-    particle.x = Math.round(tx);
-    particle.y = Math.round(ty);
+    particle.x = tx;
+    particle.y = ty;
   }
 }
 
@@ -337,7 +337,7 @@ function drawPlayers() {
     const {x, y, a, c, dead} = player;
     if (dead) continue;
     const [px, py] = vec(x, y-3, a+180, 3);
-    drawLine(foreground, x, y-3, Math.round(px), Math.round(py), c);
+    drawLine(foreground, x, y-3, px, py, c);
     drawRect(foreground, x-4, y-2, 8, 2, c);
     drawRect(foreground, x-3, y-0, 6, 1, c);
   }

math.js

@@ -1,8 +1,13 @@
 export function index2coords(width, i) {
-  return [i % width, Math.floor(i/width)];
+  i = Math.round(i);
+  width = Math.round(width);
+  return [i % width, i / width];
 }
 
 export function coords2index(width, x, y) {
+  x = Math.round(x);
+  y = Math.round(y);
+  width = Math.round(width);
   return y * width + x;
 }
 

terrain.js

@@ -32,7 +32,7 @@ const TERRAIN_TYPES = {
       const ty = clamp(0, cy + dy, height);
       const wy = clamp(70, ty, height-70);
       cy = wy + (ty-wy) * 0.5;
-      drawRect(ctx, x, Math.round(cy), 1, Math.round(height-cy), ctx.color);
+      drawRect(ctx, x, cy, 1, height-cy, ctx.color);
     }
 
     cacheImageData(ctx);