Make physics more fun

frontend/src/scripts/commands/generators/keyboard-listener.ts

@@ -34,7 +34,7 @@ export class KeyboardListener extends CommandGenerator {
     if (vec2.squaredLength(movement) > 0) {
       vec2.normalize(movement, movement);
     }
-    this.sendCommandToSubcribers(new MoveActionCommand(movement));
+    this.sendCommandToSubcribers(new MoveActionCommand(movement, true));
   }
 
   private normalize(key: string): string {

frontend/src/scripts/commands/generators/touch-listener.ts

@@ -38,7 +38,7 @@ export class TouchListener extends CommandGenerator {
 
       if (vec2.squaredLength(movement) > 0) {
         vec2.normalize(movement, movement);
-        this.sendCommandToSubcribers(new MoveActionCommand(movement));
+        this.sendCommandToSubcribers(new MoveActionCommand(movement, false));
       }
 
       this.previousPosition = position;
@@ -46,7 +46,7 @@ export class TouchListener extends CommandGenerator {
 
     target.addEventListener('touchend', (event: TouchEvent) => {
       event.preventDefault();
-      this.sendCommandToSubcribers(new MoveActionCommand(vec2.create()));
+      this.sendCommandToSubcribers(new MoveActionCommand(vec2.create(), false));
     });
   }
 

frontend/src/scripts/game.ts

@@ -1,6 +1,5 @@
 import { vec2 } from 'gl-matrix';
 import {
-  Circle,
   CircleLight,
   compile,
   FilteringOptions,
@@ -28,6 +27,7 @@ import { Configuration } from './config/configuration';
 import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { GameObjectContainer } from './objects/game-object-container';
 import { BlobShape } from './shapes/blob-shape';
+import { Circle } from './shapes/circle';
 import { Polygon } from './shapes/polygon';
 
 export class Game {
@@ -74,14 +74,14 @@ export class Game {
   }
 
   private async setupRenderer(): Promise<void> {
-    const noiseTexture = await renderNoise([256, 256], 2, 1 / 10);
+    const noiseTexture = await renderNoise([256, 256], 2, 1);
 
     this.renderer = await compile(
       this.canvas,
       [
         {
           ...Polygon.descriptor,
-          shaderCombinationSteps: [0, 2, 6, 16, 32],
+          shaderCombinationSteps: [0, 2, 6, 16],
         },
         {
           ...BlobShape.descriptor,
@@ -89,7 +89,7 @@ export class Game {
         },
         {
           ...Circle.descriptor,
-          shaderCombinationSteps: [0, 2, 16, 32],
+          shaderCombinationSteps: [0, 2, 16],
         },
         {
           ...CircleLight.descriptor,
@@ -115,7 +115,7 @@ export class Game {
         rgb(1, 1, 1),
         ...settings.playerColors,
       ],
-      enableHighDpiRendering: false,
+      enableHighDpiRendering: true,
       lightCutoffDistance: settings.lightCutoffDistance,
       textures: {
         noiseTexture: {

frontend/src/scripts/objects/camera.ts

@@ -27,7 +27,7 @@ export class Camera extends GameObject implements ViewObject {
     renderer.setViewArea(viewArea.topLeft, viewArea.size);
 
     renderer.setRuntimeSettings({
-      backgroundColor: mixRgb(
+      ambientLight: mixRgb(
         settings.backgroundGradient[0],
         settings.backgroundGradient[1],
         (this.center.x - settings.worldLeftEdge) /

frontend/src/scripts/objects/planet-view.ts

@@ -1,11 +1,11 @@
 import { vec2 } from 'gl-matrix';
 import { Drawable, Renderer } from 'sdf-2d';
-import { CommandExecutors, Id, Random, StoneBase } from 'shared';
+import { CommandExecutors, Id, Random, PlanetBase } from 'shared';
 import { RenderCommand } from '../commands/types/render';
 import { Polygon } from '../shapes/polygon';
 import { ViewObject } from './view-object';
 
-export class StoneView extends StoneBase implements ViewObject {
+export class PlanetView extends PlanetBase implements ViewObject {
   private shape: Drawable;
 
   protected commandExecutors: CommandExecutors = {
@@ -14,11 +14,12 @@ export class StoneView extends StoneBase implements ViewObject {
 
   constructor(id: Id, vertices: Array<vec2>) {
     super(id, vertices);
-    this.shape = new Polygon(vertices, Random.getRandom());
+    this.shape = new Polygon(vertices);
+    (this.shape as any).randomOffset = Random.getRandom();
   }
 
   public step(deltaTimeInMilliseconds: number): void {
-    this.shape.randomOffset += deltaTimeInMilliseconds / 5000;
+    (this.shape as any).randomOffset += deltaTimeInMilliseconds / 4000;
   }
 
   public draw(renderer: Renderer): void {

frontend/src/scripts/objects/projectile-view.ts

@@ -1,10 +1,11 @@
 import { vec2 } from 'gl-matrix';
-import { Circle, CircleLight, Renderer } from 'sdf-2d';
+import { CircleLight, Renderer } from 'sdf-2d';
 import { Id, ProjectileBase, rgb } from 'shared';
 import { ViewObject } from './view-object';
+import { Circle } from '../shapes/circle';
 
 export class ProjectileView extends ProjectileBase implements ViewObject {
-  private circle: Circle;
+  private circle: InstanceType<typeof Circle>;
   private light: CircleLight;
 
   constructor(id: Id, center: vec2, radius: number) {

frontend/src/scripts/shapes/blob-shape.ts

@@ -11,7 +11,7 @@ export class BlobShape extends Drawable {
       uniform vec2 rightFootCenters[BLOB_COUNT];
       uniform float headRadii[BLOB_COUNT];
       uniform float footRadii[BLOB_COUNT];
-      uniform float blobColors[BLOB_COUNT];
+      uniform int blobColors[BLOB_COUNT];
 
       float blobSmoothMin(float a, float b)
       {
@@ -24,7 +24,7 @@ export class BlobShape extends Drawable {
         return distance(target, circleCenter) - radius;
       }
 
-      float blobMinDistance(vec2 target, out float colorIndex) {
+      float blobMinDistance(vec2 target, out vec4 color) {
         float minDistance = 1000.0;
 
         for (int i = 0; i < BLOB_COUNT; i++) {
@@ -40,30 +40,24 @@ export class BlobShape extends Drawable {
           vec2 leftEyeOffset = vec2(-headRadii[i] * 0.35, headRadii[i] * 0.2);
           vec2 rightEyeOffset = vec2(headRadii[i] * 0.35, headRadii[i] * 0.2);
 
-          res = max(
-            res,
-            -circleDistance(headCenters[i] + leftEyeOffset, headRadii[i] * 0.25, target)
+          float eyeDistance = min(
+            circleDistance(headCenters[i] + rightEyeOffset, headRadii[i] * 0.25, target),
+            circleDistance(headCenters[i] + leftEyeOffset, headRadii[i] * 0.25, target)
           );
 
-          res = max(
-            res,
-            -circleDistance(headCenters[i] + rightEyeOffset, headRadii[i] * 0.25, target)
-          );
-
-          res = min(
-            res,
-            circleDistance(headCenters[i] + leftEyeOffset + vec2(0, -headRadii[i] * 0.175), headRadii[i] * 0.25, target)
+          eyeDistance = max(
+            eyeDistance,
+            -circleDistance(headCenters[i] + leftEyeOffset + vec2(0, -headRadii[i] * 0.175), headRadii[i] * 0.2, target)
           );
           
-          res = min(
-            res,
-            circleDistance(headCenters[i] + rightEyeOffset + vec2(0, -headRadii[i] * 0.175), headRadii[i] * 0.25, target)
+          eyeDistance = max(
+            eyeDistance,
+            -circleDistance(headCenters[i] + rightEyeOffset + vec2(0, -headRadii[i] * 0.175), headRadii[i] * 0.2, target)
           );
 
-          minDistance = min(minDistance, res);
-
-          if (res < 0.0) {
-            colorIndex = blobColors[i];
+          if (res < minDistance) {
+            minDistance = res;
+            color = eyeDistance < 0.0 ? vec4(1.0) : readFromPalette(blobColors[i]);
           }
         }
 

frontend/src/scripts/shapes/circle.ts

@@ -0,0 +1,3 @@
+import { CircleFactory } from 'sdf-2d';
+
+export const Circle = CircleFactory(2);