diff --git a/web/src/app.html b/web/src/app.html index 2add40e..9410cdc 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte index d3963b2..c33a768 100644 --- a/web/src/routes/+page.svelte +++ b/web/src/routes/+page.svelte @@ -24,9 +24,9 @@ */ let line_count = 500; let line_opacity = 0.2; - let num_anchors = 188; - let num_anchor_gap = 0; - let penalty = 100; + let num_anchors = 200; + let num_anchor_gap = 10; + let penalty = 500; let start_anchor = 0; $: num_anchor_gap = Math.min(num_anchor_gap, num_anchors / 2 - 1); @@ -70,9 +70,10 @@ } function draw() { + const isPortrait = windowRatio > 1; const maxSize = Math.max( 250, - (windowRatio > 1 ? window.innerHeight / 3 : window.innerWidth / 3) - 100 + (isPortrait ? window.innerHeight / 3 : window.innerWidth / 3) - 100 ); const imageRatio = imageSource.height / imageSource.width; @@ -85,7 +86,7 @@ /** @type CanvasRenderingContext2D */ // @ts-ignore - const imagePreviewCtx = imagePreview.getContext('2d'); + const imagePreviewCtx = imagePreview.getContext('2d', { willReadFrequently: true }); imagePreviewCtx.clearRect(0, 0, width, height); imagePreviewCtx.drawImage(imageSource, 0, 0, width, height); @@ -144,6 +145,17 @@ await init(); windowRatio = window.innerHeight / window.innerWidth; }); + + /** + * @param {Event & { currentTarget: EventTarget & HTMLInputElement }} e + */ + async function upload(e) { + if (e.currentTarget.files) { + await imageUpload(e.currentTarget.files[0]); + draw(); + state = STATES.CONFIGURE; + } + } @@ -159,11 +171,11 @@
- monochrome + monochrome
- output + output
@@ -175,55 +187,34 @@ {#if state == STATES.UPLOAD}
- +
+

string-bean

+
+ + +
+
{:else if state == STATES.CONFIGURE} -
+
- -
-
+
- Anchor Count +
+ Anchor Count +
- Anchor Gaps +
+ Anchor Gaps +
- Chord Count +
+ Line Count +
- Line Opacity +
+ Line Opacity +
- Shape +
+ Shape +