Prob lighting

Readme.md

@@ -27,8 +27,9 @@ Other translation are very welcome, contact me if you'd like to submit one.
 
 ## Done
 
+- option: reuse past frame's light in new frame lighting computation when there are 150+ coins on screen, to limit the performance impact of rendering lots of lights 
 
-## 29084571
+## 29084606
 
 - simpler and more readable encoding for save files
 - removed check of payload signature on save file, seemed to fail because of the poor encoding of the name of the "côte d'ivoire" level

src/creative.ts

@@ -67,7 +67,7 @@ export async function openCreativeModePerksPicker() {
             value: u,
             className: creativeModePerks[u.id]
               ? "sandbox highlight"
-              : "sandbox grey-out-unless-hovered",
+              : "sandbox ",
             tooltip: u.help(creativeModePerks[u.id] || 1),
           })),
         t("lab.select_level"),

src/game.ts

@@ -692,6 +692,7 @@ async function openSettingsMenu() {
               "contrast",
               "smooth_lighting",
               "precise_lighting",
+              "probabilistic_lighting",
             ].includes(key)) ||
           false,
         value: () => {

src/i18n/ar.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "يقوم بقفل وإخفاء مؤشر الماوس.",
   "settings.precise_lighting": "",
   "settings.precise_lighting_help": "",
+  "settings.probabilistic_lighting": "",
+  "settings.probabilistic_lighting_help": "",
   "settings.record": "تسجيل مقاطع فيديو للعبة",
   "settings.record_download": "تنزيل الفيديو ({{size}} ميجابايت)",
   "settings.record_help": "احصل على فيديو لكل مستوى.",

src/i18n/b71.babel

@@ -6927,6 +6927,76 @@
 									</translation>
 								</translations>
 							</concept_node>
+							<concept_node>
+								<name>probabilistic_lighting</name>
+								<description/>
+								<comment/>
+								<translations>
+									<translation>
+										<language>ar-LB</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>de-DE</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>en-US</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>es-CL</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>fr-FR</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>ru-RU</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>tr-TR</language>
+										<approved>false</approved>
+									</translation>
+								</translations>
+							</concept_node>
+							<concept_node>
+								<name>probabilistic_lighting_help</name>
+								<description/>
+								<comment/>
+								<translations>
+									<translation>
+										<language>ar-LB</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>de-DE</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>en-US</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>es-CL</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>fr-FR</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>ru-RU</language>
+										<approved>false</approved>
+									</translation>
+									<translation>
+										<language>tr-TR</language>
+										<approved>false</approved>
+									</translation>
+								</translations>
+							</concept_node>
 							<concept_node>
 								<name>record</name>
 								<description/>

src/i18n/de.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "Sperrt und versteckt den Mauszeiger.",
   "settings.precise_lighting": "",
   "settings.precise_lighting_help": "",
+  "settings.probabilistic_lighting": "",
+  "settings.probabilistic_lighting_help": "",
   "settings.record": "Spielvideos aufnehmen",
   "settings.record_download": "Video herunterladen ({{size}} MB)",
   "settings.record_help": "Holen Sie sich ein Video von jedem Level.",

src/i18n/en.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "Locks and hides the mouse cursor.",
   "settings.precise_lighting": "Precise lighting",
   "settings.precise_lighting_help": "Use a smaller grid for background light effect",
+  "settings.probabilistic_lighting": "Persistence of vision",
+  "settings.probabilistic_lighting_help": "Improve performance when there are more than 150 coins by reusing some of the light of the previous frame",
   "settings.record": "Record gameplay videos",
   "settings.record_download": "Download video ({{size}} MB)",
   "settings.record_help": "Get a video of each level.",

src/i18n/es.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "Bloquea y oculta el cursor del mouse.",
   "settings.precise_lighting": "",
   "settings.precise_lighting_help": "",
+  "settings.probabilistic_lighting": "",
+  "settings.probabilistic_lighting_help": "",
   "settings.record": "Grabar vídeos de juego",
   "settings.record_download": "Descargar vídeo ({{size}} MB)",
   "settings.record_help": "Obtenga un vídeo de cada nivel.",

src/i18n/fr.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "Cache aussi le curseur de la souris.",
   "settings.precise_lighting": "",
   "settings.precise_lighting_help": "",
+  "settings.probabilistic_lighting": "",
+  "settings.probabilistic_lighting_help": "",
   "settings.record": "Enregistrer des vidéos de jeu",
   "settings.record_download": "Télécharger la vidéo ({{size}} MB)",
   "settings.record_help": "Obtenez une vidéo de chaque niveau.",

src/i18n/ru.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "Фиксирует и скрывает курсор мыши.",
   "settings.precise_lighting": "",
   "settings.precise_lighting_help": "",
+  "settings.probabilistic_lighting": "",
+  "settings.probabilistic_lighting_help": "",
   "settings.record": "Запись видеороликов игрового процесса",
   "settings.record_download": "Скачать видео ({{size}} МБ)",
   "settings.record_help": "Получите видеозапись каждого уровня.",

src/i18n/tr.json

@@ -194,6 +194,8 @@
   "settings.pointer_lock_help": "Fare imlecini kilitler ve gizler.",
   "settings.precise_lighting": "",
   "settings.precise_lighting_help": "",
+  "settings.probabilistic_lighting": "",
+  "settings.probabilistic_lighting_help": "",
   "settings.record": "Oyun videolarını kaydedin",
   "settings.record_download": "Videoyu indir ({{size}} MB)",
   "settings.record_help": "Her seviyenin videosunu edinin.",

src/options.ts

@@ -40,6 +40,11 @@ export const options = {
     name: t("settings.precise_lighting"),
     help: t("settings.precise_lighting_help"),
   },
+  probabilistic_lighting: {
+    default: false,
+    name: t("settings.probabilistic_lighting"),
+    help: t("settings.probabilistic_lighting_help"),
+  },
   contrast: {
     default: false,
     name: t("settings.contrast"),

src/render.ts

@@ -55,7 +55,9 @@ export function getHaloScale() {
   return 16 * (isOptionOn("precise_lighting") ? 1 : 2);
 }
 
+let framesCounter=0
 export function render(gameState: GameState) {
+  framesCounter++
   startWork("render:init");
   const level = currentLevelInfo(gameState);
 
@@ -109,11 +111,15 @@ export function render(gameState: GameState) {
     "";
   // Clear
   if (!isOptionOn("basic") && level.svg && level.color === "#000000") {
+    // TODO only if many coins on screen
+    const skipN = isOptionOn('probabilistic_lighting') && liveCount(gameState.coins)> 150? 3 : 0
+    const shouldSkip = index=> skipN ? (framesCounter + index) % (skipN+1) !==0  : false
+
     const haloScale = getHaloScale();
     startWork("render:halo:clear");
 
     haloCanvasCtx.globalCompositeOperation = "source-over";
-    haloCanvasCtx.globalAlpha = 0.99;
+    haloCanvasCtx.globalAlpha =  skipN ? 0.1:0.99
     haloCanvasCtx.fillStyle = level.color;
     haloCanvasCtx.fillRect(0, 0, width / haloScale, height / haloScale);
 
@@ -122,7 +128,8 @@ export function render(gameState: GameState) {
     haloCanvasCtx.globalAlpha =
       0.1 + (0.5 * 10) / (liveCount(gameState.coins) + 10);
     startWork("render:halo:coins");
-    forEachLiveOne(gameState.coins, (coin) => {
+    forEachLiveOne(gameState.coins, (coin,index) => {
+      if(shouldSkip(index)) return
       const color = getCoinRenderColor(gameState, coin);
       drawFuzzyBall(
         haloCanvasCtx,
@@ -134,7 +141,8 @@ export function render(gameState: GameState) {
     });
 
     startWork("render:halo:balls");
-    gameState.balls.forEach((ball) => {
+    gameState.balls.forEach((ball,index) => {
+      if(shouldSkip(index)) return
       haloCanvasCtx.globalAlpha = 0.3 * (1 - ballTransparency(ball, gameState));
       drawFuzzyBall(
         haloCanvasCtx,
@@ -149,6 +157,7 @@ export function render(gameState: GameState) {
     haloCanvasCtx.globalAlpha = 0.05;
     gameState.bricks.forEach((color, index) => {
       if (!color) return;
+      if(shouldSkip(index)) return
       const x = brickCenterX(gameState, index),
         y = brickCenterY(gameState, index);
       drawFuzzyBall(
@@ -163,7 +172,8 @@ export function render(gameState: GameState) {
 
     startWork("render:halo:particles");
     haloCanvasCtx.globalCompositeOperation = "screen";
-    forEachLiveOne(gameState.particles, (flash) => {
+    forEachLiveOne(gameState.particles, (flash,index) => {
+      if(shouldSkip(index)) return
       const { x, y, time, color, size, duration } = flash;
       const elapsed = gameState.levelTime - time;
       haloCanvasCtx.globalAlpha =
@@ -567,12 +577,19 @@ export function render(gameState: GameState) {
   ) {
     ctx.imageSmoothingEnabled = isOptionOn("smooth_lighting") || false;
 
-    haloCanvasCtx.fillStyle = "#FFFFFF";
+    if(isOptionOn('probabilistic_lighting')) {
-    haloCanvasCtx.globalAlpha = 0.25;
+        ctx.globalAlpha = 1;
-    haloCanvasCtx.globalCompositeOperation = "screen";
+     ctx.globalCompositeOperation = "soft-light";
-    haloCanvasCtx.fillRect(0, 0, haloCanvas.width, haloCanvas.height);
+    }else{
-    ctx.globalAlpha = 1;
+
+      haloCanvasCtx.fillStyle = "#FFFFFF";
+      haloCanvasCtx.globalAlpha = 0.25;
+      haloCanvasCtx.globalCompositeOperation = "screen";
+      haloCanvasCtx.fillRect(0, 0, haloCanvas.width, haloCanvas.height);
+      ctx.globalAlpha = 1;
     ctx.globalCompositeOperation = "overlay";
+    }
+
     ctx.drawImage(haloCanvas, 0, 0, width, height);
 
     ctx.imageSmoothingEnabled = false;
@@ -604,13 +621,6 @@ export function render(gameState: GameState) {
     );
   }
 
-  // if(isOptionOn('mobile-mode')) {
-  //   ctx.globalCompositeOperation = "source-over";
-  //   ctx.globalAlpha = 0.5;
-  //   ctx.fillStyle = 'black'
-  //   ctx.fillRect(0,gameState.gameZoneHeight, gameState.canvasWidth, gameState.canvasHeight-gameState.gameZoneHeight)
-  // }
-  // ctx.globalAlpha=1
   startWork("render:askForWakeLock");
   askForWakeLock(gameState);
 
@@ -958,6 +968,7 @@ export function drawFuzzyBall(
   x: number,
   y: number,
 ) {
+  width=Math.max(width,2)
   const key = "fuzzy-circle" + color + "_" + width;
   if (!color?.startsWith("#")) debugger;