add convertor

docs/Instruction/tips/processing.md

@@ -229,3 +229,66 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
 <video width="400"  controls>
   <source src="../../images/processing/app.mp4" type="video/mp4">
 </video>
+
+
+## Processing to P5.js Converter
+
+
+[Processing to P5.js Converter](https://pde2js.herokuapp.com/)
+
+![](../images/processing/Processing_to_P5.js_Converter .png)
+
+
+<hr />
+=== "Processing code"
+    ```
+    /**
+     * Mouse 2D.
+     *
+     * Moving the mouse changes the position and size of each box.
+     */
+
+    void setup() {
+      size(640, 360);
+      noStroke();
+      rectMode(CENTER);
+    }
+
+    void draw() {
+      background(51);
+      fill(255, 204);
+      rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
+      fill(255, 204);
+      int inverseX = width-mouseX;
+      int inverseY = height-mouseY;
+      rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
+    }
+    ```
+
+=== "P5.js code "
+    ```
+    /**
+     * Mouse 2D.
+     *
+     * Moving the mouse changes the position and size of each box.
+     */
+    function setup() {
+        initializeFields();
+        createCanvas(640, 360);
+        noStroke();
+        rectMode(CENTER);
+    }
+
+    function draw() {
+        background(51);
+        fill(255, 204);
+        rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
+        fill(255, 204);
+        var inverseX = width - mouseX;
+        var inverseY = height - mouseY;
+        rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
+    }
+
+    function initializeFields() {
+    }
+    ```