Add more example images

rosslh · Sep 21, 2024 · 9442d87 · 9442d87
1 parent bc692c4
commit 9442d87
Show file tree

Hide file tree

Showing 24 changed files with 31 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -22,25 +22,25 @@ Mandelbrot.site offers a variety of features to enhance your experience:
 
 - **Zoom in** by scrolling or selecting a region.
 - Adjust the **detail level** by modifying the iteration count or resolution.
-- Explore **multibrot sets** by changing the exponent parameter.
-- Download **high-resolution images** of your view.
+- Download **high-resolution images** of your current view.
+- Generate URLs to **share** your favorite views.
 - Customize your experience with different **color palettes**.
+- Explore **multibrot sets** by changing the exponent parameter.
 - View and update **viewport coordinates** on the complex plane.
-- Generate URLs to **share** your favorite views.
 
 ## Gallery
 
 Explore some stunning images generated with Mandelbrot.site:
 
-<img src="https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-4.png" height="200px" alt="Mandelbrot Example 1"> <img src="https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-2.png" height="200px" alt="Mandelbrot Example 2">
+<img src="https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-01.png" height="200px" alt="Mandelbrot Example 1"> <img src="https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-02.png" height="200px" alt="Mandelbrot Example 2">
 
-[Explore more images](/example-images)
+[View more images](/example-images)
 
 ## Architecture
 
 Mandelbrot.site is built using modern web technologies to deliver a high-performance, interactive tool for exploring fractals. The computational backend is implemented in [Rust](https://github.com/rust-lang/rust), chosen for its performance and safety features. This Rust code is compiled to [WebAssembly](https://webassembly.org/) (Wasm) using the [wasm-pack](https://github.com/rustwasm/wasm-pack) plugin, enabling high-speed computations directly in the browser. On the frontend, the user interface is crafted with [TypeScript](https://github.com/microsoft/TypeScript), enhancing code quality and maintainability. [Leaflet.js](https://github.com/Leaflet/Leaflet) is creatively adapted to render the Mandelbrot set tiles in a zoomable, map-like interface.
 
-For performance optimization, Mandelbrot.site employs [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) via the [threads.js](https://github.com/andywer/threads.js) library. This setup prevents intensive computations from blocking the main browser thread by creating a pool of workers that handle the generation of Mandelbrot set tiles in parallel. A key optimization technique used is "rectangle checking," which saves computation time for areas entirely within the set by checking only the perimeter of a tile.
+For performance optimization, it employs [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) via the [threads.js](https://github.com/andywer/threads.js) library. This setup prevents intensive computations from blocking the main browser thread by creating a pool of workers that handle the generation of Mandelbrot set tiles in parallel. A key optimization technique used is "rectangle checking," which saves computation time for areas entirely within the set by checking only the perimeter of a tile.
 
 This robust architecture ensures that Mandelbrot.site provides a seamless and responsive experience for users exploring the intricate details of the Mandelbrot set directly in their web browser.
 
@@ -66,7 +66,7 @@ To set up and run the project on your local environment, navigate to the `client
 
 - **Mandelbrot set implementation**: [`mandelbrot/src/lib.rs`](mandelbrot/src/lib.rs)
 - **Rust unit tests**: [`mandelbrot/src/lib_test.rs`](mandelbrot/src/lib_test.rs)
-- **TypeScript entry point**: [`client/js/main.ts`](client/js/main.ts)
+- **TypeScript entry point**: [`client/js/index.ts`](client/js/index.ts)
 
 ## Contributors
 

diff --git a/client/js/MandelbrotControls.ts b/client/js/MandelbrotControls.ts
@@ -3,7 +3,7 @@ import debounce from "lodash/debounce";
 import throttle from "lodash/throttle";
 import snakeCase from "lodash/snakeCase";
 import type MandelbrotMap from "./MandelbrotMap";
-import api from "./api";
+import * as api from "./api";
 import { NumberInput, SelectInput, CheckboxInput, SliderInput } from "./types";
 
 class MandelbrotControls {
@@ -219,8 +219,12 @@ class MandelbrotControls {
       if (saveImageDialog.open) {
         saveImageDialog.close();
       } else {
-        widthInput.value = String(window.screen.width * 2);
-        heightInput.value = String(window.screen.height * 2);
+        widthInput.value = String(
+          window.screen.width * 2 * (window.devicePixelRatio || 1),
+        );
+        heightInput.value = String(
+          window.screen.height * 2 * (window.devicePixelRatio || 1),
+        );
         saveImageDialog.showModal();
       }
     };

diff --git a/client/js/api.ts b/client/js/api.ts
@@ -1,21 +1,16 @@
 import { createClient } from "@supabase/supabase-js";
 
-const client =
+export const client =
   process.env.SUPABASE_PROJECT_ID && process.env.SUPABASE_ANON_KEY
     ? createClient(
         `https://${process.env.SUPABASE_PROJECT_ID}.supabase.co`,
         process.env.SUPABASE_ANON_KEY,
       )
     : null;
 
-let sessionId = `${Math.random()}|${Date.now()}`;
+export let sessionId = `${Math.random()}|${Date.now()}`;
 try {
   sessionId = self.crypto.randomUUID() || sessionId;
 } catch (e) {
   console.warn("crypto.randomUUID() not available");
 }
-
-export default {
-  client,
-  sessionId,
-};
diff --git a/client/js/main.ts → client/js/index.ts b/client/js/main.ts → client/js/index.ts
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -54,7 +54,7 @@ for (const file of fs.readdirSync(blogDir)) {
 }
 
 const appConfig = {
-  entry: "./js/main.ts",
+  entry: "./js/index.ts",
   plugins: [
     new Dotenv({
       systemvars: true,

diff --git a/example-images/README.md b/example-images/README.md
@@ -1,8 +1,16 @@
 # Gallery
 
-![Mandelbrot Set Image 1](https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-1.png)
-![Mandelbrot Set Image 2](https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-2.png)
-![Mandelbrot Set Image 3](https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-3.png)
-![Mandelbrot Set Image 4](https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-4.png)
-![Mandelbrot Set Image 5](https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-5.png)
-![Mandelbrot Set Image 6](https://raw.githubusercontent.com/rosslh/mandelbrot.site/main/example-images/mandelbrot-6.png)
+![Mandelbrot Set Image 1](./mandelbrot-01.png)
+![Mandelbrot Set Image 2](./mandelbrot-02.png)
+![Mandelbrot Set Image 3](./mandelbrot-03.png)
+![Mandelbrot Set Image 4](./mandelbrot-04.png)
+![Mandelbrot Set Image 5](./mandelbrot-05.png)
+![Mandelbrot Set Image 6](./mandelbrot-06.png)
+![Mandelbrot Set Image 7](./mandelbrot-07.png)
+![Mandelbrot Set Image 8](./mandelbrot-08.png)
+![Mandelbrot Set Image 9](./mandelbrot-09.png)
+![Mandelbrot Set Image 10](./mandelbrot-10.png)
+![Mandelbrot Set Image 11](./mandelbrot-11.png)
+![Mandelbrot Set Image 12](./mandelbrot-12.png)
+![Mandelbrot Set Image 13](./mandelbrot-13.png)
+![Mandelbrot Set Image 14](./mandelbrot-14.png)
diff --git a/example-images/mandelbrot-01.png b/example-images/mandelbrot-01.png
diff --git a/example-images/mandelbrot-02.png b/example-images/mandelbrot-02.png
diff --git a/example-images/mandelbrot-03.png b/example-images/mandelbrot-03.png
diff --git a/example-images/mandelbrot-04.png b/example-images/mandelbrot-04.png
diff --git a/example-images/mandelbrot-3.png → example-images/mandelbrot-05.png b/example-images/mandelbrot-3.png → example-images/mandelbrot-05.png
diff --git a/example-images/mandelbrot-06.png b/example-images/mandelbrot-06.png
diff --git a/example-images/mandelbrot-07.png b/example-images/mandelbrot-07.png
diff --git a/example-images/mandelbrot-08.png b/example-images/mandelbrot-08.png
diff --git a/example-images/mandelbrot-09.png b/example-images/mandelbrot-09.png
diff --git a/example-images/mandelbrot-1.png b/example-images/mandelbrot-1.png
diff --git a/example-images/mandelbrot-4.png → example-images/mandelbrot-10.png b/example-images/mandelbrot-4.png → example-images/mandelbrot-10.png
diff --git a/example-images/mandelbrot-11.png b/example-images/mandelbrot-11.png
diff --git a/example-images/mandelbrot-12.png b/example-images/mandelbrot-12.png
diff --git a/example-images/mandelbrot-13.png b/example-images/mandelbrot-13.png
diff --git a/example-images/mandelbrot-5.png → example-images/mandelbrot-14.png b/example-images/mandelbrot-5.png → example-images/mandelbrot-14.png
diff --git a/example-images/mandelbrot-2.png b/example-images/mandelbrot-2.png
diff --git a/example-images/mandelbrot-6.png b/example-images/mandelbrot-6.png
diff --git a/icon.png b/icon.png