├── LICENSE
├── README.md
├── demo
    ├── c
    │   └── filter.c
    ├── css
    │   └── app.css
    ├── index.html
    └── js
    │   └── app.js
└── dist
    └── wu.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 aka turbo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > If you are reading this on GitHub, please [visit the website](https://turbo.github.io/wasup/). If your are on the website, [here](https://github.com/turbo/wasup)'s the source code.
 2 | 
 3 | Wasup is a build server and CDN for single-page, portable and standalone C programs. Given programs are compiled to Web Assembly, without any modules (such as libc).
 4 | 
 5 | You can use this for quick wasm experiments or rapid prototyping on a machine that doesn't have wasm-llvm or emsdk installed. Don't use this for anything serious.
 6 | 
 7 | ### Demo
 8 | 
 9 | This demo uses a modified version of [migerh's minimal wasm sample](https://github.com/migerh/wasm-filter/blob/master/filter.c). You need a webcam for this.
10 | 
11 | [📷 **Open Edge Detection Demo**](/wasup/demo)
12 | 
13 | ### Quick Start Guide
14 | 
15 | In addition to normal JS, CSS, HTML and asset files, save your C programs in the same directory. You can take a look at this repo's demo dir to get an idea.
16 | 
17 | In your page, include wasup:
18 | 
19 | ```html
20 | <script src="//git.io/wasup"></script>
21 | ```
22 | 
23 | When needed, intialize the module(s) from files:
24 | 
25 | ```js
26 | wasmModule = await compileWASM('c/filter.c', false, {
27 |   debug: msg => console.log(msg)
28 | });
29 | ```
30 | 
31 | This will compile the source file. The second parameter tells wasup that this is a file to be `fetch`ed, not a string. The third parameter are callables (functions exported from JS). In order to use callables in your C code, you have to declare them.
32 | 
33 | In the C program, the first section should be the `WASM` macro. Let's take the demo's source file as an example:
34 | 
35 | ```c
36 | WASM(
37 |     640 * 480 * 4 * 6,
38 |     void debug(int msg);
39 | )
40 | ```
41 | 
42 | - The first parameter is the size of memory in bytes that wasm should reserve. If this is missing, you will run into ArrayBuffer size errors.
43 | - The second parameter is a list of functions imported from JS, with the signature to be used by wasm. Don't separate multiple functions with commas, just write them like you would any other code block. 
44 | 
45 | Now call functions defined in your C code by using the exports of the wasmModule.
46 | 
47 | Compile errors are logged to the console like any other exception:
48 | 
49 | ![](http://imgur.com/xRDlTEW.png)
50 | 


--------------------------------------------------------------------------------
/demo/c/filter.c:
--------------------------------------------------------------------------------
 1 | WASM(
 2 |     640 * 480 * 4 * 6,
 3 |     void debug(int msg);
 4 | )
 5 | 
 6 | const int outline_kernel[10] = {
 7 |     -1, -1, -1,
 8 |     -1,  8, -1,
 9 |     -1, -1, -1,
10 |     1
11 | };
12 | 
13 | unsigned char clamp(double value)
14 | {
15 |     return (value < 0) ? 0 : (value > 255) ? 255 : (unsigned char)(value);
16 | }
17 | 
18 | 
19 | void outline_c(unsigned char* buffer_in, unsigned char* buffer_out, unsigned int width, unsigned int height, double mI, double tresh)
20 | {
21 |     int sum = 0, index = 0, kernelIndex = 0, edgeSum = 0;
22 |     mI /= 255;
23 | 
24 |     for (int y = 0; y < (int)height; ++y)
25 |     {
26 |         for (int x = 0; x < (int)width; ++x)
27 |         {
28 |             index = y * width + x;
29 | 
30 |             sum = 
31 |             ((double) buffer_in[index * 4]     * 0.30) +
32 |             ((double) buffer_in[index * 4 + 1] * 0.59) +
33 |             ((double) buffer_in[index * 4 + 2] * 0.11);
34 |         
35 |             kernelIndex = 0;
36 |             edgeSum = 0;
37 | 
38 |             for (int i = -1; i <= 1; ++i)
39 |             {
40 |                 for (int k = -1; k <= 1; ++k)
41 |                 {
42 |                     int posX = x + k;
43 |                     int posY = y + i;
44 |                     if (posX >= 0 && posX < width && posY >= 0 && posY < height)
45 |                     {
46 |                         int index = posY * width + posX;
47 |                         edgeSum += (int)buffer_in[index * 4] * (int)outline_kernel[kernelIndex];
48 |                     }
49 |                     kernelIndex += 1;
50 |                 }
51 |             }
52 | 
53 |             unsigned char brn = clamp( sum * mI);
54 |             
55 |             buffer_out[index * 4 + 0] = buffer_out[index * 4 + 1] = (clamp(edgeSum * mI) > tresh && x) ? 255 : brn;
56 |             buffer_out[index * 4 + 2] = brn;
57 |             buffer_out[index * 4 + 3] = 255;
58 |         }
59 |     }
60 | }


--------------------------------------------------------------------------------
/demo/css/app.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     font-size: 10px;
 3 |     line-height: 1.5;
 4 |     color: #333;
 5 | }
 6 | 
 7 | body {
 8 |     overflow: hidden;
 9 |     font-family: "Gotham Rounded", "Proxima Nova", sans-serif;
10 |     font-weight: 400;
11 |     color: #fff;
12 |     letter-spacing: .1em;
13 |     text-transform: uppercase;
14 |     -webkit-font-smoothing: antialiased;
15 | }
16 | 
17 | canvas {
18 |     position: fixed;
19 |     top: 0;
20 |     right: 0;
21 |     bottom: 0;
22 |     left: 0;
23 |     overflow: hidden;
24 |     z-index: -100;
25 | }
26 | 
27 | canvas {
28 |     margin: auto;
29 |     width: 105%;
30 |     height: 140%;
31 | }
32 | 
33 | #overlay {
34 |     position: absolute;
35 |     top: 0;
36 |     left: 0;
37 |     width: 100%;
38 |     height: 100%;
39 |     background: radial-gradient(transparent, rgba(0, 0, 0, .5));
40 | }
41 | 
42 | #bigslode {
43 |     position: absolute;
44 |     left: 50px;
45 |     top: 50%;
46 |     margin-top: -25px;
47 |     z-index: 2100;
48 |     color: #fff;
49 |     text-decoration: none;
50 |     transform: scale(1);
51 |     transition: all .35s;
52 | }
53 | 
54 | #logo {
55 |     position: absolute;
56 |     top: 50px;
57 |     left: 50px;
58 |     z-index: 2100;
59 |     font-weight: 700;
60 |     font-size: 18px;
61 |     margin: 0;
62 |     letter-spacing: .125em;
63 |     transition: all .4s;
64 |     transition-delay: .1s;
65 |     line-height: 2em;
66 | }


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     
 3 |     <head>
 4 |         <link rel="stylesheet" href="css/app.css">
 5 |         <script async defer src="https://buttons.github.io/buttons.js"></script>
 6 |     </head>
 7 |     
 8 |     <body>
 9 |         <div id="main">
10 |             <p id="logo">
11 |                 WEB ASSEMBLY / WASUP DEMO
12 |                 <br>
13 |                 <a class="github-button headspace" href="https://github.com/turbo/wasup" data-show-count="true" aria-label="Star turbo/wasup on GitHub">Star</a>
14 |             </p>
15 |             <canvas id="image"></canvas>
16 |             <div id="overlay"></div>
17 |             <div id="bigslode">
18 |                 <p>Brightness Boost</p>
19 |                 <input id="slider1" type="range" min="0" max="1000" step="10" value="150" />
20 |                 <p>Detection Treshold</p>
21 |                 <input id="slider2" type="range" min="0" max="255" step="1" value="50" />
22 |             </div>
23 |         </div>
24 |         <script src="//git.io/wasup"></script>
25 |         <script src="js/app.js"></script>
26 |     </body>
27 |     
28 | </html>


--------------------------------------------------------------------------------
/demo/js/app.js:
--------------------------------------------------------------------------------
 1 | function filter(imageData) {
 2 |     const bufferPointerIn = 1024,
 3 |         {data, width, height} = imageData,
 4 |         bufferIn = new Uint8Array(wasmModule.memory.buffer, bufferPointerIn, width * height * 4),
 5 |         bufferPointerOut = 2048 + width * height * 4,
 6 |         bufferOut = new Uint8Array(wasmModule.memory.buffer, bufferPointerOut, width * height * 4);
 7 | 
 8 |     bufferIn.set(data);
 9 |     wasmModule.outline_c(bufferPointerIn, bufferPointerOut, width, height, document.getElementById('slider1').value, document.getElementById('slider2').value);
10 |     data.set(bufferOut);
11 |     return data;
12 | }
13 | 
14 | function renderSource(source, destination) {
15 |     const context = destination.getContext('2d');
16 |     context.drawImage(source, 0, 0, destination.width, destination.height);
17 | 
18 |     const imageData = context.getImageData(0, 0, destination.width, destination.height);
19 |     imageData.data.set(filter(imageData));
20 |     context.putImageData(imageData, 0, 0);
21 | 
22 |     requestAnimationFrame(_ => renderSource(source, destination));
23 | }
24 | 
25 | async function main() {
26 |     const video = document.createElement('video'),
27 |         stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
28 | 
29 | 
30 |     wasmModule = await compileWASM('c/filter.c', false, {
31 |         debug: msg => console.log(msg)
32 |     });
33 | 
34 |     video.setAttribute(`width`, 640);
35 |     video.setAttribute(`height`, 480);
36 |     video.setAttribute(`src`, URL.createObjectURL(stream));
37 |     video.play();
38 | 
39 |     const image = document.querySelector('#image');
40 |     requestAnimationFrame(_ => renderSource(video, image));
41 | }
42 | 
43 | let wasmModule;
44 | main()
45 |     .catch(console.error);


--------------------------------------------------------------------------------
/dist/wu.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author github.com/turbo
 3 |  * @param {string} file - Path to source file or source text, if ...
 4 |  * @param {*} dynamic - ... this is true
 5 |  * @param {*} sharedEnv - Exported JS closures
 6 |  */
 7 | async function compileWASM(file, dynamic = false, sharedEnv = {}) {
 8 |     if (!dynamic) { 
 9 |         sourceFile = await fetch(file);
10 |         sourceText = await sourceFile.text();
11 |     } else sourceText = file; 
12 | 
13 |     sourceText = '#define WASM(m, ...) unsigned char __wasmm[m]={0};__VA_ARGS__\n\n' + sourceText;
14 |     
15 |     const compileReq = await fetch('https://wasup.turbo.run', {
16 |         method: "POST",
17 |         body: JSON.stringify({src: sourceText})
18 |     }),
19 |     wasmFile = await compileReq.arrayBuffer();
20 | 
21 |     try {       
22 |         const compiledModule = await WebAssembly.compile(wasmFile),
23 |         wasmModule = await WebAssembly.instantiate(compiledModule, { env: sharedEnv });
24 |         return wasmModule.exports;
25 |     } catch (e) {
26 |         console.log('Error compiling!', e);
27 |         errObj = JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array((wasmFile))));
28 |         throw '\nERROR in ' + file + ' (' + errObj.error.code + '):\n' + errObj.error.message;
29 |     }
30 | }


--------------------------------------------------------------------------------