From f29bca4e9c3a9cc705d9dbe5a65dc77c62a8e8a6 Mon Sep 17 00:00:00 2001
From: Benjamin Feng <benjamin.feng@glassdoor.com>
Date: Wed, 22 Apr 2020 13:48:09 -0500
Subject: [PATCH] Micro optimizations

---
 src/web/App.tsx         |  1 -
 src/web/Debug/index.tsx |  3 +--
 src/web/Display.tsx     | 46 ++++++++++++++++++++++-------------------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/web/App.tsx b/src/web/App.tsx
index b6c843c..5480629 100644
--- a/src/web/App.tsx
+++ b/src/web/App.tsx
@@ -98,7 +98,6 @@ export function App(props: { debug?: boolean }) {
             pixels={() => fd.screen()}
             signal={fd.changed}
             scale={2}
-            viewports={[]}
             blend
           />
           <h1 className={CSS.title}>
diff --git a/src/web/Debug/index.tsx b/src/web/Debug/index.tsx
index d322dc1..0f46857 100644
--- a/src/web/Debug/index.tsx
+++ b/src/web/Debug/index.tsx
@@ -72,7 +72,7 @@ export function Left() {
 function Displays(props: { fd: FundudeWasm }) {
   const { fd } = React.useContext(FD.Context);
 
-  const [_, setRerender] = React.useState();
+  const [_, setRerender] = React.useState(false);
   React.useEffect(() => {
     function forceRender() {
       setRerender(prev => !prev);
@@ -92,7 +92,6 @@ function Displays(props: { fd: FundudeWasm }) {
       {/* <Display
         className={CSS.displayPatterns}
         pixels={() => fd.patterns()}
-        viewports={[]}
         gridColor="lightgray"
       /> */}
       <Display
diff --git a/src/web/Display.tsx b/src/web/Display.tsx
index 32584fd..6c5a921 100644
--- a/src/web/Display.tsx
+++ b/src/web/Display.tsx
@@ -46,14 +46,12 @@ const CSS = {
 
 const PADDING = 1;
 
-const WHITE = Uint8Array.of(255, 255, 255, 255);
-
 export default function Display(props: {
   className?: string;
   pixels: () => Matrix<Uint16Array>;
   scale?: number;
   signal?: PicoSignal<any>;
-  viewports: [number, number][];
+  viewports?: [number, number][];
   gridColor?: string;
   blend?: boolean;
 }) {
@@ -65,15 +63,13 @@ export default function Display(props: {
 
   const imageData = React.useMemo(() => {
     const imageData = new ImageData(pixels.width, pixels.height);
-    for (let i = 0; i < pixels.length; i++) {
-      imageData.data.set(WHITE, 4 * i);
-    }
+    imageData.data.fill(255);
     return imageData;
   }, []);
 
   const drawRef = React.useRef<HTMLCanvasElement>(null);
 
-  const render = React.useCallback(() => {
+  const render = React.useCallback(function render() {
     if (!drawRef.current) return;
 
     const ctx = drawRef.current.getContext("2d")!;
@@ -82,23 +78,31 @@ export default function Display(props: {
     //   for (let i = 0; i < pixels.length; i++) {
     //     const shade = pixels[i];
     //     const prevAlpha = prev[i];
-    //     // const newAlpha = TRANSPARENCY_PALETTE[shade];
     //     const newAlpha = shade * 85;
     //     imageData.data[4 * i + 3] = (prevAlpha + newAlpha) >> 1;
     //     prev[i] = newAlpha;
     //   }
     // } else {
+    const i32s = new Int32Array(imageData.data.buffer);
     for (let i = 0; i < pixels.length; i++) {
-      const pixel = pixels[i];
-      // const newAlpha = TRANSPARENCY_PALETTE[shade];
-      const r = (pixel >> 0) & 0b11111;
-      const g = (pixel >> 5) & 0b11111;
-      const b = (pixel >> 10) & 0b11111;
-      const opaque = (pixel >> 15) & 0b1;
-
-      imageData.data[4 * i + 0] = (r << (8 - 5)) | 0b111;
-      imageData.data[4 * i + 1] = (g << (8 - 5)) | 0b111;
-      imageData.data[4 * i + 2] = (b << (8 - 5)) | 0b111;
+      /* Naive solution
+       * const pixel = pixels[i];
+       * const r = (pixel >> 0) & 0b11111;
+       * const g = (pixel >> 5) & 0b11111;
+       * const b = (pixel >> 10) & 0b11111;
+       * // const opaque = (pixel >> 15) & 0b1;
+
+       * imageData.data[4 * i + 0] = r << 3;
+       * imageData.data[4 * i + 1] = g << 3;
+       * imageData.data[4 * i + 2] = b << 3;
+       */
+
+      const raw = pixels[i];
+      var r0 = 31744 & raw;
+      var r1 = 255 & (raw << 3);
+      var r2 = 992 & raw;
+
+      i32s[i] = -16777216 | (r0 << 9) | r1 | (r2 << 6);
     }
     // }
     ctx.putImageData(imageData, PADDING, PADDING);
@@ -137,12 +141,12 @@ export default function Display(props: {
         height={height}
         style={{ width: width * scale }}
       />
-      {props.viewports.map((viewport) => (
+      {(props.viewports || []).map(([left, top]) => (
         <div
           className={CSS.viewport}
           style={{
-            left: viewport[0],
-            top: viewport[1],
+            left,
+            top,
             transform: `scale(${scale})`,
           }}
         />