Working with a good zoom and all

.gitignore

@@ -1,2 +1,75 @@
 /target
 /www/node_modules
+
+
+# Based on gatsby-starter-default's .gitignore
+# https://github.com/gatsbyjs/gatsby-starter-default/blob/master/.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+dist
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+
+# Yarn Integrity file
+.yarn-integrity

README.md

@@ -7,3 +7,9 @@ Mandelbrot fractal visualization made in Rust.
 ```
 just dev
 ```
+
+```
+cd www
+yarn
+yarn start
+```

src/lib.rs

@@ -2,6 +2,7 @@ mod utils;
 use std::f64::consts::PI;
 
 use wasm_bindgen::prelude::*;
+use std::convert::TryInto;
 
 // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
 // allocator.
@@ -16,88 +17,84 @@ extern "C" {
 
 const RADIUS_OF_NO_RETURN: f64 = 2.0;
 
+
 #[wasm_bindgen]
-pub struct Universe {
-    width: u32,
-    height: u32,
-    palette: [(u8, u8, u8); 255],
-    cells: Vec<u8>,
+pub struct Mandelbrot {
+    pixels: Vec<u8>,
+    res_x: u32,
+    res_y: u32,
+    palette: Palette
 }
 
 #[wasm_bindgen]
-impl Universe {
-    pub fn new(width: u32, height: u32) -> Universe {
-        let cells = (0..width * height * 4).map(|_| 0).collect();
-
-        let mut palette: [(u8, u8, u8); 255] = [(0, 0, 0); 255];
-
-        let redb = 2.0 * PI / (30.0 + 128.0);
-        let redc = 256.0 * 0.88;
-        let greenb = 2.0 * PI / (80.0 + 128.0);
-        let greenc = 256.0 * 0.22;
-        let blueb = 2.0 * PI / (10.0 + 128.0);
-        let bluec = 256.0 * 0.44;
-        for i in 0..255 {
-            let r = (255.0 * (0.5 * (redb + i as f64 + redc).sin() + 0.5)) as u8;
-            let g = (255.0 * (0.5 * (greenb + i as f64 + greenc).sin() + 0.5)) as u8;
-            let b = (255.0 * (0.5 * (blueb + i as f64 + bluec).sin() + 0.5)) as u8;
-            palette[i] = (r, g, b)
-        }
-
-        Universe {
-            width,
-            height,
+impl Mandelbrot {
+    pub fn new(res_x: u32, res_y: u32, palette: Palette) -> Mandelbrot {
+        Mandelbrot {
+            res_x,
+            res_y,
             palette,
-            cells,
+            pixels: Vec::with_capacity((res_x * res_y * 4).try_into().unwrap())
         }
     }
 
-    pub fn cells(&self) -> *const u8 {
-        self.cells.as_ptr()
-    }
-
-    pub fn render(&mut self, vpw: f64, vph: f64, x: f64, y: f64, iterations: i32) {
-        let mut next: Vec<u8> = Vec::new();
-        let ratio_x = vpw / self.width as f64;
-        let ratio_y = vph / self.height as f64;
-        println!("{}", ratio_x);
+    pub fn render(&mut self, x: f64, y: f64, focus_x: f64, focus_y: f64, iterations: i32) {
+        self.pixels.clear();
+        let ratio_x = focus_x / self.res_x as f64;
+        let ratio_y = focus_y / self.res_y as f64;
         let depth_ratio = 255.0 / iterations as f64;
-
-        for col in 0..self.height {
-            for row in 0..self.width {
-                // let idx = self.get_index(row, col);
+        for col in 0..self.res_y {
+            for row in 0..self.res_x {
                 let depth = (mandelbrot(
-                    row as f64 * ratio_x + x,
-                    col as f64 * ratio_y + y,
+                    row as f64 * ratio_x + x - focus_x / 2.0,
+                    col as f64 * ratio_y + y - focus_y / 2.0,
                     iterations,
                     RADIUS_OF_NO_RETURN,
                 ) as f64
                     * depth_ratio) as usize;
 
                 let color = if depth < 255 {
-                    self.palette[depth as usize]
+                    self.palette.colors[depth as usize]
                 } else {
                     (0, 0, 0)
                 };
 
-                // let color = HSL {
-                //     h: depth,
-                //     s: 0.7_f64,
-                //     l: 0.5_f64,
-                // }
-                // .to_rgb();
-                next.push(color.0);
-                next.push(color.1);
-                next.push(color.2);
-                next.push(255);
+                self.pixels.push(color.0);
+                self.pixels.push(color.1);
+                self.pixels.push(color.2);
+                self.pixels.push(255);
             }
         }
+    }
 
-        self.cells = next;
+    pub fn pixels(&self) -> *const u8 {
+        self.pixels.as_ptr()
     }
+}
 
-    pub fn get_index(&self, row: u32, col: u32) -> usize {
-        (row * self.width + col) as usize
+#[wasm_bindgen]
+pub struct Palette {
+    colors: [(u8, u8, u8); 255],
+}
+
+#[wasm_bindgen]
+impl Palette {
+    pub fn new() -> Palette {
+        let mut palette: [(u8, u8, u8); 255] = [(0, 0, 0); 255];
+        let redb = 2.0 * PI / (128.0);
+        let redc = 256.0 * 0.25;
+        let greenb = 2.0 * PI / ( 128.0);
+        let greenc = 256.0 * 0.5;
+        let blueb = 2.0 * PI / (128.0);
+        let bluec = 256.0 * 0.75;
+        for i in 0..255 {
+            let r = (255.0 * (0.5 * (redb + i as f64 + redc).sin() + 0.5)) as u8;
+            let g = (255.0 * (0.5 * (greenb + i as f64 + greenc).sin() + 0.5)) as u8;
+            let b = (255.0 * (0.5 * (blueb + i as f64 + bluec).sin() + 0.5)) as u8;
+            palette[i] = (r, g, b)
+        }
+        Palette {
+            colors: palette
+        }
     }
 }
 

www/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      { "targets": { "browsers": [">0.25%", "not dead"] }}
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "lodash",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

www/.browserslistrc

@@ -0,0 +1,3 @@
+> 0.5%
+not op_mini all
+not dead

www/.eslintignore

@@ -0,0 +1,5 @@
+.cache
+node_modules
+public
+types/graphql.d.ts
+_this_is_virtual_fs_path_/$virtual/sync-requires.js

www/.eslintrc.js

@@ -0,0 +1,61 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+    'react',
+    'sort-imports-es6-autofix',
+    'import',
+  ],
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: './',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  rules: {
+    'react/prop-types': 'off',
+    'max-len': ['error', { code: 140, ignoreUrls: true }],
+    'import/prefer-default-export': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+
+    'react/no-unescaped-entities': [
+      'error',
+      {
+        forbid: [
+          { char: '>', alternatives: ['>'] },
+          { char: '}', alternatives: ['}'] },
+        ],
+      },
+    ],
+  },
+}

www/.nvmrc

@@ -0,0 +1 @@
+14.7.0

www/.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js: "10"
+
+script:
+  - ./node_modules/.bin/webpack