refactor: [docs] move prototype docs to archive/docs

Author: meganindya

docs/artboard.md

@@ -0,0 +1,178 @@
+# Artboard
+
+The artboard component is responsible for controllling all the graphics management. It creates turtles,
+canvases for each turtle, control the turtle(sprite) movements, communicate a particular turtle to draw
+on canvas. Any change to the background canvas can be done by manipulating this component.
+
+Artboard is composed of three components.
+
+1. Underlay
+2. Manager
+3. Interactor
+
+![Artboards](https://user-images.githubusercontent.com/45814442/123537788-df608e00-d74e-11eb-8702-7674b0db84a5.png)
+
+## Underlay
+
+This refers to main canvas in the background which holds the palettes, menus and blocks. It will be
+present even if there are no turtles (sprite).
+
+## Interactor
+
+It is the interaction point between the canvases and other components.
+
+## Manager
+
+This is the main sub component of artboard as it is responsible for handling all artboards.For e.g.
+it can add a new artboard(canvas), remove an existing artboard, renders a particular turtle to draw
+on artboard, etc. It receives signals from monitor component to do a change in a particular artboard.
+It maintains a list of artboards which are currently present in the program. Before knowing how it
+handles several artboards let us take a look at the overall design structure of artboard and turtle.
+
+### Turtle and Artboard
+
+There is a dedicated canvas for each turtle and all drawings corresponding to the its turtle reside
+in it. We can say there is one-to-one relationship between artboard and turtle. Artboard is designed
+based on MVVM (Model-View-ViewModel). The model of an artboard contains properties specific to its
+artboard like line parameters, arc parameters, etc. The ViewModel contains a reference to the
+corresponding DOM element. e.g. - canvas and turtle positions, style etc.The view component is basically
+a HTML canvas generated by p5 library and all the functions to draw line, arcs, clear, etc are written
+using p5 library. See the below figure for more clarity.
+
+![Artboard](https://user-images.githubusercontent.com/45814442/123538922-b3e0a200-d754-11eb-988e-df51620d5353.png)
+
+## File Structure
+
+All relevant folders and files of artboard are listed down -
+
+- Types
+  - artboard.d.ts
+  - context.d.ts
+
+- Components
+  - artboard
+    - Artboard.tsx
+    - Manager.tsx
+    - Underlay.tsx
+  - Monitor.ts
+
+- Context
+  - ArtBoardContext.ts
+
+- Models
+  - artboard
+    - ArtBoardDraw.ts
+    - Artboard.ts
+    - ArtboardManager.ts
+    - Turtle.ts
+
+- Views
+  - artboard
+    - Artboard.scss
+    - Artboard.tsx
+    - ArtboardHandler.tsx
+    - ArtboardSketch.tsx
+    - ArtboardTurtle.tsx
+
+## p5 Library and Artboard
+
+[p5](https://p5js.org/) library is used to create and handle canvases. p5 provides many inbuilt
+functions to draw graphics and control over the canvas.p5.js has a number of predefined functions
+which we can use to draw anything we want. The most basic (and necessary) functions are the setup()
+and draw() functions.  A simple canvas using p5 in react can be created like this.
+
+[`p5 Canvas is created in instance mode.`](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)
+
+```typescript
+const Sketch = (sketch: P5Instance): void => {
+    let demoCanvas: p5.Element;
+
+    /** This is a setup function */
+    sketch.setup = () => {
+        demoCanvas = sketch.createCanvas(1200, 600);
+    };
+
+    /** This is a draw function */
+    sketch.draw = () => {
+        sketch.background(220);
+        sketch.ellipse(50, 50, 80, 80);
+    };
+};
+```
+
+It creates a canvas as p5 element with a circle on top of it. There are two important functions `setup`
+and `draw`. The code inside the `draw()` function runs continuously from top to bottom until the
+program is stopped. The setup function runs only once in the beginning.
+
+### Integration p5 Sketches with React
+
+By using React we get all the advantages of declarative code with clean, reusable and reactive
+components. All the while still maintaining the easy to use abstractions exposed by p5. The above
+sketch defintion is called inside a react component.
+
+### How Do We Add A Sketch In React?
+
+The sample sketch above is written in plain JavaScript and we can’t just write the same code in react.
+We have to add it using a few manipulations.
+
+Adding a sketch in react is fairly simple, we need to do three basic things:
+
+1. Create a function which encapsulates our sketch
+2. Create a p5 object using the p5 package that we installed earlier
+3. Pass our sketch to the p5 object as an argument
+
+The canvas is wrapped inside a react component so that we can use some of the lifecycle to manipulate
+it accordingly.
+
+```typescript
+const DemoSketch: React.FC<P5WrapperProps> = ({ sketch, children, ...props }) => {
+
+    /** Sketch takes a P5Instance of canvas, props contains attributes like bg color, etc*/
+    const demoSketch = createRef<HTMLDivElement>();
+    const [instance, setInstance] = useState<P5Instance>();
+    const id = `demo-sketch`;
+    useEffect(() => {
+        instance?.updateWithProps?.(props);
+    }, [props]);
+
+    useEffect(() => {
+        if (demoSketch.current === null) return;
+        instance?.remove();
+        const canvas = new p5(Sketch, document.getElementById(id) as HTMLElement) as P5Instance;
+        canvas.updateWithProps?.(props);
+        setInstance(canvas);
+    }, [sketch, demoSketch.current]);
+
+    return (
+        <div id={id} ref={demoSketch}>
+        {children}
+        </div>
+    );
+};
+```
+
+For more information on the integration of p5 sketches with react, please read this
+[post](https://levelup.gitconnected.com/integrating-p5-sketches-into-your-react-app-de44a8c74e91).
+
+## Artboard and react hooks
+
+```typescript
+sketch.updateWithProps = (props: SketchProps) => {
+    if (props.color) {
+        bgcolor = parseInt(props.color, 10);
+    }
+};
+
+useEffect(() => {
+    instance?.updateWithProps?.(props);
+}, [props]);
+```
+
+We declare a reference variable called "demoSketch" using React's useRef hook. This just let's our
+other libraries have a Node.js or reference insertion point. It's important that we pass
+"domSketch.current" into DOM because ".current" gives the actual HTML Node.js we want. And finally,
+we return some jsx of a div that has the ref attribute equal to the value of our useRef hook variable.
+
+Similarly, useEffect hook is used to reflect the change on the canvas. In the above example we see
+the `updateWithProps()` function, which is called when the properties of a wrapper component are
+changed. Read more [here](https://github.com/jamesrweb/react-p5-wrapper).