Cleanup

example/boxes.odin

@@ -83,7 +83,7 @@ boxes_frame :: proc(delta: f32) {
 	// Clear the canvas AND the depth buffer.
 	gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
 
-	rotation += 0.01 * delta * (window_size.yx / 2 - mouse_pos.yx) / window_size.yx
+	rotation -= 0.01 * delta * mouse_rel.yx
 
 	mat: Mat4 = 1
 	mat *= glm.mat4PerspectiveInfinite(

example/camera.odin

@@ -99,16 +99,15 @@ camera_frame :: proc(delta: f32) {
 	camera_mat *= mat4_translate({0, 0, 800 - 700 * (scale/1.2)})
 	camera_mat = glm.inverse_mat4(camera_mat)
 
-	view_mat: Mat4 = 1
-	view_mat = glm.mat4PerspectiveInfinite(
+	view_mat := glm.mat4PerspectiveInfinite(
 		fovy   = radians(80),
 		aspect = aspect_ratio,
 		near   = 1,
 	)
 	view_mat *= camera_mat
 
-	rotation  += 0.01 * delta * (window_size.x / 2 - mouse_pos.x) / window_size.x
-	elevation := 160 + 300 * (window_size.y / 2 - mouse_pos.y) / window_size.y
+	rotation  += 0.01 * delta * mouse_rel.x
+	elevation := 300 * -(mouse_rel.y - 0.5)
 
 	cube_pos: Vec
 	cube_pos.y = elevation
@@ -119,8 +118,8 @@ camera_frame :: proc(delta: f32) {
 		/* Draw pyramid looking at the cube */
 
 		angle := 2*PI * f32(i)/f32(AMOUNT)
-		x: f32 = RADIUS * cos(angle)
 		y: f32 = -80
+		x: f32 = RADIUS * cos(angle)
 		z: f32 = RADIUS * sin(angle)
 
 		mat := view_mat

example/pyramid.odin

@@ -50,12 +50,9 @@ to show the front-face.
 }
 
 @(private="file") state: struct {
-	rotation_y: f32,
-	rotation_x: f32,
-	a_position: i32,
-	a_color:    i32,
-	u_matrix:   i32,
-	vao:        VAO,
+	rotation: [2]f32,
+	u_matrix: i32,
+	vao:      VAO,
 }
 
 pyramid_start :: proc(program: gl.Program) {
@@ -64,9 +61,9 @@ pyramid_start :: proc(program: gl.Program) {
 	vao = gl.CreateVertexArray()
 	gl.BindVertexArray(vao)
 
-	a_position = gl.GetAttribLocation (program, "a_position")
-	a_color    = gl.GetAttribLocation (program, "a_color")
-	u_matrix   = gl.GetUniformLocation(program, "u_matrix")
+	a_position := gl.GetAttribLocation (program, "a_position")
+	a_color    := gl.GetAttribLocation (program, "a_color")
+	u_matrix    = gl.GetUniformLocation(program, "u_matrix")
 
 	gl.EnableVertexAttribArray(a_position)
 	gl.EnableVertexAttribArray(a_color)
@@ -94,8 +91,7 @@ pyramid_frame :: proc(delta: f32) {
 	gl.ClearColor(0, 0.01, 0.02, 0)
 	gl.Clear(gl.COLOR_BUFFER_BIT)
 
-	rotation_y += 0.01 * delta * (window_size.x / 2 - mouse_pos.x) / window_size.x
-	rotation_x += 0.01 * delta * (window_size.y / 2 - mouse_pos.y) / window_size.y
+	rotation -= 0.01 * delta * mouse_rel.yx
 
 	mat := glm.mat4Ortho3d(
 		left   = 0,
@@ -107,8 +103,8 @@ pyramid_frame :: proc(delta: f32) {
 	)
 	mat *= glm.mat4Translate(vec2_to_vec3(mouse_pos - canvas_pos))
 	mat *= glm.mat4Scale(scale*2 + 0.4)
-	mat *= mat4_rotate_y(rotation_y)
-	mat *= mat4_rotate_x(-rotation_x)
+	mat *= mat4_rotate_y(-rotation.y)
+	mat *= mat4_rotate_x(rotation.x)
 	mat *= glm.mat4Translate({0, -H / 2, 0})
 
 	gl.UniformMatrix4fv(u_matrix, mat)

example/rectangle.odin

@@ -28,11 +28,9 @@ import gl "../wasm/webgl"
 }
 
 @(private="file") state: struct {
-	rotation:   f32,
-	a_position: i32,
-	a_color:    i32,
-	u_matrix:   i32,
-	vao:        VAO,
+	rotation: f32,
+	u_matrix: i32,
+	vao:      VAO,
 }
 
 rectangle_start :: proc(program: gl.Program) {
@@ -46,9 +44,9 @@ rectangle_start :: proc(program: gl.Program) {
 	vao = gl.CreateVertexArray()
 	gl.BindVertexArray(vao) // need to bind VAO before binding buffers
 
-	a_position = gl.GetAttribLocation (program, "a_position")
-	a_color    = gl.GetAttribLocation (program, "a_color")
-	u_matrix   = gl.GetUniformLocation(program, "u_matrix")
+	a_position := gl.GetAttribLocation (program, "a_position")
+	a_color    := gl.GetAttribLocation (program, "a_color")
+	u_matrix    = gl.GetUniformLocation(program, "u_matrix")
 
 	gl.EnableVertexAttribArray(a_position)
 	gl.EnableVertexAttribArray(a_color)
@@ -74,7 +72,7 @@ rectangle_frame :: proc(delta: f32) {
 	gl.ClearColor(0, 0.01, 0.02, 0)
 	gl.Clear(gl.COLOR_BUFFER_BIT)
 
-	rotation += 0.01 * delta * (window_size.x / 2 - mouse_pos.x) / window_size.x
+	rotation -= 0.01 * delta * mouse_rel.x
 
 	mat: Mat3 = 1
 	mat *= mat3_projection(canvas_size)

example/setup.js

@@ -150,7 +150,7 @@ const dpr = window.devicePixelRatio || 1
 
 function updateCanvasSize() {
 	const rect = canvas.getBoundingClientRect()
-	canvas.width = rect.width * dpr
+	canvas.width  = rect.width * dpr
 	canvas.height = rect.height * dpr
 	exports.on_window_resize(
 		window.innerWidth,

example/setup.odin

@@ -12,6 +12,7 @@ canvas_pos:  [2]f32
 canvas_size: [2]f32
 window_size: [2]f32
 mouse_pos:   [2]f32
+mouse_rel:   [2]f32 // Relative mouse position -0.5 to 0.5
 dpr: f32
 aspect_ratio: f32
 
@@ -113,6 +114,7 @@ main :: proc() {
 
 on_mouse_move :: proc(e: dom.Event) {
 	mouse_pos = cast_vec2(f32, e.data.mouse.client)
+	mouse_rel = (mouse_pos - window_size / 2) / window_size
 }
 on_wheel :: proc(e: dom.Event) {
 	scale -= f32(e.data.wheel.delta.y) * 0.001

main.js

@@ -7,17 +7,17 @@ TODO:
 
 */
 
-import * as fs            from "node:fs"
-import * as fsp           from "node:fs/promises"
-import * as path          from "node:path"
-import * as url           from "node:url"
-import * as http          from "node:http"
-import * as process       from "node:process"
-import * as child_process from "node:child_process"
-import * as chokidar      from "chokidar"
-import * as ws            from "ws"
-import * as rollup        from "rollup"
-import * as swc           from "@swc/core"
+import fs            from "node:fs"
+import fsp           from "node:fs/promises"
+import path          from "node:path"
+import url           from "node:url"
+import http          from "node:http"
+import process       from "node:process"
+import child_process from "node:child_process"
+import * as chokidar from "chokidar"
+import * as ws       from "ws"
+import * as rollup   from "rollup"
+import * as swc      from "@swc/core"
 
 import {
 	DIST_DIRNAME, CONFIG_FILENAME, HTTP_PORT, MESSAGE_RELOAD, PACKAGE_DIRNAME, PLAYGROUND_DIRNAME,