examples: increase the resolution of the generated image in examples/wasm/mandelbrot

This commit is contained in:
Delyan Angelov 2023-12-11 16:54:09 +02:00
parent 1b3c4f596e
commit 2de9a24f2f
No known key found for this signature in database
GPG key ID: 66886C0F12D595ED
6 changed files with 40 additions and 41 deletions

View file

@ -3,7 +3,7 @@
## Using only V ## Using only V
``` ```
v run main.v v run .
``` ```
## Using Python or Emscripten ## Using Python or Emscripten

Binary file not shown.

After

Width:  |  Height:  |  Size: 991 B

View file

@ -1,29 +0,0 @@
module main
import vweb
import os
const http_port = 3001
struct App {
vweb.Context
}
fn main() {
vweb.run(new_app(), http_port)
}
fn new_app() &App {
mut app := &App{}
os.execute_or_panic('v -b wasm -os browser mandelbrot.wasm.v')
app.mount_static_folder_at(os.resource_abs_path('./'), '/')
return app
}
@['/'; get]
pub fn (mut app App) controller_mandelbrot() !vweb.Result {
file := os.read_file('mandelbrot.html') or { panic(err) }
return app.html(file)
}

View file

@ -7,21 +7,24 @@
<title>V Mandelbrot WebAssembly Example</title> <title>V Mandelbrot WebAssembly Example</title>
</head> </head>
<body> <body>
<p>Below you should see the picture of the Mandelbrot set,
<br>calculated in WASM, and shown in a Canvas element.</p>
<canvas <canvas
id="canvas" id="canvas"
width="200" width="400"
height="200" height="400"
style="width: 100%; height: 100%; image-rendering: crisp-edges" style="image-rendering: crisp-edges"
></canvas> ></canvas>
<script> <script>
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.font = "32px serif";
ctx.fillText("Please wait...", 100, 250);
var memory; var memory;
function get_string(ptr, len) { function get_string(ptr, len) {
const buf = new Uint8Array(memory.buffer, ptr, len); const buf = new Uint8Array(memory.buffer, ptr, len);
const str = new TextDecoder("utf8").decode(buf); const str = new TextDecoder("utf8").decode(buf);
return str; return str;
} }
@ -43,8 +46,9 @@
WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), { WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {
env: env, env: env,
}).then((res) => { }).then((res) => {
console.log(env.canvas_x())
console.log(env.canvas_y())
memory = res.instance.exports["memory"]; memory = res.instance.exports["memory"];
console.time("main.main"); console.time("main.main");
res.instance.exports["main.main"](); res.instance.exports["main.main"]();
console.timeEnd("main.main"); console.timeEnd("main.main");

View file

@ -4,10 +4,12 @@ fn JS.setpixel(x int, y int, c f64)
// `main` must be public! // `main` must be public!
pub fn main() { pub fn main() {
println('starting main.main...')
max_x := JS.canvas_x() max_x := JS.canvas_x()
max_y := JS.canvas_y() max_y := JS.canvas_y()
middle_x := max_x / 2
println('starting main.main!') middle_y := max_y / 2
mut y := 0 mut y := 0
for y < max_y { for y < max_y {
@ -16,8 +18,8 @@ pub fn main() {
for x < max_x { for x < max_x {
x += 1 x += 1
e := (f64(y) / 50) - 1.5 e := (f64(y) / middle_y) - 1.5
f := (f64(x) / 50) - 1.0 f := (f64(x) / middle_x) - 1.0
mut a := 0.0 mut a := 0.0
mut b := 0.0 mut b := 0.0
@ -36,6 +38,6 @@ pub fn main() {
JS.setpixel(x, y, c) JS.setpixel(x, y, c)
} }
} }
// TODO: remove the need for panic here:
panic('reached the end!') panic('reached the end of main.main')
} }

View file

@ -0,0 +1,22 @@
module main
import vweb
import os
struct App {
vweb.Context
}
fn main() {
os.chdir(os.dir(@FILE))!
cmd := '${os.quoted_path(@VEXE)} -b wasm -os browser mandelbrot.wasm.v'
println('>> compiling mandelbrot.wasm.v, using: ${cmd}')
os.execute_or_panic(cmd)
mut app := App{}
app.mount_static_folder_at(os.resource_abs_path('.'), '/')
vweb.run(app, 3001)
}
pub fn (mut app App) index() vweb.Result {
return app.html(os.read_file('mandelbrot.html') or { '' })
}