update usage instructions

README.md

@@ -2,11 +2,21 @@
 
 [![build](https://github.com/lobis/fractal-explorer/actions/workflows/rust.yml/badge.svg)](https://github.com/lobis/fractal-explorer/actions/workflows/rust.yml)
 
-A simple Julia Set explorer built using Rust. This was created as a learning project and is based on [this great tutorial](https://sotrh.github.io/learn-wgpu/).
+A simple [Julia](https://en.wikipedia.org/wiki/Julia_set) and [Mandelbrot](https://en.wikipedia.org/wiki/Mandelbrot_set) Set explorer built using [Rust](https://www.rust-lang.org/). This was created as a learning project and is based on [this great tutorial](https://sotrh.github.io/learn-wgpu/).
 
-## [Live Demo](https://lobis.github.io/fractal-explorer/)
+The explorer can be run as a standalone desktop application (should work for Windows, Linux and MacOS) or as a web application for which a [demo is available](https://lobis.github.io/fractal-explorer/).
 
-## Build
+## [✨ Live Demo](https://lobis.github.io/fractal-explorer/)
+
+## 🤓 Usage
+
+* **Mouse Left Click**: Toggle Julia set *c* parameter selection.
+* **Mouse Cursor Position**: Select Julia set _c_ parameter.
+* **Mouse Wheel | Trackpad | Up & Down Arroy Keys**: Zoom on cursor position.
+* **Mouse Right Click**: Hold and drag to translate fractal.
+* **J | M Keys**: Toggle between Julia and Mandelbrot sets.
+
+## ⚙️ Build
 
 To build the executable run:
 
@@ -20,4 +30,4 @@ To build the web application run the following command. You may need to install
 wasm-pack build --target web --out-dir public/pkg
 ```
 
-All files related to the static site will be placed under `public` with `index.html` the entrypoint.
+All files related to the static site will be placed under `public` with `index.html` the entrypoint. You need to serve these files with a static http server such as [VSCode Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).

public/index.html

@@ -52,12 +52,12 @@
     <!-- help tooltip box based on https://github.com/Ngalstyan4/Mandelbrot-wasm-rust-rayon -->
     <div id="help">
       <span id="help-close-button" onclick="this.parentElement.style.display='none';">&times;</span>
-      <strong>Usage Instructions:</strong> <br /><br />
-      <strong>Left Click:</strong> Toggle Julia set <i>c</i> parameter selection. <br />
-      <strong>Cursor Movement:</strong> Select <i>c</i> parameter. <br />
-      <strong>Mouse Wheel / Trackpad / Up & Down Arrow Keys:</strong> Zoom on cursor position <br />
-      <strong>Right Click:</strong> Hold and drag to translate fractal <br />
-      <strong>J/M</strong> Toggle between Julia and Mandelbrot <br />
+      <strong>Usage Instructions</strong>: <br /><br />
+      <strong>Left Click</strong>: Toggle Julia set <i>c</i> parameter selection. <br />
+      <strong>Cursor Movement</strong>: Select <i>c</i> parameter. <br />
+      <strong>Mouse Wheel | Trackpad | Up & Down Arrow Keys:</strong>: Zoom on cursor position. <br />
+      <strong>Right Click</strong>: Hold and drag to translate fractal. <br />
+      <strong>J | M Keys</strong>: Toggle between Julia and Mandelbrot. <br />
 
     </div>
     <style>