前回の続き
www/index.htmlを書いていきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello wasm-pack!</title>
</head>
<body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<button id="render">render</button>
<div>
<canvas id="canvas_wasm" height="1200" width="1200"></canvas>
<canvas id="canvas_js" height="1200" width="1200"></canvas>
<canvas id="canvas_hybrid" height="1200" width="1200"></canvas>
</div>
<script src="./bootstrap.js"></script>
</body>
</html>
www/index.js
'use strict'
function draw(ctx, canvas_w, canvas_h, data) {
let img = new ImageData(new Uint8ClampedArray(data), canvas_w, canvas_h);
ctx.putImageData(img, 0, 0,);
}
const X_MIN = -1.5;
const X_MAX = 0.5;
const Y_MIN = -1.0;
const Y_MAX = 1.0;
const MAX_ITER = 64;
console.log("start loading wasm");
const mandelbrot = import('../pkg').catch(console.error);
Promise.all([mandelbrot]).then(async function([
{generate_mandelbrot_set,draw_mandelbrot_set}
]) {
console.log("finished loading wasm");
const renderBtn = document.getElementById('render');
renderBtn.addEventListener('click', () => {
draw_mandelbrot_set();
let wasmResult = null;
{
const CANVAS_ID = "canvas_hybrid";
let canvas = document.getElementById(CANVAS_ID);
let context = canvas.getContext("2d");
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const generateStartTime = Date.now();
wasmResult = generate_mandelbrot_set(canvasWidth, canvasHeight,
X_MIN, X_MAX, Y_MIN, Y_MAX, MAX_ITER);
const generateEndTime = Date.now();
const drawStartTime = Date.now();
draw(context, canvasWidth, canvasHeight, wasmResult);
const drawEndTime = Date.now();
const elapsed = generateEndTime - generateStartTime;
console.log(`\tgenerate:wasm\tgenerate_elapsed:${elapsed} [ms]`);
console.log(`\tdraw: js\tdraw_elapsed] ${drawEndTime - drawStartTime} [ms]`);
}
})
})処理の呼び出し側のコードなんだけど、Rustのコード書いてねー！
「RUST勉強中、10/2の積み上げ?」への1件のフィードバック