Skip to content

Networking

open test.html

Processing working on Browser

ref. ProcessingをWEBブラウザ上で動かしてみよう！

  • create new folder networking under mkdocs repository

  • save processing.min.js in networking folder

  • create sample.pde and save in networking folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
void setup() {
    size(600, 600, P3D);
    noLoop();
}

void draw() {
    background(0);
    lights();
    translate(width/2, height/2, 0);
    rotateY(radians(-30));
    rotateX(radians(-30));
    box(100);
}
  • create test.html and save in networking folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Processing Demo</title>
    <script src="processing.min.js"></script>
</head>
<body>

    <canvas data-processing-sources="sample.pde"></canvas>

</body>

Open localhost to Public

ref. ngrok

  • Sing up for free plan

ref. テストサーバーへのアップが面倒なときはngrokでローカル環境を外部公開してみよう

install(mac) 

1
$ brew install ngrok

mkdocs serve

1
2
3
$ cd your/mkdocs/repo/
$ mkdocs serve
Serving on http://127.0.0.1:8000

get public URL from localhost

1
$ ngrok http 8000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ngrok by @inconshreveable                                                         (Ctrl+C to quit)

Session Status                online                                                              
Account                       myaccount@email.com (Plan: Free)                                
Version                       2.3.39                                                              
Region                        United States (us)                                                  
Web Interface                 http://127.0.0.1:4040                                               
Forwarding                    http://75a40c4a0bc9.ngrok.io -> http://localhost:8000               
Forwarding                    https://75a40c4a0bc9.ngrok.io -> http://localhost:8000              

Connections                   ttl     opn     rt1     rt5     p50     p90                         
                              0       0       0.00    0.00    0.00    0.00

Copy http://75a40c4a0bc9.ngrok.io and open in browser in any device

Last update: May 1, 2021