学习冒泡排序的可视化实现（一）

学习冒泡排序的可视化实现（一）

使用Rust实现冒泡排序的图形化，需要两个主要组件：Rust编程语言本身来实现冒泡排序算法，以及一个图形库来进行可视化。

使用piston_window库作为图形界面，因为它相对简单易用，适合入门级的项目。

1.确保已经具备rust code environment；

2.创建新项目；

cargo new rust_bubble_sort_visualization
cd rust_bubble_sort_visualization

3.添加依赖项

在项目文件中的cargo.toml文件中添加依赖项；

[dependencies]
piston_window = "0.120.0"

4.初步展示图形化成果

使用cargo run运行代码后可以看见显示的红色矩形图；

extern crate piston_window;
use piston_window::*;

fn bubble_sort(arr: &mut Vec<i32>) {
    let mut n = arr.len();
    let mut swapped = true;
    while swapped {
        swapped = false;
        for i in 1..n {
            if arr[i - 1] > arr[i] {
                arr.swap(i - 1, i);
                swapped = true;
            }
        }
        n -= 1;
    }
}

fn main() {
    let mut window: PistonWindow = WindowSettings::new("Bubble Sort Visualization", [640, 480])
        .exit_on_esc(true)
        .build()
        .unwrap();

    let mut numbers = vec![10, 30, 20, 50, 40];
    bubble_sort(&mut numbers);

    while let Some(e) = window.next() {
        window.draw_2d(&e, |c, g, _| {
            clear([0.0, 0.0, 0.0, 1.0], g); // 清除屏幕

            // 绘制排序后的数组
            for (i, &val) in numbers.iter().enumerate() {
                rectangle([1.0, 0.0, 0.0, 1.0], // 红色
                          [i as f64 * 100.0, 0.0, 50.0, val as f64], // 矩形位置和大小
                          c.transform, g);
            }
        });
    }
}

5.优化图形化展示

• 实时可视化排序过程

  • 将排序逻辑与绘图逻辑更紧密地结合起来。一种方法是，在每次交换元素后立即重新绘制界面。然而，由于Piston的事件循环是连续运行的，直接在排序函数中添加绘图逻辑可能会导致程序逻辑变得复杂。

• 添加用户交互元素

• 分步执行排序：通过全局状态控制排序的每一步执行。例如，您可以使用一个全局变量来记录当前排序的进度，并在每次窗口绘制事件中只执行一次或几次元素比较和交换。

• 处理输入事件：监听键盘或鼠标事件来控制排序的开始、暂停和重置。例如，您可以在按下特定键时开始排序，并在再次按下时暂停。

• 绘制控制按钮：在窗口中绘制表示开始、暂停和重置操作的按钮，并处理点击这些按钮的事件。

实现思路：

定义控制状态变量：在main函数中，定义几个变量来表示排序的状态（是否正在排序、是否暂停等）和一个变量来存储原始数组以方便重置。

let mut is_sorting = false;
let mut is_paused = false;
let original_numbers = numbers.clone();

处理键盘事件：在事件循环中，使用match语句来检测和响应键盘事件。例如，我们可以约定使用“S”键开始排序、“P”键暂停或恢复排序、“R”键重置数组到初始状态。

if let Some(Button::Keyboard(key)) = e.press_args() {
    match key {
        Key::S => {
            is_sorting = true;
            is_paused = false;
        },
        Key::P => {
            if is_sorting {
                is_paused = !is_paused;
            }
        },
        Key::R => {
            numbers = original_numbers.clone();
            is_sorting = false;
            is_paused = false;
            n = total_numbers;
        },
        _ => {}
    }
}

调整排序逻辑以响应状态变量：在绘制循环中，根据is_sorting和is_paused变量的值来决定是否执行排序步骤。如果is_sorting为true且is_paused为false，则执行一步排序操作。

if is_sorting && !is_paused && n > 1 {
    let mut swapped = false;
    for i in 1..n {
        if numbers[i - 1] > numbers[i] {
            numbers.swap(i - 1, i);
            swapped = true;
            break; // 在每次交换之后退出循环以重新绘制
        }
    }
    if !swapped {
        n -= 1;
    }
    if n <= 1 {
        is_sorting = false; // 排序完成
    }
}

完整代码：

extern crate piston_window;
use piston_window::*;

fn main() {
    let mut window: PistonWindow = WindowSettings::new("Bubble Sort Visualization", [640, 480])
        .exit_on_esc(true)
        .build()
        .unwrap();

    let mut numbers = vec![10, 30, 20, 50, 40];
    let original_numbers = numbers.clone(); // 保存原始数组以便重置
    let mut is_sorting = false;
    let mut is_paused = false;
    let mut i = 0;
    let mut n = numbers.len();

    while let Some(e) = window.next() {
        // 处理键盘事件
        if let Some(Button::Keyboard(key)) = e.press_args() {
            match key {
                Key::S => { // 开始排序
                    is_sorting = true;
                    is_paused = false;
                },
                Key::P => { // 暂停/恢复排序
                    if is_sorting {
                        is_paused = !is_paused;
                    }
                },
                Key::R => { // 重置数组和状态
                    numbers = original_numbers.clone();
                    is_sorting = false;
                    is_paused = false;
                    i = 0;
                    n = numbers.len();
                },
                _ => {}
            }
        }

        // 根据状态执行排序逻辑
        if is_sorting && !is_paused && i < n - 1 {
            for j in 0..n-i-1 {
                if numbers[j] > numbers[j+1] {
                    numbers.swap(j, j+1);
                    break; // 在每次交换之后退出循环以重新绘制
                }
            }
            i += 1;
        } else if i >= n - 1 {
            i = 0; // 重置i以循环排序过程
        }

        window.draw_2d(&e, |c, g, _| {
            clear([0.0, 0.0, 0.0, 1.0], g); // 清除屏幕

            // 绘制数组
            for (i, &val) in numbers.iter().enumerate() {
                rectangle([1.0, 0.0, 0.0, 1.0], // 红色
                          [i as f64 * 100.0, 480.0 - val as f64 * 10.0, 50.0, val as f64 * 10.0], // 矩形位置和大小
                          c.transform, g);
            }
        });
    }
}

6.整体优化

将冒泡排序逻辑抽象成独立函数：这样做可以提高代码的可读性和可维护性。
增加枚举来管理程序状态：使用枚举替代布尔变量来控制排序状态，以便更清晰地管理不同的程序状态。

extern crate piston_window;
use piston_window::*;

enum SortState {
    Idle,
    Sorting,
    Paused,
}

fn bubble_sort_step(numbers: &mut Vec<i32>, n: &mut usize) -> bool {
    let mut swapped = false;
    for i in 0..*n-1 {
        if numbers[i] > numbers[i+1] {
            numbers.swap(i, i+1);
            swapped = true;
            break; // 为了可视化，只进行一次交换
        }
    }
    if !swapped {
        *n = 0; // 如果没有发生交换，则排序完成
    }
    swapped
}

fn main() {
    let mut window: PistonWindow = WindowSettings::new("Bubble Sort Visualization", [640, 480])
        .exit_on_esc(true)
        .build()
        .unwrap();

    let mut numbers = vec![10, 30, 20, 50, 40];
    let original_numbers = numbers.clone();
    let mut sort_state = SortState::Idle;
    let mut n = numbers.len();

    while let Some(e) = window.next() {
        // 处理键盘事件
        if let Some(Button::Keyboard(key)) = e.press_args() {
            match key {
                Key::S => sort_state = SortState::Sorting,
                Key::P => match sort_state {
                    SortState::Sorting => sort_state = SortState::Paused,
                    SortState::Paused => sort_state = SortState::Sorting,
                    _ => {},
                },
                Key::R => {
                    numbers = original_numbers.clone();
                    sort_state = SortState::Idle;
                    n = numbers.len();
                },
                _ => {}
            }
        }

        // 根据状态执行排序逻辑
        match sort_state {
            SortState::Sorting => {
                if n > 0 {
                    bubble_sort_step(&mut numbers, &mut n);
                } else {
                    sort_state = SortState::Idle; // 排序完成
                }
            },
            _ => {}
        }

        window.draw_2d(&e, |c, g, _| {
            clear([0.0, 0.0, 0.0, 1.0], g); // 清除屏幕

            // 绘制数组
            for (i, &val) in numbers.iter().enumerate() {
                rectangle([1.0, 0.0, 0.0, 1.0], // 红色
                          [i as f64 * 100.0, 480.0 - val as f64 * 10.0, 50.0, val as f64 * 10.0], // 矩形位置和大小
                          c.transform, g);
            }
        });
    }
}

增加缓步执行的功能，使查看变化更加清晰：

extern crate piston_window;
use piston_window::*;

use std::time::{Duration, Instant};

enum SortState {
    Idle,
    Sorting,
    Paused,
}

fn bubble_sort_step(numbers: &mut Vec<i32>, n: &mut usize, last_swap_time: &mut Instant, delay: Duration) -> bool {
    if last_swap_time.elapsed() >= delay {
        let mut swapped = false;
        for i in 0..*n-1 {
            if numbers[i] > numbers[i+1] {
                numbers.swap(i, i+1);
                *last_swap_time = Instant::now(); // 更新交换时间
                swapped = true;
                break; // 为了可视化，只进行一次交换
            }
        }
        if !swapped {
            *n = 0; // 如果没有发生交换，则排序完成
        }
        swapped
    } else {
        false // 如果未达到延迟时间，不执行交换
    }
}

fn main() {
    let mut window: PistonWindow = WindowSettings::new("Bubble Sort Visualization", [640, 480])
        .exit_on_esc(true)
        .build()
        .unwrap();

    let mut numbers = vec![10, 30, 20, 50, 40];
    let original_numbers = numbers.clone();
    let mut sort_state = SortState::Idle;
    let mut n = numbers.len();
    let mut last_swap_time = Instant::now(); // 记录上次交换的时间
    let delay = Duration::from_millis(500); // 设置延迟时间为500毫秒

    while let Some(e) = window.next() {
        if let Some(Button::Keyboard(key)) = e.press_args() {
            match key {
                Key::S => {
                    if matches!(sort_state, SortState::Idle) || matches!(sort_state, SortState::Paused) {
                        sort_state = SortState::Sorting;
                    }
                },
                Key::P => {
                    if matches!(sort_state, SortState::Sorting) {
                        sort_state = SortState::Paused;
                    }
                },
                Key::R => {
                    numbers = original_numbers.clone();
                    sort_state = SortState::Idle;
                    n = numbers.len();
                    last_swap_time = Instant::now(); // 重置交换时间
                },
                _ => {}
            }
        }

        if matches!(sort_state, SortState::Sorting) {
            bubble_sort_step(&mut numbers, &mut n, &mut last_swap_time, delay);
        }

        window.draw_2d(&e, |c, g, _| {
            clear([0.0, 0.0, 0.0, 1.0], g); // 清除屏幕

            for (i, &val) in numbers.iter().enumerate() {
                rectangle([1.0, 0.0, 0.0, 1.0], // 红色
                          [i as f64 * 100.0, 480.0 - val as f64 * 10.0, 50.0, val as f64 * 10.0],
                          c.transform, g);
            }
        });
    }
}

支持大数据量的同时将缓步执行变为可选项，支持按键S开始排序，按键R重置，按键space进行缓步执行，按键p暂停：

extern crate piston_window;
use piston_window::*;

use std::time::{Duration, Instant};

#[derive(PartialEq)] // 为了能够使用 == 操作符
enum SortState {
    Idle,
    Sorting,
    Paused,
    Step,
}

fn bubble_sort_step(numbers: &mut Vec<i32>, n: &mut usize, last_swap_time: &mut Instant, delay: Duration) -> bool {
    if last_swap_time.elapsed() >= delay {
        let mut swapped = false;
        for i in 0..*n - 1 {
            if numbers[i] > numbers[i + 1] {
                numbers.swap(i, i + 1);
                *last_swap_time = Instant::now(); // 更新交换时间
                swapped = true;
                break; // 为了可视化，只进行一次交换
            }
        }
        if !swapped {
            *n = 0; // 如果没有发生交换，则排序完成
        }
        swapped
    } else {
        false // 如果未达到延迟时间，不执行交换
    }
}

fn main() {
    let mut window: PistonWindow = WindowSettings::new("Bubble Sort Visualization", [1280, 720])
        .exit_on_esc(true)
        .build()
        .unwrap();

    let original_numbers = vec![10, 5, 3, 8, 2, 6, 4, 7, 9, 1, 55, 23, 12, 34, 11, 22, 33, 44]; // 初始数列
    let mut numbers = original_numbers.clone(); // 数列的工作副本
    let mut n = numbers.len();
    let mut last_swap_time = Instant::now();
    let delay = Duration::from_millis(10);
    let mut sort_state = SortState::Idle;

    while let Some(e) = window.next() {
        // 处理按键事件
        if let Some(Button::Keyboard(key)) = e.press_args() {
            match key {
                Key::S => {
                    if matches!(sort_state, SortState::Idle) || matches!(sort_state, SortState::Paused) {
                        sort_state = SortState::Sorting;
                    }
                },
                Key::P => {
                    if matches!(sort_state, SortState::Sorting) {
                        sort_state = SortState::Paused;
                    }
                },
                Key::Space => { // 处理空格键
                    if matches!(sort_state, SortState::Sorting) {
                        // 如果在排序中，按下空格键暂停排序
                        sort_state = SortState::Paused;
                    } else if matches!(sort_state, SortState::Paused) {
                        // 如果已暂停，按下空格键执行单步排序
                        if bubble_sort_step(&mut numbers, &mut n, &mut last_swap_time, delay) {
                            // 如果执行了交换操作，则继续保持暂停状态等待下一步
                            sort_state = SortState::Paused;
                        } else {
                            // 如果没有执行交换（排序完成），则切换到Idle状态
                            sort_state = SortState::Idle;
                        }
                    }
                },
                Key::R => {
                    numbers = original_numbers.clone();
                    sort_state = SortState::Idle;
                    n = numbers.len();
                    last_swap_time = Instant::now(); // 重置交换时间
                },
                _ => {}
            }
        }


        // 根据当前状态进行排序或暂停
        if sort_state == SortState::Sorting {
            if !bubble_sort_step(&mut numbers, &mut n, &mut last_swap_time, delay) && n == 0 {
                sort_state = SortState::Idle; // 排序完成，回到空闲状态
            }
        }

        window.draw_2d(&e, |c, g, _| {
            clear([0.0, 0.0, 0.0, 1.0], g); // 清除背景

            let max_number = *numbers.iter().max().unwrap() as f64;
            let rect_width = (1280.0 / numbers.len() as f64).floor();
            for (i, &number) in numbers.iter().enumerate() {
                let rect_height = (720.0 * (number as f64 / max_number)).floor(); // 根据数值大小动态调整高度
                rectangle([1.0, 0.0, 0.0, 1.0], // 红色矩形
                          [i as f64 * rect_width, 720.0 - rect_height, rect_width, rect_height], // 矩形位置和大小
                          c.transform,
                          g);
            }
        });
    }
}