The

animation.odin

@@ -1,6 +1,7 @@
 package main
 
 import rl "libraries/raylib"
+import "core:math"
 import "core:math/ease"
 import "core:math/linalg"
 import "core:slice"
@@ -13,10 +14,10 @@ RectangleCorners :: struct {tl, tr, br, bl: v2}
 
 rectangle_corners_from_rect :: proc "contextless" (rect: rect2) -> RectangleCorners {
 	return {
-		tl = {rect.x, rect.y},
+		{rect.x, rect.y},
-		tr = {rect.x + rect.width, rect.y},
+		{rect.x + rect.width, rect.y},
-		bl = {rect.x + rect.width, rect.y + rect.height},
+		{rect.x + rect.width, rect.y + rect.height},
-		br = {rect.x, rect.y + rect.height}
+		{rect.x, rect.y + rect.height}
 	}
 }
 
@@ -29,13 +30,22 @@ rectangle_corners_transform_mat3 :: proc "contextless" (corners: RectangleCorner
 	}
 }
 
+rectangle_corners_lerp :: proc "contextless" (a, b: RectangleCorners, t: f32) -> RectangleCorners {
+	return {
+		linalg.lerp(a.tl, b.tl, t),
+		linalg.lerp(a.tr, b.tr, t),
+		linalg.lerp(a.bl, b.bl, t),
+		linalg.lerp(a.br, b.br, t),
+	}
+}
+
 rectangle_corners_transform_mat2 :: proc "contextless" (corners: RectangleCorners, transform: mat2) -> RectangleCorners {
 	return {corners.tl * transform, corners.tr * transform, corners.br * transform, corners.bl * transform}
 }
 
 draw_animation_rectangle_corners :: proc(corners: RectangleCorners, color: rl.Color) {
 	rect := rect_from_corners(corners.tl, corners.tr, corners.br, corners.bl)
-	rl.DrawRectangleRec(rect, {**color.rgb, color.a << 1})
+	rl.DrawRectangleRec(rect, {**color.rgb, color.a >> 1})
 	rl.DrawRectangleLinesEx(rect, 2, color)
 }
 
@@ -54,12 +64,11 @@ AnimationShapes :: struct {
 
 Animation :: struct {
 	matrices: []f32,
-	matrix_index: int,
+	matrix_index: f32,
 	matrix_count: int,
 	matrix_type: AnimationMatrixType,
 	shapes: AnimationShapes,
 	ease: ease.Ease,
-	state: AnimationState,
 	type: AnimationType,
 }
 
@@ -79,13 +88,6 @@ AnimationType :: enum {
 	Rectangle,
 }
 
-AnimationState :: enum {
-	Ready,
-	Playing,
-	Paused,
-	Finished,
-}
-
 animation_init :: proc(animation: ^Animation, matrices: []f32) {
 	animation^ = {
 		ease = .Cubic_Out,
@@ -99,39 +101,44 @@ animation_init :: proc(animation: ^Animation, matrices: []f32) {
 	}
 }
 
-animation_play :: proc(animation: ^Animation) {
-
-}
-
 animation_reset :: proc(animation: ^Animation) {
-
+	animation.matrix_index = 0.0
 }
 
-animation_pause :: proc(animation: ^Animation) {
+animation_update :: proc(animation: ^Animation, speed: f32) {
-
+	animation.matrix_index = min(animation.matrix_index + speed, f32(animation.matrix_count))
 }
 
-animation_update :: proc(animation: ^Animation, matrices: []mat3) {
+animation_is_finished :: proc(animation: Animation) -> bool {
-
+	return animation.matrix_index == f32(animation.matrix_count)
 }
 
-animation_draw :: proc(animation: Animation) {
+animation_draw :: proc(animation: Animation, global_transform: mat3) {
 	switch animation.type {
 	case .Rectangle:
 		shape := animation.shapes.rectangle
-		transformation := linalg.identity(mat3)
+		transform := linalg.identity(mat3)
 		previous, next := shape.origin, shape.origin
 		color_origin := cast([4]f32)(ANIMATION_COLOR_ORIGIN)
 		color_end := cast([4]f32)(ANIMATION_COLOR_END)
-		draw_animation_rectangle_corners(next, ANIMATION_COLOR_ORIGIN)
+		draw_animation_rectangle_corners(rectangle_corners_transform_mat3(next, global_transform), ANIMATION_COLOR_ORIGIN)
 
 		matrices := slice.reinterpret([]mat3, animation.matrices)
-		for m, i in matrices {
+		for i in 0..<animation.matrix_count {
-			progress := f32(i + 1) / f32(len(animation.matrices))
+			animation_progress := f32(i + 1) / f32(animation.matrix_count)
-			transformation *= m
+			transform *= matrices[i]
 			previous = next
-			next := rectangle_corners_transform_mat3(previous, transformation)
+			next := rectangle_corners_transform_mat3(previous, transform)
-			draw_animation_rectangle_corners(next, cast(rl.Color)linalg.lerp(color_origin, color_end, progress))
+			color_next := linalg.lerp(color_origin, color_end, animation_progress)
+			draw_animation_rectangle_corners(rectangle_corners_transform_mat3(next, global_transform), cast(rl.Color)color_next)
+
+			if f32(i) == math.floor(animation.matrix_index) {
+				color_previous := linalg.lerp(color_origin, color_end, animation_progress)
+				progress := ease.ease(animation.ease, fract(animation.matrix_index))
+				color := linalg.lerp(color_previous, color_next, progress)
+				corners := rectangle_corners_lerp(previous, next, progress)
+				draw_animation_rectangle_corners(corners, cast(rl.Color)color)
+			}
 		}
 	}
 }
@@ -143,7 +150,3 @@ animation_set_playback_speed :: proc(animation: ^Animation) {
 animation_set_type :: proc(animation: ^Animation, type: AnimationType) {
 	animation.type = type
 }
-
-animation_is_finished :: proc() -> bool {
-	return false
-}

grid.odin

@@ -9,15 +9,19 @@ Grid :: struct {
 	world_position, world_size, offset: v2,
 }
 
-draw_grid :: proc(grid: Grid, text_draw, text_clip: rect2) {
+grid_world_to_grid_matrix :: proc(zoom, offset: v2) -> mat3 {
-	zoom_amount := grid_get_zoom_amount(grid.zoom)
+	zoom_amount := linalg.pow(v2{2.0, 2.0}, zoom) - 1.0
-	world_to_grid_matrix := (
+	return (
 		mat3 {
 			1, 0, 0,
 			0, 1, 0,
-			grid.offset.x, grid.offset.y, 1,
+			offset.x, offset.y, 1,
 		} *
 		linalg.matrix3_scale(v3{**zoom_amount, 1.0}))
+}
+
+draw_grid :: proc(grid: Grid, text_draw, text_clip: rect2) {
+	world_to_grid_matrix := grid_world_to_grid_matrix(grid.zoom, grid.offset)
 	grid_to_world_matrix := linalg.inverse(world_to_grid_matrix)
 	grid_world_br := grid.world_position + grid.world_size
 	grid_color := rl.Color{64, 64, 64, 255}

program.odin

@@ -5,8 +5,6 @@ import ui "libraries/snths_ui"
 import "core:mem"
 import "core:fmt"
 import "core:math/linalg"
-import "core:math/ease"
-import "core:math"
 import "core:strings"
 import "core:os"
 
@@ -176,6 +174,12 @@ ProgramData_DialogState :: struct {
 	input_text_buffers: [DIALOG_STATE_TEXT_INPUT_FIELD_SIZE][DIALOG_STATE_TEXT_INPUT_FIELD_COUNT]byte,
 }
 
+ProgramAnimationState :: enum {
+	Ready,
+	Playing,
+	Paused,
+}
+
 Program :: struct {
 	ui_context: ui.Context,
 	ui_element_focus: ui.ElementId,
@@ -198,6 +202,8 @@ Program :: struct {
 	dialog_type: ProgramDialogType,
 	dialog_data: ProgramData_DialogState,
 	animation: Animation,
+	animation_state: ProgramAnimationState,
+	animation_speed: f32,
 }
 
 float_slice_get_mat3 :: proc(floats: []f32, index: int) -> ^mat3 {
@@ -236,7 +242,7 @@ program_load_project :: proc(program: ^Program, path: string) -> ProjectReadErro
 	for val, i in program.matrix_float_pool[:program.matrix_count * 9] {
 		fmt.bprint(program.matrix_value_string_pool[i][:], val)
 	}
-	animation_update(&program.animation, (cast([^]mat3)(raw_data(program.matrix_float_pool)))[:program.matrix_count])
+	program.animation.matrix_count = program.matrix_count
 	return nil
 }
 
@@ -284,17 +290,16 @@ program_get_master_matrix :: proc() -> mat3 {
 	return master_matrix
 }
 
-program_set_transformation_state :: proc(state: AnimationState) {
+program_set_animation_state :: proc(state: ProgramAnimationState) {
-	if program.animation.state == state do return
+	if program.animation_state == state do return
-	previous_state := program.animation.state
+	previous_state := program.animation_state
-	program.animation.state = state
+	program.animation_state = state
-	switch program.animation.state {
+	switch program.animation_state {
 	case .Ready:
 		animation_reset(&program.animation)
 	case .Playing:
 
 	case .Paused:
-	case .Finished:
 	}
 }
 
@@ -376,7 +381,7 @@ program_update :: proc() {
 				}
 			case .LoadProject:
 			}
-			animation_update(&program.animation, (cast([^]mat3)(raw_data(program.matrix_float_pool)))[:program.matrix_count])
+			program.animation.matrix_count = program.matrix_count
 			program.state = .Normal
 		}
 	}
@@ -386,7 +391,8 @@ program_update :: proc() {
 	grid_text_clip := rect_from_area(v2{matrix_container_br.x, top_bar_container_br.y}, v2{WINDOW_WIDTH, WINDOW_HEIGHT})
 	draw_grid(program.grid, rect_grow(grid_text_clip, -4.0), rect_grow(grid_text_clip, -32.0))
 
-	animation_draw(program.animation)
+	animation_update(&program.animation, 0.01)
+	animation_draw(program.animation, linalg.inverse(grid_world_to_grid_matrix(program.grid.zoom, program.grid.offset)))
 
 	ui_element_focus := program.state == .Normal ? program.ui_element_focus : ui.element_id_invalid()
 	program.ui_element_focus = program_render_ui_and_handle_focus(&program.ui_context, ui_element_focus, program.font_style, ui_elements)
@@ -528,8 +534,8 @@ program_build_workspace_ui :: proc(ctx: ^ui.Context) ->
 
 		play_button_label: cstring
 		button_data = new(UiElementData_Button, context.temp_allocator)
-		switch program.animation.state {
+		switch program.animation_state {
-		case .Ready, .Finished:
+		case .Ready:
 			button_config.label = RAYGUI_ICON_PLAY
 			button_data^ = {type = .StartTransformation}
 		case .Paused:
@@ -566,10 +572,6 @@ program_build_workspace_ui :: proc(ctx: ^ui.Context) ->
 	return
 }
 
-grid_get_zoom_amount :: proc(zoom: v2) -> v2 {
-	return linalg.pow(v2{2.0, 2.0}, zoom) - 1.0
-}
-
 program_handle_mouse_workspace :: proc(mouse_state: MouseState, top_bar_container, matrix_container: ^ui.Element) -> MouseState {
 	mouse := rl.GetMousePosition()
 	mouse_wheel := rl.GetMouseWheelMoveV()
@@ -675,13 +677,16 @@ program_render_ui_and_handle_focus :: proc(ctx: ^ui.Context, focus_element_id: u
 					program.state = .Normal
 				case .StartTransformation:
 					if program.matrix_count > 0 {
-						program.animation.state = .Playing
+						program.animation_state = .Playing
 						animation_reset(&program.animation)
 					}
 				case .PauseTransformation:
-					program.animation.state = .Paused
+					program.animation_state = .Paused
 				case .ResumeTransformation:
-					program.animation.state = .Playing
+					if animation_is_finished(program.animation) {
+						animation_reset(&program.animation)
+					}
+					program.animation_state = .Playing
 				case .ResetTransformation:
 					animation_reset(&program.animation)
 				case .SaveProjectConfirm:
@@ -711,7 +716,7 @@ program_render_ui_and_handle_focus :: proc(ctx: ^ui.Context, focus_element_id: u
 					matrix_move_to(program.matrix_float_pool, program.matrix_value_string_pool, data.target_matrix, data.target_matrix + 1)
 				}
 				if data.type in UiButtonRecalculateFinishGroup {
-					animation_update(&program.animation, (cast([^]mat3)(raw_data(program.matrix_float_pool)))[:program.matrix_count])
+					program.animation.matrix_count = program.matrix_count
 				}
 			}
 		case .Slider:
@@ -724,7 +729,7 @@ program_render_ui_and_handle_focus :: proc(ctx: ^ui.Context, focus_element_id: u
 				focus_element_id = element.id
 			}
 			if value_previous != data.value^ && .UpdateMatrix in data.tag {
-				animation_update(&program.animation, (cast([^]mat3)(raw_data(program.matrix_float_pool)))[:program.matrix_count])
+				program.animation.matrix_count = program.matrix_count
 			}
 		case .InputText:
 			data := cast(^UiElementData_TextInput)element.data