Animation start

program.odin

@@ -4,7 +4,15 @@ import rl "libraries/raylib"
 import ui "libraries/snths_ui"
 import "core:fmt"
 import "core:math/linalg"
-import "core:strconv"
+
+RAYGUI_ICON_PLAY :: "#131#"
+RAYGUI_ICON_PAUSE :: "#132#"
+RAYGUI_ICON_RESET :: "#211#"
+
+TRANSFORMATION_RECTANGLE_COLOR_ORIGIN :: rl.RED
+TRANSFORMATION_RECTANGLE_COLOR_MIDDLE :: rl.MAGENTA
+TRANSFORMATION_RECTANGLE_COLOR_NEXT :: rl.GRAY
+TRANSFORMATION_RECTANGLE_COLOR_LAST :: rl.BLUE
 
 UiContainerType :: enum {
 	Normal,
@@ -41,6 +49,10 @@ UiButtonType :: enum {
 	AddScaleMatrixConfirm,
 	AddRotationMatrixConfirm,
 	ExitDialog,
+	StartTransformation,
+	PauseTransformation,
+	ResumeTransformation,
+	ResetTransformation,
 }
 
 UiElementData_Button :: struct {
@@ -131,6 +143,47 @@ Program :: struct {
 	message_type: ProgramMessageType,
 	dialog_type: ProgramDialogType,
 	dialog_data: ProgramData_DialogState,
+	transformation_target: TransformationTargetData,
+	transformation_state: TransformationState,
+	animation_data: AnimationData,
+}
+
+TransformationState :: enum {
+	Ready,
+	Playing,
+	Paused,
+	Finished,
+}
+
+TransformationTargetType :: enum {
+	Rectangle
+}
+
+TransformationTarget_Rectangle :: struct {
+	tl, tr, br, bl: v2,
+}
+
+draw_transformation_rectangle :: proc(rectangle: TransformationTarget_Rectangle, color: rl.Color) {
+	rect := rect_from_corners(rectangle.tl, rectangle.tr, rectangle.br, rectangle.bl)
+	rl.DrawRectangleRec(rect, rl.Color{**color.rgb, color.a / 2})
+	points := []v2{rectangle.tl, rectangle.tr, rectangle.br, rectangle.bl}
+	for i := 0; i < len(points); i += 1 {
+		rl.DrawLineV(points[i], points[(i + 1) % len(points)], color)
+		rl.DrawCircleV(points[i], 4.0, rl.RED)
+	}
+}
+
+TransformationTargetData :: struct {
+	type: TransformationTargetType,
+	rectangle: TransformationTarget_Rectangle
+}
+
+AnimationData_Rectangle :: struct {
+	origin, middle, next, last: TransformationTarget_Rectangle
+}
+
+AnimationData :: union {
+	AnimationData_Rectangle,
 }
 
 Grid :: struct {
@@ -191,6 +244,29 @@ program_init :: proc(allocator := context.allocator) {
 	program.ui_element_focus = ui.element_id_invalid()
 	ui.init(&program.ui_overlay_context, 200, ui_measure_text, &program.font_style, allocator)
 	program.ui_overlay_element_focus = ui.element_id_invalid()
+
+	animation_rectangle := TransformationTarget_Rectangle {{320.0, 320.0}, {352.0, 320.0}, {352.0, 352.0}, {320.0, 352.0}}
+	program.transformation_target.rectangle = animation_rectangle
+	program.transformation_state = .Ready
+	program.animation_data = AnimationData_Rectangle {
+		origin = animation_rectangle,
+		middle = animation_rectangle,
+		next = animation_rectangle,
+		last = animation_rectangle,
+	}
+}
+
+program_set_transformation_state :: proc(state: TransformationState) {
+	if program.transformation_state == state {
+		return
+	}
+	program.transformation_state = state
+	switch program.transformation_state {
+	case .Ready:
+	case .Playing:
+	case .Paused:
+	case .Finished:
+	}
 }
 
 program_update :: proc() {
@@ -240,6 +316,23 @@ program_update :: proc() {
 	grid_inner_position := rect_get_tl(grid.inner_area)
 	draw_grid(grid.area, {32.0, 32.0}, rl.GRAY)
 
+	switch program.transformation_state {
+	case .Ready:
+		switch v in program.animation_data {
+		case AnimationData_Rectangle:
+			draw_transformation_rectangle(v.last, TRANSFORMATION_RECTANGLE_COLOR_LAST)
+			draw_transformation_rectangle(v.origin, TRANSFORMATION_RECTANGLE_COLOR_ORIGIN)
+		}
+	case .Playing, .Paused, .Finished:
+		switch v in program.animation_data {
+		case AnimationData_Rectangle:
+			draw_transformation_rectangle(v.last, TRANSFORMATION_RECTANGLE_COLOR_LAST)
+			draw_transformation_rectangle(v.next, TRANSFORMATION_RECTANGLE_COLOR_NEXT)
+			draw_transformation_rectangle(v.middle, TRANSFORMATION_RECTANGLE_COLOR_MIDDLE)
+			draw_transformation_rectangle(v.origin, TRANSFORMATION_RECTANGLE_COLOR_ORIGIN)
+		}
+	}
+
 	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)
 
@@ -369,6 +462,28 @@ program_build_workspace_ui :: proc(ctx: ^ui.Context) -> (elements: []ui.Element,
 		button_data^ = {type = .AddRotation}
 		ui.same_line()
 		ui.element(.Button, button_dimensions, button_config, button_data)
+
+		play_button_label: cstring
+		button_data = new(UiElementData_Button, context.temp_allocator)
+		switch program.transformation_state {
+		case .Ready, .Finished:
+			button_config.label = RAYGUI_ICON_PLAY
+			button_data^ = {type = .StartTransformation}
+		case .Paused:
+			button_config.label = RAYGUI_ICON_PLAY
+			button_data^ = {type = .ResumeTransformation}
+		case .Playing:
+			button_config.label = RAYGUI_ICON_PAUSE
+			button_data^ = {type = .PauseTransformation}
+		}
+		ui.same_line()
+		ui.element(.Button, button_dimensions, button_config, button_data)
+
+		button_data = new(UiElementData_Button, context.temp_allocator)
+		button_config.label = RAYGUI_ICON_RESET
+		button_data^ = {type = .ResetTransformation}
+		ui.same_line()
+		ui.element(.Button, button_dimensions, button_config, button_data)
 	}
 	ui.container_end()
 
@@ -484,6 +599,17 @@ program_render_ui_and_handle_focus :: proc(ctx: ^ui.Context, focus_element_id: u
 					program.state = .Normal
 				case .ExitDialog:
 					program.state = .Normal
+				case .StartTransformation:
+					if program.matrix_count > 0 {
+						program.transformation_state = .Playing
+						// TOOD (synthas): Reset to initial transformation values
+					}
+				case .PauseTransformation:
+					program.transformation_state = .Paused
+				case .ResumeTransformation:
+					program.transformation_state = .Playing
+				case .ResetTransformation:
+					// TODO (synthas): Reset to initial transformation values
 				}
 			}
 		case .Slider:
@@ -560,13 +686,3 @@ ui_mat3 :: proc(mat: []f32, value_strings: []InputFloatField, dimensions: ui.Dim
 		}
 	ui.container_end()
 }
-
-draw_grid :: proc(area: rect2, line_interval: v2, color: rl.Color) {
-	br := rect_get_br(area)
-	for x := area.x; x < br.x; x += line_interval.x {
-		rl.DrawLineV({x, area.y}, {x, br.y}, color)
-	}
-	for y := area.y; y < br.y; y += line_interval.y {
-		rl.DrawLineV({area.x, y}, {br.x, y}, color)
-	}
-}

utils.odin

@@ -20,7 +20,7 @@ write_entire_file :: proc(name: string, data: []byte, truncate := true) -> (succ
 	return _write_entire_file(name, data, truncate)
 }
 
-/// ### RAYLIB TEXT DRAWING ### ///
+/// ### RAYLIB DRAWING UTILS ### ///
 measure_text :: proc(text: cstring, style: FontStyle) -> v2 {
 	return rl.MeasureTextEx(style.font, text, style.size, style.spacing)
 }
@@ -29,6 +29,16 @@ draw_text :: proc(text: cstring, position: v2, style: FontStyle, color: rl.Color
 	rl.DrawTextEx(style.font, text, position, style.size, style.spacing, color)
 }
 
+draw_grid :: proc(area: rect2, line_interval: v2, color: rl.Color) {
+	br := rect_get_br(area)
+	for x := area.x; x < br.x; x += line_interval.x {
+		rl.DrawLineV({x, area.y}, {x, br.y}, color)
+	}
+	for y := area.y; y < br.y; y += line_interval.y {
+		rl.DrawLineV({area.x, y}, {br.x, y}, color)
+	}
+}
+
 TextHalign :: enum {
 	Left,
 	Middle,