Circle to Triangle Animation lobster

circle-to-triangle-animation.lobster

import std
import vec
import color
import gl

// Window dimensions
let sw = 700
let sh = 700

// Center coordinates
let center_x = float(sw) / 2.0
let center_y = float(sh) / 2.0

// Total duration of the morph animation (in frames)
let animation_duration = 120.0

// Font settings for displaying text (not used in rendering currently)
let font_file="/home/izot/.local/share/fonts/InputMono-Regular.ttf"
let font_size=26

// Animation state variables
var current_step = 0.0
var direction = 1.0

// Initialize window
fatal(gl.window("Animated Transition from Circle to Triangle", sw, sh))

// Load font; crash if it fails
check(gl.set_font_name(font_file) and gl.set_font_size(font_size), "can\'t load font!")

// Set fixed frame rate (60 FPS)
gl.set_target_delta_time(1.0 / 60.0)

// Calculate circle radius based on morph factor (1.0 → radius 0, 0.0 → full radius)
def get_scaled_radius(shape_morph, max_radius = 100.0):
    return max_radius * (1.0 - (shape_morph * 2.0))

// Generate triangle vertex positions based on morph factor
def get_scaled_triangle_size(shape_morph, max_radius = 100.0):
    let triangle_size = max_radius * ((shape_morph - 0.5) * 2.0)

    // Top vertex
    let p1 = float2 { center_x, center_y - triangle_size }

    // Bottom left vertex
    let p2 = float2 { center_x - triangle_size * sin(60.0), center_y + triangle_size * cos(60.0) }

    // Bottom right vertex
    let p3 = float2 { center_x + triangle_size * sin(60.0), center_y + triangle_size * cos(60.0) }

    return [p1, p2, p3]

// Main render loop
while gl.frame() and gl.button("escape") != 1:
    // Clear screen with white background
    gl.clear(color_white)

    // Compute normalized time [0.0 - 1.0] for animation progress
    let t = current_step / animation_duration

    // Interpolate color from blue to red
    let start_color = color_blue
    let end_color = color_red
    let current_color = lerp(start_color, end_color, t)
    gl.color(current_color)

    // Use t directly as morph value
    let shape_morph = t

    // If morphing is in first half, draw a shrinking circle
    if shape_morph < 0.5:
        gl.translate (float2 {center_x, center_y}):
            gl.circle(get_scaled_radius(shape_morph), 60)
    else:
        // Second half: draw expanding triangle
        gl.polygon(get_scaled_triangle_size(shape_morph))

        // Optional: draw a very small circle inside the triangle for visual flair
        // gl.translate (float2 {center_x, center_y}):
        //     gl.circle(get_scaled_radius(shape_morph), 1)

    // Advance animation step
    current_step += direction

    // Reverse direction at bounds to loop animation back and forth
    if current_step >= animation_duration or current_step <= 0.0:
        direction *= -1.0
        current_step = clamp(current_step, 0.0, animation_duration)