Skip to content
Snippets Groups Projects
Commit f44c611e authored by yuichitamiya's avatar yuichitamiya
Browse files

add tips processing to p5js converter

parent b668cb15
No related branches found
No related tags found
No related merge requests found
Pipeline #301871 passed
Stage: deploy
    Hide whitespace changes
    Inline Side-by-side
    docs/Instruction/tips/processing.md → docs/Instruction/tips/processing_arduino.md
    + 249
    − 0
    View file @ f44c611e
    # Processing and Arduino with Serial communication # Processing 4 and Arduino with Serial communication
    ## Example_1 ## Processing 4
    [download](https://processing.org/download)
    !!! attention
    Use **MacOS(Intel 64-bit)** even your mac is Apple Silicon.
    JAVA error will happen if you use MacOS(Apple Silicon)
    ## Basic codes
    Arduino Arduino
    ...@@ -40,7 +49,7 @@ void serialEvent(Serial p){ ...@@ -40,7 +49,7 @@ void serialEvent(Serial p){
    println(x); println(x);
    } }
    ``` ```
    ## Example_2 ## Example_1
    Ref. [Distance 2D](https://processing.org/examples/distance2d.html) Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
    ...@@ -80,11 +89,11 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html) ...@@ -80,11 +89,11 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
    === "Distance 2D + Arduino serial" === "Distance 2D + Arduino serial"
    ``` ```
    ////////////////////////////add ////////////////////////////////////////////////////////add
    import processing.serial.*; import processing.serial.*;
    Serial myPort; Serial myPort;
    int x; int x;
    ////////////////////////////added //////////////////////////////////////////////////////added
    float max_distance; float max_distance;
    ...@@ -93,7 +102,9 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html) ...@@ -93,7 +102,9 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
    noStroke(); noStroke();
    max_distance = dist(0, 0, width, height); max_distance = dist(0, 0, width, height);
    myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add ////////////////////////////////////////////////////////add
    myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
    //////////////////////////////////////////////////////added
    } }
    ...@@ -109,19 +120,19 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html) ...@@ -109,19 +120,19 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
    } }
    } }
    ////////////////////////////add ////////////////////////////////////////////////////////add
    void serialEvent(Serial p){ void serialEvent(Serial p){
    x = p.read(); // read value from serial x = p.read(); // read value from serial
    println(x); println(x);
    } }
    ////////////////////////////added //////////////////////////////////////////////////////added
    ``` ```
    ## Example_3 ## Example_2
    Ref.[Storing Input](https://processing.org/examples/storinginput.html) Ref. [Storing Input](https://processing.org/examples/storinginput.html)
    <hr /> <hr />
    === "Storing Input" === "Storing Input"
    ``` ```
    /** /**
    ...@@ -174,11 +185,11 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -174,11 +185,11 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
    * and the oldest value is deleted. * and the oldest value is deleted.
    */ */
    ////////////////////////////add ////////////////////////////////////////////////////////add
    import processing.serial.*; import processing.serial.*;
    Serial myPort; Serial myPort;
    int x; int x;
    ////////////////////////////added //////////////////////////////////////////////////////added
    int num = 60; int num = 60;
    float mx[] = new float[num]; float mx[] = new float[num];
    ...@@ -189,7 +200,9 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -189,7 +200,9 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
    noStroke(); noStroke();
    fill(255, 153); fill(255, 153);
    myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add ////////////////////////////////////////////////////////add
    myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
    //////////////////////////////////////////////////////added
    } }
    ...@@ -211,12 +224,12 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -211,12 +224,12 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
    ////////////////////////////add ////////////////////////////////////////////////////////add
    void serialEvent(Serial p){ void serialEvent(Serial p){
    x = p.read(); // read value from serial x = p.read(); // read value from serial
    println(x); println(x);
    } }
    ////////////////////////////added //////////////////////////////////////////////////////added
    ``` ```
    ## Export as Applications ## Export as Applications
    ...@@ -233,197 +246,4 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -233,197 +246,4 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
    ## Processing to P5.js Converter ## Processing to P5.js Converter
    moved to [this tip](./processing_to_p5_js.md)
    [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() {
    }
    ```
    ## embed p5.js
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css>
    <meta charset="utf-8" />
    <script>
    /**
    * 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() {
    }
    </script>
    ```
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css>
    <meta charset="utf-8" />
    <script>
    /**
    * 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() {
    }
    </script>
    ```
    ## Open in other page
    ```
    ├── p5_js
    │ ├── p5_js.md
    │ ├── sketch.js
    │ └── style.css
    ```
    <hr />
    === "p5_js.md"
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../style.css">
    <meta charset="utf-8" />
    </head>
    <body>
    <main>
    </main>
    <script src="../sketch.js"></script>
    </body>
    </html>
    ```
    === "sketch.js"
    ```
    /**
    * 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() {
    }
    ```
    === "style.css"
    ```
    html, body {
    margin: 0;
    padding: 0;
    }
    canvas {
    display: block;
    }
    ```
    Open in other page: [p5_js.md](./p5_js/p5_js.md)
    docs/Instruction/tips/processing_to_p5_js.md 0 → 100644
    + 205
    − 0
    View file @ f44c611e
    ## 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() {
    }
    ```
    ## Open in new markdown page
    link to : [p5_js.md](./p5_js/p5_js.md){target=_blank}
    ```
    ├── p5_js
    │ ├── p5_js.md
    │ ├── sketch.js
    │ └── style.css
    ```
    <hr />
    === "p5_js.md"
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../style.css">
    <meta charset="utf-8" />
    </head>
    <body>
    <main>
    </main>
    <script src="../sketch.js"></script>
    </body>
    </html>
    ```
    === "sketch.js"
    ```
    /**
    * 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() {
    }
    ```
    === "style.css"
    ```
    html, body {
    margin: 0;
    padding: 0;
    }
    canvas {
    display: block;
    }
    ```
    !!! attention
    Extra "../" at the beginning of paths are required in p5_js.md
    ```
    <link rel="stylesheet" type="text/css" href="../style.css">
    <script src="../sketch.js"></script>
    ```
    ## Embed p5.js in mkdocs
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css>
    <meta charset="utf-8" />
    <script>
    /**
    * 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() {
    }
    </script>
    ```
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css>
    <meta charset="utf-8" />
    <script>
    /**
    * 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() {
    }
    </script>
    ```
    docs/Instruction/tips_list.md
    + 2
    − 1
    View file @ f44c611e
    ...@@ -68,7 +68,8 @@ ...@@ -68,7 +68,8 @@
    ## Interface and application programming ## Interface and application programming
    - [Blynk IOT](./tips/blynk.md) - [Blynk IOT](./tips/blynk.md)
    - [Processing 4 and Arduino](./tips/processing.md) - [Processing 4 and Arduino](./tips/processing_arduino.md)
    - [Processing 4 to P5.js Converter](./tips/processing_to_p5_js.md)
    ## Machine Building ## Machine Building
    - [Machine Building Parts List](./tips/machine_building_parts_list.md) - [Machine Building Parts List](./tips/machine_building_parts_list.md)
    ......
    docs/Instruction/week14.md
    + 2
    − 1
    View file @ f44c611e
    ...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
    - Ref. [Cell Cycle](https://n-e-r-v-o-u-s.com/cellCycle/) - Ref. [Cell Cycle](https://n-e-r-v-o-u-s.com/cellCycle/)
    - Arduino -> serial -> PC -> Processing -> App - Arduino -> serial -> PC -> Processing -> App
    - Tips: [Processing and Arduino with Serial communication](./tips/processing.md) - Tips: [Processing and Arduino with Serial communication](./tips/processing_arduino.md)
    - Tips: [Processing to P5.js Converter](./tips/processing_to_p5_js.md)
    ### p5.js ### p5.js
    ......
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment