Update box2d exampled and add document title setting from JS window

.sublime/karl2d.sublime-project

@@ -71,6 +71,11 @@
 					"shell_cmd": "odin run . -vet -strict-style -keep-executable",
 					"working_dir": "$project_path/../examples/box2d"
 				},
+				{
+					"name": "box2d (web)",
+					"shell_cmd": "odin run build_web_example -- box2d",
+					"working_dir": "$project_path/../examples"
+				},
 				{
 					"name": "premultiplied_alpha",
 					"shell_cmd": "odin run . -vet -strict-style -keep-executable -debug -define:KARL2D_RENDER_BACKEND=d3d11",

examples/box2d/karl2d_box2d.odin

@@ -3,51 +3,46 @@ package karl2d_box2d_example
 import b2 "vendor:box2d"
 import k2 "../.."
 import "core:math"
-import "core:time"
 import "core:log"
 
-create_box :: proc(world_id: b2.WorldId, pos: b2.Vec2) -> b2.BodyId{
-	body_def := b2.DefaultBodyDef()
-	body_def.type = .dynamicBody
-	body_def.position = pos
-	body_id := b2.CreateBody(world_id, body_def)
-
-	shape_def := b2.DefaultShapeDef()
-	shape_def.density = 1
-	shape_def.material.friction = 0.3
+world_id: b2.WorldId
+time_acc: f32
+circle_body_id: b2.BodyId
+bodies: [dynamic]b2.BodyId
 
-	box := b2.MakeBox(20, 20)
-	box_def := b2.DefaultShapeDef()
-	_ = b2.CreatePolygonShape(body_id, box_def, box)
-
-	return body_id
+GROUND :: k2.Rect {
+	0, 600,
+	1280, 120,
 }
 
 main :: proc() {
 	context.logger = log.create_console_logger()
+	init()
+	run := true
+
+	for run {
+		run = step()
+	}
+
+	shutdown()
+}
+
+init :: proc() {
 	k2.init(1280, 720, "Karl2D + Box2D example")
 
 	b2.SetLengthUnitsPerMeter(40)
 	world_def := b2.DefaultWorldDef()
 	world_def.gravity = b2.Vec2{0, -900}
-	world_id := b2.CreateWorld(world_def)
-	defer b2.DestroyWorld(world_id)
-
-	ground := k2.Rect {
-		0, 600,
-		1280, 120,
-	}
-
+	world_id = b2.CreateWorld(world_def)
+	
 	ground_body_def := b2.DefaultBodyDef()
-	ground_body_def.position = b2.Vec2{ground.x, -ground.y-ground.h}
+	ground_body_def.position = b2.Vec2{GROUND.x, -GROUND.y-GROUND.h}
 	ground_body_id := b2.CreateBody(world_id, ground_body_def)
 
-	ground_box := b2.MakeBox(ground.w, ground.h)
+	ground_box := b2.MakeBox(GROUND.w, GROUND.h)
 	ground_shape_def := b2.DefaultShapeDef()
 	_ = b2.CreatePolygonShape(ground_body_id, ground_shape_def, ground_box)
 
-	bodies: [dynamic]b2.BodyId
-
 	px: f32 = 400
 	py: f32 = -400
 
@@ -72,7 +67,7 @@ main :: proc() {
 	body_def := b2.DefaultBodyDef()
 	body_def.type = .dynamicBody
 	body_def.position = b2.Vec2{0, 4}
-	body_id := b2.CreateBody(world_id, body_def)
+	circle_body_id = b2.CreateBody(world_id, body_def)
 
 	shape_def := b2.DefaultShapeDef()
 	shape_def.density = 1000
@@ -80,48 +75,65 @@ main :: proc() {
 
 	circle: b2.Circle
 	circle.radius = 40
-	_ = b2.CreateCircleShape(body_id, shape_def, circle)
+	_ = b2.CreateCircleShape(circle_body_id, shape_def, circle)
+}
 
-	time_step: f32 = 1.0 / 60
-	sub_steps: i32 = 4
+create_box :: proc(world_id: b2.WorldId, pos: b2.Vec2) -> b2.BodyId{
+	body_def := b2.DefaultBodyDef()
+	body_def.type = .dynamicBody
+	body_def.position = pos
+	body_id := b2.CreateBody(world_id, body_def)
 
-	prev_time := time.now()
+	shape_def := b2.DefaultShapeDef()
+	shape_def.density = 1
+	shape_def.material.friction = 0.3
 
-	time_acc: f32
+	box := b2.MakeBox(20, 20)
+	box_def := b2.DefaultShapeDef()
+	_ = b2.CreatePolygonShape(body_id, box_def, box)
 
-	for !k2.shutdown_wanted() {
-		cur_time := time.now()
-		dt := f32(time.duration_seconds(time.diff(prev_time, cur_time)))
-		prev_time = cur_time
+	return body_id
+}
 
-		time_acc += dt
-		k2.process_events()
-		k2.clear(k2.BLACK)
+step :: proc() -> bool {
+	k2.new_frame()
 
-		k2.draw_rect(ground, k2.RL_RED)
+	dt := k2.get_frame_time()
+	time_acc += dt
+	k2.process_events()
+	k2.clear(k2.GRAY)
 
-		pos := k2.get_mouse_position()
+	k2.draw_rect(GROUND, k2.GREEN)
 
-		b2.Body_SetTransform(body_id, {pos.x, -pos.y}, {})
+	pos := k2.get_mouse_position()
 
-		for time_acc >= time_step {
-			b2.World_Step(world_id, time_step, sub_steps)
-			time_acc -= time_step
-		}
+	b2.Body_SetTransform(circle_body_id, {pos.x, -pos.y}, {})
 
-		for b in bodies {
-			position := b2.Body_GetPosition(b)
-			r := b2.Body_GetRotation(b)
-			a := math.atan2(r.s, r.c)
-			// Y position is flipped because raylib has Y down and box2d has Y up.
-			k2.draw_rect_ex({position.x, -position.y, 40, 40}, {20, 20}, a*(180/3.14), k2.RL_YELLOW)
-		}
+	SUB_STEPS :: 4
+	TIME_STEP :: 1.0 / 60
 
-		k2.draw_circle(pos, 40, k2.RL_MAGENTA)
-		k2.present()
+	for time_acc >= TIME_STEP {
+		b2.World_Step(world_id, TIME_STEP, SUB_STEPS)
+		time_acc -= TIME_STEP
+	}
 
-		free_all(context.temp_allocator)
+	for b in bodies {
+		position := b2.Body_GetPosition(b)
+		r := b2.Body_GetRotation(b)
+		a := math.atan2(r.s, r.c)
+		// Y position is flipped because raylib has Y down and box2d has Y up.
+		k2.draw_rect_ex({position.x, -position.y, 40, 40}, {20, 20}, a*(180/3.14), k2.RL_YELLOW)
 	}
 
+	k2.draw_circle(pos, 40, k2.RL_MAGENTA)
+	k2.present()
+
+	free_all(context.temp_allocator)
+	return !k2.shutdown_wanted()
+}
+
+
+shutdown :: proc() {
+	b2.DestroyWorld(world_id)
 	k2.shutdown()
 }

examples/minimal_web/minimal_web.odin

@@ -5,7 +5,10 @@
 //
 //    odin run build_web_example -- minimal_web
 //
-// The built web application will be in minimal_web/web/build
+// The built web application will be in minimal_web/web/build.
+//
+// This approach of using `odin run build_web_example -- example_folder_name` works for most other
+// examples, except for the non-web `minimal` example.
 package karl2d_minimal_example_web
 
 import k2 "../.."

window_js.odin

@@ -47,6 +47,8 @@ js_init :: proc(
 	s.canvas_id = "webgl-canvas"
 	s.flags = flags
 
+	js.set_document_title(window_title)
+
 	// The browser window probably has some other size than what was sent in.
 	if .Resizable in flags {
 		add_window_event_listener(.Resize, js_event_window_resize)
@@ -86,9 +88,8 @@ js_event_window_resize :: proc(e: js.Event) {
 }
 
 js_event_mouse_move :: proc(e: js.Event) {
-	dpi := js.device_pixel_ratio()
 	append(&s.events, Window_Event_Mouse_Move {
-		position = {f32(e.mouse.client.x) * f32(dpi), f32(e.mouse.client.y) * f32(dpi)},
+		position = {f32(e.mouse.client.x), f32(e.mouse.client.y)},
 	})
 }