add week interface and tips p5.js

docs/Instruction/tips/p5_js.md

+# p5.js and Arduino
+
+Ref. [Lab: Serial Input to P5.js](https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/#The_P5js_Serialport_Library)
+
+## p5.js and Arduino
+
+> When you use the p5.serialport library for P5.js, it communicates with a webSocket server in the P5.js IDE to give you access to serial devices attached to your computer. This lab shows you how to use P5 to control a microcontroller using asynchronous serial communication.
+
+![](../images/p5_js/socket-serial-connection-2-1280x360.png)
+
+
+## Install the P5.serialcontrol App
+
+Download [P5.serialcontrol](https://github.com/p5-serial/p5.serialcontrol/releases)
+
+![](../images/p5_js/p5_serialcontrol_app.png)
+
+### Arduino sketch
+
+```
+void setup() {
+  Serial.begin(9600);           // initialize serial communications
+}
+
+void loop() {
+  if (Serial.available() > 0) { // if there's serial data available
+    int inByte = Serial.read();   // read it
+    Serial.write(inByte);         // send it back out as raw binary data
+    analogWrite(13, inByte);       // use it to set the LED brightness
+  }
+}
+```
+
+!!! note
+    Check the serial port in ArduinoIDE.
+
+
+## Open p5.js Web Editor in browser
+
+[p5.js Web Editor](https://editor.p5js.org/)
+
+![](../images/p5_js/p5_js_web_editor.png)
+
+Find this line
+```
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+```
+
+Then Add this in the next line
+```
+<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js"></script>
+```
+
+![](../images/p5_js/p5_js_added.png)
+
+Open ```Sketch.js``` and replace into this.  
+![](../images/p5_js/p5_js_sketch_js.png)
+
+```
+let serial; // variable to hold an instance of the serialport library
+
+function setup() {
+  serial = new p5.SerialPort(); // make a new instance of the serialport library
+  serial.on('list', printList); // set a callback function for the serialport list event
+
+  serial.list(); // list the serial ports
+}
+
+// get the list of ports:
+function printList(portList) {
+  // portList is an array of serial port names
+  for (var i = 0; i < portList.length; i++) {
+    // Display the list the console:
+    console.log(i + portList[i]);
+  }
+}
+```
+Press "Run" in p5.js Web editor then serial port is listed.  
+![](../images/p5_js/p5_js_serial_listed.png)
+
+!!! Attention
+    this page is not finished
+    

docs/Instruction/tips/processing.md

+# Processing and Arduino with Serial communication
+
+## Example_1
+
+Arduino
+
+```
+void setup(){
+  Serial.begin(9600);
+}
+
+void loop(){
+  Serial.write(100);// 1 byte = 0-255
+  delay(1000);
+  Serial.write(200);// 256 goes to 0
+  delay(1000);
+}
+```
+
+Processing
+
+```
+import processing.serial.*;
+Serial myPort;
+int x;
+
+void setup(){
+  size(256, 256);// canvas size
+
+  myPort = new Serial(this, "/dev/tty.usbmodem1411", 9600); //port
+}
+
+void draw(){
+  background(255);
+  ellipse(x,100,50,50); //(center_x,center_y,width,height)
+}
+
+void serialEvent(Serial p){
+  x = p.read(); // read value from serial
+  println(x);
+}
+```
+## Example_2
+
+Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
+
+<hr />
+=== "Distance 2D"
+
+    ```
+    /**
+     * Distance 2D.
+     *
+     * Move the mouse across the image to obscure and reveal the matrix.  
+     * Measures the distance from the mouse to each square and sets the
+     * size proportionally.
+     */
+
+    float max_distance;
+
+    void setup() {
+      size(640, 360);
+      noStroke();
+      max_distance = dist(0, 0, width, height);
+    }
+
+    void draw() {
+      background(0);
+
+      for(int i = 0; i <= width; i += 20) {
+        for(int j = 0; j <= height; j += 20) {
+          float size = dist(mouseX, mouseY, i, j);
+          size = size/max_distance * 66;
+          ellipse(i, j, size, size);
+        }
+      }
+    }
+    ```
+
+=== "Distance 2D + Arduino serial"
+
+    ```
+    ////////////////////////////add
+    import processing.serial.*;
+    Serial myPort;
+    int x;
+    ////////////////////////////added
+
+    float max_distance;
+
+    void setup() {
+      size(640, 360);
+      noStroke();
+      max_distance = dist(0, 0, width, height);
+
+      myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add
+
+    }
+
+    void draw() {
+      background(0);
+
+      for(int i = 0; i <= width; i += 20) {
+        for(int j = 0; j <= height; j += 20) {
+          float size = dist(x, mouseY, i, j);//////// changed mouseX to X
+          size = size/max_distance * 66;
+          ellipse(i, j, size, size);
+        }
+      }
+    }
+
+    ////////////////////////////add
+    void serialEvent(Serial p){
+      x = p.read(); // read value from serial
+      println(x);
+    }
+    ////////////////////////////added
+    ```
+
+## Example_3
+
+Ref.[Storing Input](https://processing.org/examples/storinginput.html)
+
+    <hr />
+=== "Storing Input"
+    ```
+    /**
+     * Storing Input.
+     *
+     * Move the mouse across the screen to change the position
+     * of the circles. The positions of the mouse are recorded
+     * into an array and played back every frame. Between each
+     * frame, the newest value are added to the end of each array
+     * and the oldest value is deleted.
+     */
+
+    int num = 60;
+    float mx[] = new float[num];
+    float my[] = new float[num];
+
+    void setup() {
+      size(640, 360);
+      noStroke();
+      fill(255, 153);
+    }
+
+    void draw() {
+      background(51);
+
+      // Cycle through the array, using a different entry on each frame.
+      // Using modulo (%) like this is faster than moving all the values over.
+      int which = frameCount % num;
+      mx[which] = mouseX;
+      my[which] = mouseY;
+
+      for (int i = 0; i < num; i++) {
+        // which+1 is the smallest (the oldest in the array)
+        int index = (which+1 + i) % num;
+        ellipse(mx[index], my[index], i, i);
+      }
+    }
+    ```
+
+=== "Storing Input + Arduino serial"
+
+    ```
+    /**
+     * Storing Input.
+     *
+     * Move the mouse across the screen to change the position
+     * of the circles. The positions of the mouse are recorded
+     * into an array and played back every frame. Between each
+     * frame, the newest value are added to the end of each array
+     * and the oldest value is deleted.
+     */
+
+    ////////////////////////////add
+    import processing.serial.*;
+    Serial myPort;
+    int x;
+    ////////////////////////////added
+
+    int num = 60;
+    float mx[] = new float[num];
+    float my[] = new float[num];
+
+    void setup() {
+      size(640, 360);
+      noStroke();
+      fill(255, 153);
+
+      myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add
+
+    }
+
+    void draw() {
+      background(51);
+
+      // Cycle through the array, using a different entry on each frame.
+      // Using modulo (%) like this is faster than moving all the values over.
+      int which = frameCount % num;
+      mx[which] = x;//mouseX;////// changed mouseX to X
+      my[which] = mouseY;
+
+      for (int i = 0; i < num; i++) {
+        // which+1 is the smallest (the oldest in the array)
+        int index = (which+1 + i) % num;
+        ellipse(mx[index], my[index], i, i);
+      }
+    }
+
+
+
+    ////////////////////////////add
+    void serialEvent(Serial p){
+      x = p.read(); // read value from serial
+      println(x);
+    }
+    ////////////////////////////added
+    ```
+
+## Export as Applications
+
+![](../images/processing/processing_export_app.png)  
+![](../images/processing/processing_export_options.png)  
+![](../images/processing/processing_app_made.png)
+
+
+<video width="400"  controls>
+  <source src="../../images/processing/app.mp4" type="video/mp4">
+</video>

docs/Instruction/tips_list.md

@@ -6,6 +6,7 @@
 - [Markdown in-page links](./tips/markdown_In-page_links.md)
 - [Fullscreen background image](./tips/fullscreen_image_text_up.md)
 - [embed video](./tips/embed_videos.md)
+- [tab in markdown](./tips/tab_in_markdown.md)
 
 ## git
 - [How to recover after rejected large files commit](http://academany.fabcloud.io/fabacademy/2021/labs/kannai/site/instruction/tips/git_manage_large_commit/)
@@ -65,6 +66,10 @@
 - [ESP32-CAM to switch bot](./tips/esp32-switch.md)
 - [Find I2C OLED Address and Display original image](./tips/i2c_oled_address.md)
 
+## Interface and application programming
+- [Blynk IOT](./tips/blynk.md)
+- [Processing 4 and Arduino](./tips/processing.md)
+
 ## Machine Building
 - [Machine Building Parts List](./tips/machine_building_parts_list.md)
 - [DRV8846_Stepperboard](./tips/DRV8846_Stepperboard.md)

docs/Instruction/week14.md

@@ -21,3 +21,44 @@
 ## Group Assignment
 
 >  compare as many tool options as possible
+
+### Todo
+
+- [last year](http://academany.fabcloud.io/fabacademy/2021/labs/kannai/site/group_assignments/week14/)
+
+- Blynk
+    - https://blynk.io/
+    - Tips [Blynk IOT](./tips/blynk.md)       
+
+## Individual assignment
+
+>   write an application that interfaces a user with an
+  input &/or output device that you made
+
+### User -> GUI -> input device
+
+
+
+### output  -> visualization  -> User
+
+
+### Todo
+
+### Processing
+
+- [site](https://processing.org/)
+    - Ref.  [Cell Cycle](https://n-e-r-v-o-u-s.com/cellCycle/)
+
+- Arduino  -> serial -> PC -> Processing  -> App
+    - Tips: [Processing and Arduino with Serial communication](./tips/processing.md)
+
+### p5.js
+
+- [site](https://p5js.org/)
+- Arduino  -> serial  -> p5.serialcontroll app  -> p5.js Web Editor
+    - Tips: [p5.js and Arduino])(./tips/p5_js.md)
+
+
+### Assessment
+
+[Assessment](https://fabacademy.org/2022/nueval/interface_and_application_programming.html)