fix: improvements, remove unused

src/components/App.svelte

@@ -1,6 +1,8 @@
 <script context="module">
 	import Canvas from 'src/components/Canvas.svelte'
 	import Settings from 'src/components/Settings.svelte'
+
+	import { refresh } from 'src/stores/refresh'
 </script>
 
 <script>
@@ -10,7 +12,7 @@
 <svelte:window
 	bind:innerWidth={width}
 	bind:innerHeight={height}
-	on:resize={() => window.location.reload()} />
+	on:resize={() => refresh.set(true)} />
 
 <Settings />
 

src/components/Canvas.svelte

@@ -2,7 +2,6 @@
 	import { onMount } from 'svelte'
 
 	import { settings } from 'src/stores/draw'
-	import { wasm } from 'src/stores/load'
 
 	import { drawMandelbrot } from 'src/utils/canvas/draw'
 </script>
@@ -23,62 +22,13 @@
 		gl.fillStyle = 'black'
 		gl.fill()
 
-		gl.strokeStyle = 'white'
-
 		draw()
 	}
 
 	async function draw() {
-		// not works (status not shown)
-		// wasm.set('calc')
-		// await tick()
-
 		field = gl.getImageData(0, 0, width, height)
-
-		try {
-			field = await drawMandelbrot(field, $settings.lx, $settings.rx)
-		} catch (e) {
-			if (e.name === 'RuntimeError') {
-				wasm.set('fail')
-				console.error(e)
-				return
-			}
-
-			throw e
-		}
-
+		field = drawMandelbrot(field, $settings.lx, $settings.rx)
 		gl.putImageData(field, 0, 0)
-		wasm.set('none')
-
-		drawAxis($settings.lx, $settings.rx, width, height)
-	}
-
-	function drawAxis(lx, rx, width, height) {
-		if (lx < 0 && rx > 0) {
-			// y axis
-			let xw = rx - lx
-			let scale = width / xw
-			let ypix = Math.abs(lx) * scale
-
-			drawLine(ypix, 0, ypix, height)
-		}
-
-		// x axis now hardcoded to center
-		let xpix = height / 2
-		drawLine(0, xpix, width, xpix)
-	}
-
-	/**
-	 * @param  {Number} sx Start `x`
-	 * @param  {Number} sy Start `y`
-	 * @param  {Number} ex End `x`
-	 * @param  {Number} ey End `y`
-	 */
-	function drawLine(sx, sy, ex, ey) {
-		gl.beginPath()
-		gl.moveTo(sx, sy)
-		gl.lineTo(ex, ey)
-		gl.stroke()
 	}
 
 	onMount(init)

src/components/Settings.svelte

@@ -3,20 +3,7 @@
 	import InputNumber from 'src/components/atoms/InputNumber.svelte'
 
 	import { settings } from 'src/stores/draw'
-	import { wasm } from 'src/stores/load'
-
-	function getLoadText(state) {
-		/* eslint-disable indent */
-		switch (state) {
-			case 'load':
-			case 'calc':
-				return 'Loading'
-			case 'fail':
-				return 'Fail'
-			default:
-				return 'Refresh'
-		}
-	}
+	import { refresh } from 'src/stores/refresh'
 </script>
 
 <script>
@@ -31,26 +18,29 @@
 	{#if show}
 		<div class="flex justify-between mb-3">
 			<Button on:click={toggleShow} class="mr-2">Hide</Button>
-			<Button
-				on:click={() => window.location.reload()}
-				danger={$wasm === 'fail'}>
-				{getLoadText($wasm)}
-			</Button>
+			<div class:hidden={$refresh === false}>
+				<Button on:click={() => window.location.reload()}>Refresh</Button>
+			</div>
 		</div>
 
-		<div class="flex">
+		<div class="flex mb-2">
 			<p>x: [</p>
 			<InputNumber bind:value={$settings.lx} />
 			<p>;</p>
 			<InputNumber bind:value={$settings.rx} />
 			<p>]</p>
 		</div>
 
+		<div class="flex">
+			<p>y:</p>
+			<InputNumber bind:value={$settings.yc} />
+		</div>
+
 		<a
 			href="//github.com/istudyatuni/mandelbrot"
-			class="flex float-right mt-5 text-sky-600 hover:text-sky-800">
-			<span>GitHub</span>
-			<img src="assets/icons/github.svg" alt="" class="ml-2" />
+			class="flex mt-5 text-sky-600 hover:text-sky-800">
+			<img src="assets/icons/github.svg" alt="" class="mr-2" />
+			<span class="pt-1">GitHub</span>
 		</a>
 	{:else}
 		<Button on:click={toggleShow}>Show settings</Button>

src/stores/draw.js

@@ -1,11 +1,10 @@
 import { sessionStore } from 'svelte-storages'
 
 /**
- * left `x`, right `x`, top `y`, bottom `y`
+ * left `x`, right `x`, `y` center
  */
 export const settings = sessionStore('draw-settings', {
 	lx: -3,
 	rx: 1,
-	ty: null,
-	by: null,
+	yc: 0,
 })

src/stores/refresh.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const refresh = writable(false)

src/utils/canvas/draw.js

@@ -4,13 +4,15 @@ import { memory } from 'src/wasm/mandelbrot_wasm_bg.wasm'
 /** @type {Mandelbrot} */
 let mandelbrot = null
 
+const IS_IN = 0
+
 /**
  * Draw mandelbrot on image
  *
  * @param  {ImageData}          image Image from canvas
  * @param  {number}             lx    Left x of complex plane
  * @param  {number}             rx    Right x of complex plane
- * @return {Promise<ImageData>}       Promise with resulting image
+ * @return {ImageData}       Promise with resulting image
  */
 export function drawMandelbrot(image, lx, rx) {
 	let w = image.width,
@@ -31,9 +33,15 @@ export function drawMandelbrot(image, lx, rx) {
 	for (let i = 0, j = 0; i < len; i++, j += 4) {
 		color = pixels[i]
 
-		image.data[j] = color
-		image.data[j + 1] = color
-		image.data[j + 2] = color
+		if (color === IS_IN) {
+			image.data[j] = IS_IN
+			image.data[j + 1] = IS_IN
+			image.data[j + 2] = IS_IN
+		} else {
+			image.data[j] = color / 255
+			image.data[j + 1] = 255 - color
+			image.data[j + 2] = color % 255
+		}
 	}
 
 	return image

wasm/src/lib.rs

@@ -14,7 +14,7 @@ const N: i16 = 100;
 /// complex zero
 const Z0: Complex<f64> = Complex::new(0.0, 0.0);
 
-const IS_IN: u8 = 255;
+const IS_IN: u8 = 0;
 
 #[wasm_bindgen]
 impl Mandelbrot {
@@ -89,7 +89,7 @@ fn check_series(x: f64, i: f64) -> u8 {
 
     for i in 0..N {
         if num.norm() >= R as f64 {
-            return i as u8;
+            return (N - i) as u8;
         }
 
         num = num.powu(2) + point;