Build your first webassembly project

Hey folks,

This post is part of a series exploring WebAssembly. Check out the other parts here [link to other parts of the series].

Ever heard of WebAssembly and thought it was too complicated? Today, you'll build a simple WebAssembly project from scratch. We're keeping it super basic: a random hexadecimal color code generator. Think of it as the "Hello, World!" of WebAssembly, but with a colorful twist. You'll learn to write, compile, and use simple WebAssembly code with JavaScript to generate random colors in your browser.

Setting Up WebAssembly

This series uses C and C examples, so we'll use Emscripten to compile C/C to WASM. You can use other languages with their respective compilers.

Emscripten setup is easy. Follow these instructions: https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

macOS users can use Homebrew:

brew install emscripten

Linux users can follow these instructions: https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

After installation, verify with:

emcc -v

A Simple Addition Example

Before building our color generator, let's create a simple addition application to understand the WASM workflow. We'll build it in JavaScript first, then convert it to WASM. Create index.html:

<!-- index.html -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script src="add.js"></script>

Now create add.c:

// add.c
int addTwoNumbers(int num1, int num2) {
    return num1 + num2;
}

Compile the C code to WASM:

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_addTwoNumbers']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

This command:

• Compiles add.c to JavaScript (add.js).
• Exports the addTwoNumbers function for JavaScript use (the underscore is part of the command).
• Exports runtime functions (ccall, cwrap) needed for JavaScript interaction.

This creates add.wasm (the WASM binary) and add.js (the glue code). Modify index.html to include the WASM functionality:

<!-- index.html (modified) -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script>
  const Module = {
    onRuntimeInitialized: () => {
      const addTwoNumbers = Module.cwrap('addTwoNumbers', 'number', ['number', 'number']);
      function addNumbers() {
        const num1 = parseInt(document.getElementById('num1').value);
        const num2 = parseInt(document.getElementById('num2').value);
        document.getElementById('result').innerText = addTwoNumbers(num1, num2);
      }
    }
  };
</script>
<script src="add.js"></script>

Run this using a local server (e.g., python -m http.server, python3 -m http.server, or live-server). Enter two numbers and click "Add" to see the result.

JavaScript handles DOM manipulation, while WASM (C code) performs the addition. The complete code is available here [link to code].

Understanding Hexadecimal

Hexadecimal (base-16) uses 16 symbols (0-9, A-F, where A=10, etc.). Six-digit hex codes represent colors (e.g., #FF5733, #42A5F5). Learn more about hexadecimal colors here [link to explanation].

The Random Color Generator

Create random_color.c:

// random_color.c
#include <stdlib.h>
#include <time.h>

char* intToHex(int num) {
    static char hexStr[3];
    const char hexDigits[] = "0123456789ABCDEF";
    hexStr[0] = hexDigits[(num >> 4) & 0xF];
    hexStr[1] = hexDigits[num & 0xF];
    hexStr[2] = '<pre class="brush:php;toolbar:false"><code class="bash">emcc random_color.c -o random_color.js -s EXPORTED_FUNCTIONS="['_generateRandomHexColor']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap', 'UTF8ToString']"

'; return hexStr; } char* generateRandomHexColor() { static char color[8]; srand(time(NULL)); color[0] = '#'; char* r = intToHex(rand() % 256); color[1] = r[0]; color[2] = r[1]; char* g = intToHex(rand() % 256); color[3] = g[0]; color[4] = g[1]; char* b = intToHex(rand() % 256); color[5] = b[0]; color[6] = b[1]; color[7] = '<🎝🎝🎝>'; return color; }

Compile:

brew install emscripten

Create (or modify) your HTML to use this function: [HTML code to call the WASM function and update the background color].

Clicking a button will change the page's background color.

Complete code: [link to code]

Conclusion

We've built a simple WebAssembly application! This demonstrates WebAssembly's power to bring high-performance code to the web. Future posts will explore more advanced applications. Stay tuned!

The above is the detailed content of Build your first webassembly project. For more information, please follow other related articles on the PHP Chinese website!