Switch from codemirror to monaco for a bug

README.md

@@ -4,22 +4,22 @@ This is the code repository for "Brush Stroke Tutorial," powered by [Docusaurus]
 We may change the host and domain. Remember to star this code repository instead of bookmark the website.
 
 The website will be WIP for a long time since rendering brush strokes with GPU is a newly emerged research topic.
-Shen Ciao continuously update tutorial-style articles on (potentially) influential research works.
+Shen Ciao continuously update tutorials on (potentially) influential research works.
 
 ## Be critical
 The most contents come from Shen Ciao and Li-yi Wei's research *[Ciallo: The next generation vector paint program][Ciallo]*.
 It's impossible to create a perfect tutorial in the first place, so we eagerly need critiques and suggestions.
 We would be grateful for creating issues or pull requests to fix typos, correct facto mistakes, and revise terrible terminology naming in this tutorial.
 
 ## Build and Develop
-Follow the guidance in [Docusaurus's documentation](https://docusaurus.io/docs/installation).
+The textual contents on the website are written in markdown, you can easily modify them without extra web development skills.
 
-The textual contents on the website are written in markdown, you can easily modify them without extra knowledge about web development.
+Follow the guidance in [Docusaurus's documentation](https://docusaurus.io/docs/installation) for further development.
 
 The project is built with javascript libraries include:
 - React
 - Threejs: WebGL wrapper
-- React-codemirror: Code editor
+- monaco-edtior/react: Code editor
 
 While creating this tutorial, shen has just started learning these JavaScript libraries.
 If you are familiar with these libraries and have some engineering suggestions, please raise them in the issue.

docs/Introduction/Introduction.mdx

@@ -26,7 +26,7 @@ So old algorithms may not satisfy your needs for real-time rendering.
 
 In this tutorial, you will learn about the stroke rendering algorithms designed for the GPU graphics pipeline.
 We (I and my mentor [Liyi-Wei](https://www.liyiwei.org/)) name these algorithms as _Articulated_ in our paper (mainly because they look like drawing an articulated arm).
-I assume you are familiar with a graphics API like OpenGL or D3D.
+I assume our readers are already familiar with a graphics API like OpenGL or D3D.
 This tutorial will concentrate more on the high-level algorithms than the implementation details.
 
 Although graphics APIs provide us line primitives, including `LINES`, `LINE_STRIP`, and `LINE_LOOP`,
@@ -44,7 +44,7 @@ If you're unfamiliar with tablets and styluses, you can watch the video below fo
 
 [![Tablet](https://img.youtube.com/vi/83BRMfjJXIk/maxresdefault.jpg)](https://www.youtube.com/watch?app=desktop&v=83BRMfjJXIk)
 
-While you may recognize a brush stroke by its stylization, another crucial property could be ignored: the varying radius along the stroke.
+While you may recognize a brush stroke by its stylization, another crucial property could be ignored: the varying radius along the stroke, we will call it **mutable radius** here.
 The radii are typically generated from the pressure values as a stylus presses and moves on a tablet.
 For experienced artists, one of the highest priorities is to configure the mapping function from pen pressure to brush radius after installing a painting program.
 
@@ -113,5 +113,9 @@ Regular vector drawing datasets don't contain them.
 
 :::
 
+import {ArticulatedLine2D} from "../../src/components/ArticulatedLine2D";
+
+<ArticulatedLine2D/>
+
 [code repository]: https://github.com/ShenCiao/BrushStrokeTutorial
 [Ciallo]: https://github.com/ShenCiao/Ciallo

docs/toc.mdx

@@ -1,5 +1,6 @@
 ---
 title: Table of Contents
+hide_title: true
 sidebar_position: 1
 slug: /
 ---
@@ -8,7 +9,7 @@ This tutorial will teach you how to render brush strokes with the modern GPU gra
 
 If you like this tutorial, please star the [code repository] instead of bookmark the website since the domain might be changed.
 
-## Contents
+## Table of Contents
 
 - [Introduction](./introduction)
 - Basics
@@ -19,23 +20,21 @@ If you like this tutorial, please star the [code repository] instead of bookmark
   - Stamp with mutable radius 2
 - An interleave
 
-## In Progress
-
-Telling a good story is as hard as inventing a novel method and teaching it.
+## Future Contents
 
 ### Airbrush
 
 Airbrush is a special type of stamp brush.
 Learn the mathematical derivation from discrete to continuous stamp to get a "continuous airbrush".
 
-### Stamp Density and "Ratio-distance"
+### Stamp density and "ratio-distance"
 
 Control stamp density along the polyline and render a critical stamp placing pattern called ratio-distance.
 Very important for a serious project.
 
-### 3D Stroke
+### 3D stroke
 
-Learn how to extend the rendering methods to 3D space.
+Learn how to extend the algorithms to 3D space.
 
 I'm integrating it into the Blender Grease Pencil:
 

package.json

@@ -15,23 +15,22 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@codemirror/language": "^6.9.0",
-    "@codemirror/legacy-modes": "^6.3.3",
-    "@docusaurus/core": "2.4.1",
-    "@docusaurus/preset-classic": "2.4.1",
+    "@docusaurus/core": "^2.4.3",
+    "@docusaurus/preset-classic": "^2.4.3",
     "@mdx-js/react": "^1.6.22",
-    "@uiw/react-codemirror": "^4.21.13",
+    "@monaco-editor/react": "^4.5.2",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
+    "raw-loaders": "file:plugins/raw-loaders",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "three": "^0.156.1",
-    "raw-loaders": "file:plugins/raw-loaders"
+    "three": "^0.156.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.1",
+    "@docusaurus/module-type-aliases": "^2.4.3",
     "@tsconfig/docusaurus": "^1.0.5",
     "@types/mdx": "^2.0.7",
+    "@types/three": "^0.156.0",
     "typescript": "^4.7.4"
   },
   "browserslist": {

plugins/raw-loaders/index.js

@@ -5,9 +5,7 @@ module.exports = function (context, options) {
       return {
         module: {
           rules: [
-            { test: /\.(glsl|vert|frag)$/, type: "asset/source" },
-            { test: /\.m?js$/, resourceQuery: { not: [/raw/] }, use: [ 'babel-loader' ] },
-            { resourceQuery: /raw/, type: 'asset/source' }
+            { test: /\.(glsl|vert|frag|txt)$/, type: 'asset/source' },
           ],
         },
       };

src/components/sinwaveGeometry.ts

@@ -0,0 +1,24 @@
+const sinewaveString =
+`const n = 32;
+const maxRadius = 1/3;
+
+const position = [];
+const radius = [];
+
+const gr = (1 + Math.sqrt(5)) / 2; // golden ratio
+const pi = Math.PI;
+
+for(let i = 0; i <= n; ++i){
+  let a = i / n;
+  let x =  -pi + (2 * pi * a);
+  let y = 1.0 / gr * Math.sin(x);
+  let r = Math.cos(x / 2.0) * maxRadius;
+
+  position.push(x, y);
+  radius.push(r);
+}
+
+return [position, radius];
+`
+
+export default sinewaveString;