Method draw_oscilloscope

examples/visualizer/src/ui.rs:28–86

A basic oscilloscope, using the audio data from the triple buffer node.

(&mut self, ui: &mut Ui)

    // A basic oscilloscope, using the audio data from the triple buffer node.
    fn draw_oscilloscope(&mut self, ui: &mut Ui) {
        const NUM_POINTS: usize = 200;

        let size = ui.available_size();
        let (_id, rect) = ui.allocate_space(size);

        let mut output = self.audio_system.triple_buffer_state.output();
        let Some(data) = output.data() else {
            return;
        };
        let frames = data.frames;

        let mut left_rect = rect;
        left_rect.set_height(left_rect.height() / 2.0);
        let mut right_rect = left_rect;
        right_rect = right_rect.translate(vec2(0.0, left_rect.height()));

        let to_left_rect =
            RectTransform::from_to(Rect::from_x_y_ranges(0.0..=1.0, -1.0..=1.0), left_rect);
        let to_right_rect =
            RectTransform::from_to(Rect::from_x_y_ranges(0.0..=1.0, -1.0..=1.0), right_rect);

        let build_points = |audio_data: &[f32], rect_transform: RectTransform| -> Vec<Pos2> {
            (0..NUM_POINTS)
                .map(|i| {
                    let x = i as f32 / NUM_POINTS as f32;

                    let pos = x * frames as f32;
                    let index = pos.floor() as usize;
                    let fract_index = pos.fract();

                    let s0 = audio_data.get(index).copied().unwrap_or(0.0);
                    let s1 = audio_data.get(index + 1).copied().unwrap_or(0.0);

                    let value = s0 + ((s1 - s0) * fract_index);

                    // Apply a windowing function to make the oscilloscope look
                    // "more interesting".
                    let y = value * (x * PI).sin();

                    rect_transform * pos2(x, y)
                })
                .collect()
        };

        let left_points = build_points(data.buffer.channel_slice(0).unwrap(), to_left_rect);
        let right_points = build_points(data.buffer.channel_slice(1).unwrap(), to_right_rect);

        let color = if ui.style().visuals.dark_mode {
            egui::Color32::GREEN
        } else {
            egui::Color32::DARK_GREEN
        };

        ui.painter().extend([
            epaint::Shape::line(left_points, PathStroke::new(2.0f32, color)),
            epaint::Shape::line(right_points, PathStroke::new(2.0f32, color)),
        ]);