Author: disjukr

packages/website/src/pages/example/stabilizer-pulled-string.tsx

@@ -7,14 +7,14 @@ import {
 } from 'croquis.js/lib/brush/simple';
 import {
   getStroke as getPulledStringStroke,
-  defaultPulledStringConfig,
   PulledStringDrawingContext,
 } from 'croquis.js/lib/stabilizer/pulled-string';
 import type { StrokeDrawingContext } from 'croquis.js/lib/stroke-protocol';
 import { getStylusState, createStylusState } from 'croquis.js/lib/stylus';
 import PulledStringGuide from '../../components/guide/stabilizer/PulledStringGuide';
 import Draw from '../../components/example/Draw';
 import GithubCorner from '../../components/GithubCorner';
+import DataController from '../../components/DataController';
 import useCanvasFadeout from '../../misc/useCanvasFadeout';
 import useWindowSize from '../../misc/useWindowSize';
 import useForceUpdate from '../../misc/useForceUpdate';
@@ -28,6 +28,14 @@ const Page = () => {
   const [drawingPhase, setDrawingPhase] = useState<
     StrokeDrawingContext<any, any, BrushStrokeResult>
   >();
+  interface Config {
+    brushSize: number;
+    stringLength: number;
+  }
+  const [config, setConfig] = useState<Config>(() => ({
+    brushSize: 40,
+    stringLength: 200,
+  }));
   useEffect(() => {
     if (!drawingPhase?.getState().update) return;
     const id = setInterval(drawingPhase.getState().update, 10);
@@ -39,11 +47,11 @@ const Page = () => {
     const brushConfig = {
       ...defaultBrushConfig,
       ctx,
-      size: 20,
+      size: config.brushSize,
     };
     const drawingPhase = pulledString.down(
       {
-        ...defaultPulledStringConfig,
+        stringLength: config.stringLength,
         targetConfig: brushConfig,
       },
       stylusState
@@ -89,6 +97,15 @@ const Page = () => {
         octoColor="#fff"
         href="https://github.com/disjukr/croquis.js/blob/master/packages/website/src/pages/example/stabilizer-pulled-string.tsx"
       />
+      <DataController
+        className="data-controller"
+        data={config}
+        setData={setConfig}
+        config={{
+          brushSize: { label: 'Brush Size', type: 'range', min: 0, max: 100, step: 1 },
+          stringLength: { label: 'String Length', type: 'range', min: 0, max: 200, step: 1 },
+        }}
+      />
     </>
   );
 };

packages/website/src/pages/example/stabilizer-snake.tsx

@@ -35,9 +35,9 @@ const Page = () => {
     weight: number;
   }
   const [config, setConfig] = useState<Config>(() => ({
-    brushSize: 20,
-    tailCount: 3,
-    weight: 0.5,
+    brushSize: 40,
+    tailCount: 5,
+    weight: 0.7,
   }));
   useEffect(() => {
     if (!drawingPhase) return;