Compare commits

...
2 Commits
Author SHA1 Message Date
survandClaude Sonnet 5 783e3e1f30 feat: add keyboard shortcuts for pan/zoom/iterations/AA
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-19 20:50:46 +02:00
survandClaude Sonnet 5 0f01a16d60 feat: add fractal info and help overlays
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-19 20:50:40 +02:00
+323
View File
@@ -67,6 +67,34 @@ fn kind_label(kind: FractalKind) -> &'static str {
.unwrap_or("Mandelbrot") .unwrap_or("Mandelbrot")
} }
/// The iteration formula for a kind, in human-readable notation (mirrors the
/// doc comments on `FractalKind`'s variants). `power` is only used by
/// Multibrot.
fn kind_formula(kind: FractalKind, power: u32) -> String {
match kind {
FractalKind::Mandelbrot => "z → z² + c".to_string(),
FractalKind::BurningShip => "z → (|Re z| + i|Im z|)² + c".to_string(),
FractalKind::Tricorn => "z → conj(z)² + c".to_string(),
FractalKind::Multibrot => format!("z → z^{power} + c"),
FractalKind::Celtic => "z → |Re(z²)| + i·Im(z²) + c".to_string(),
FractalKind::Perpendicular => "z → (x² − y²) − 2x|y|i + c".to_string(),
FractalKind::Buffalo => "z → |Re(z²)| − i|Im(z²)| + c".to_string(),
FractalKind::Phoenix => "z → z² + c + p·z_prev".to_string(),
FractalKind::Lambda => "z → λ·z(1 − z)".to_string(),
}
}
/// Shorten a long decimal string for compact display, keeping the leading
/// (most significant) digits and marking the cut with "…".
fn truncate_digits(s: &str, max_len: usize) -> String {
if s.chars().count() <= max_len {
s.to_string()
} else {
let head: String = s.chars().take(max_len).collect();
format!("{head}…")
}
}
type JuliaPreset = (&'static str, f64, f64, u32, Option<(f64, f64)>); type JuliaPreset = (&'static str, f64, f64, u32, Option<(f64, f64)>);
/// Nice-looking Julia constants offered as presets. /// Nice-looking Julia constants offered as presets.
@@ -303,6 +331,11 @@ pub struct FractalApp {
/// Whether the app is in fullscreen (browser Fullscreen API on web, viewport /// Whether the app is in fullscreen (browser Fullscreen API on web, viewport
/// fullscreen on native). Kept in sync with the real state each frame. /// fullscreen on native). Kept in sync with the real state each frame.
fullscreen: bool, fullscreen: bool,
/// Whether the "Fractal Info" popup (formula/constants/zoom for the
/// current view) is open.
info_open: bool,
/// Whether the Help window (about + mouse/touch controls) is open.
help_open: bool,
/// Time-based animation of colours / Julia c / Phoenix p / zoom. /// Time-based animation of colours / Julia c / Phoenix p / zoom.
anim: AnimState, anim: AnimState,
@@ -452,6 +485,8 @@ impl FractalApp {
buddha_accumulate: true, buddha_accumulate: true,
controls_open: true, controls_open: true,
fullscreen: false, fullscreen: false,
info_open: false,
help_open: false,
anim: AnimState::default(), anim: AnimState::default(),
fps: 0.0, fps: 0.0,
fps_frames: 0, fps_frames: 0,
@@ -1127,6 +1162,13 @@ impl FractalApp {
self.fullscreen = !self.fullscreen; self.fullscreen = !self.fullscreen;
self.apply_fullscreen(ui.ctx()); self.apply_fullscreen(ui.ctx());
} }
if ui
.button("Help")
.on_hover_text("About this app, and mouse/touch controls")
.clicked()
{
self.help_open = !self.help_open;
}
// FPS readout. Monospace + fixed width so the number // FPS readout. Monospace + fixed width so the number
// changing doesn't jitter the button row. // changing doesn't jitter the button row.
ui.add( ui.add(
@@ -1145,6 +1187,206 @@ impl FractalApp {
}); });
} }
/// Floating bottom-left overlay: a single button that toggles the
/// "Fractal Info" window. Kept separate from `overlay_buttons` (top-left)
/// so it stays out of the way of the panel toggle / fullscreen controls,
/// but is still reachable even when the controls panel is collapsed.
fn info_button(&mut self, ui: &mut egui::Ui) {
egui::Area::new(egui::Id::new("info_button"))
.anchor(egui::Align2::LEFT_BOTTOM, egui::vec2(8.0, -8.0))
.show(ui.ctx(), |ui| {
egui::Frame::popup(ui.style())
.shadow(egui::Shadow::NONE)
.show(ui, |ui| {
if ui
.button("ⓘ Info")
.on_hover_text("Show details about the current fractal")
.clicked()
{
self.info_open = !self.info_open;
}
});
});
}
/// Window with details about what's currently on screen: formula, active
/// per-kind constants, zoom depth, iteration count. Reads live state, so
/// it stays correct as the user pans/zooms/switches kinds.
fn info_window(&mut self, ctx: &egui::Context) {
let mut open = self.info_open;
egui::Window::new("Fractal Info")
.id(egui::Id::new("info_window"))
.open(&mut open)
.collapsible(false)
.resizable(false)
.anchor(egui::Align2::LEFT_BOTTOM, egui::vec2(8.0, -44.0))
.show(ctx, |ui| {
ui.label(
egui::RichText::new(kind_label(self.kind))
.strong()
.heading(),
);
let mode_label = match self.mode {
FractalMode::Mandelbrot => {
"Mandelbrot mode — parameter space (c varies per pixel, z₀ = 0)"
}
FractalMode::Julia => {
"Julia mode — dynamical plane for a fixed c (z₀ varies per pixel)"
}
};
ui.label(mode_label);
ui.separator();
ui.label(format!("formula: {}", kind_formula(self.kind, self.power)));
if self.mode == FractalMode::Julia {
ui.label(format!("c = {:.6} {:+.6}i", self.julia_c.0, self.julia_c.1));
}
if self.kind == FractalKind::Phoenix {
ui.label(format!(
"p = {:.6} {:+.6}i",
self.phoenix_p.0, self.phoenix_p.1
));
}
if self.kind == FractalKind::Lambda {
ui.label(format!(
"λ = {:.6} {:+.6}i",
self.lambda_l.0, self.lambda_l.1
));
}
ui.separator();
if self.buddhabrot {
ui.label("rendering: Buddhabrot (Monte-Carlo orbit density)");
ui.label(format!(
"sample caps: R {} / G {} / B {}",
self.buddha_r_cap, self.buddha_g_cap, self.buddha_b_cap
));
} else {
ui.label(format!(
"magnification: {}×",
format_magnification(self.view.magnification())
));
ui.label(format!(
"iterations: {}{}",
self.max_iterations,
if self.auto_iterations { " (auto)" } else { "" }
));
ui.label(format!("precision: {} bits", self.view.precision_bits()));
ui.label(format!(
"center re: {}",
truncate_digits(&self.center_re_edit, 24)
));
ui.label(format!(
"center im: {}",
truncate_digits(&self.center_im_edit, 24)
));
}
});
self.info_open = open;
}
/// Help window: what the app does, plus a reference for mouse/touch and
/// keyboard controls.
fn help_window(&mut self, ctx: &egui::Context) {
let mut open = self.help_open;
egui::Window::new("Help")
.id(egui::Id::new("help_window"))
.open(&mut open)
.collapsible(false)
.default_width(360.0)
.show(ctx, |ui| {
egui::ScrollArea::vertical()
.max_height(480.0)
.show(ui, |ui| {
ui.heading("About");
ui.label(
"A deep-zoom fractal explorer. It renders the Mandelbrot set \
and several related fractals (Burning Ship, Tricorn, \
Multibrot, Celtic, Perpendicular, Buffalo, Phoenix, Lambda), \
and can zoom in far beyond what ordinary floating-point math \
allows by using perturbation theory: one very precise \
reference orbit is computed once, and every pixel on screen \
is then rendered cheaply as a small offset from that shared \
orbit.",
);
ui.add_space(4.0);
ui.label(
"Mandelbrot mode plots one point per pixel in parameter space \
(does c escape?). Julia mode fixes c and instead varies the \
starting point z₀ across the plane. Buddhabrot mode switches \
to a different, Monte-Carlo rendering of orbit density \
instead of the ordinary escape-time set.",
);
ui.separator();
ui.heading("Mouse & touch");
egui::Grid::new("help_mouse_grid")
.num_columns(2)
.spacing([12.0, 6.0])
.show(ui, |ui| {
ui.label("Drag");
ui.label("Pan the view");
ui.end_row();
ui.label("Scroll / trackpad");
ui.label("Zoom toward the cursor");
ui.end_row();
ui.label("Pinch (touch)");
ui.label("Zoom toward the gesture center");
ui.end_row();
ui.label("Two-finger drag (touch)");
ui.label("Pan the view");
ui.end_row();
});
ui.separator();
ui.heading("Keyboard");
egui::Grid::new("help_keyboard_grid")
.num_columns(2)
.spacing([12.0, 6.0])
.show(ui, |ui| {
ui.label("Arrow keys");
ui.label("Pan the view");
ui.end_row();
ui.label("Z / S");
ui.label("Zoom in / out toward the center");
ui.end_row();
ui.label("+ / -");
ui.label("Increase / decrease iterations");
ui.end_row();
ui.label("R");
ui.label("Reset to the default view");
ui.end_row();
ui.label("H");
ui.label("Toggle this Help window");
ui.end_row();
ui.label("I");
ui.label("Toggle the Info window");
ui.end_row();
ui.label("A");
ui.label("Toggle antialiasing (2×2)");
ui.end_row();
});
ui.label(
"Shortcuts are ignored while a text field (e.g. the center/zoom \
edit boxes) has focus. Esc / F11 toggle fullscreen via the \
browser or OS, as usual.",
);
ui.separator();
ui.heading("Tips");
ui.label(
"• The controls panel (top-left \"Menu\" button) holds the \
fractal formula, coloring, animation, and export options.\n\
• The bottom-left \"Info\" button shows details about what's \
currently on screen.\n\
• \"Copy link\" (in the panel) encodes the exact view so it \
can be reopened later or sent to someone else.",
);
});
});
self.help_open = open;
}
/// Push the desired fullscreen state to the platform. /// Push the desired fullscreen state to the platform.
#[cfg(not(target_arch = "wasm32"))] #[cfg(not(target_arch = "wasm32"))]
fn apply_fullscreen(&mut self, ctx: &egui::Context) { fn apply_fullscreen(&mut self, ctx: &egui::Context) {
@@ -1760,6 +2002,84 @@ impl FractalApp {
ui.ctx().request_repaint(); ui.ctx().request_repaint();
} }
// Keyboard: arrows pan, z/s zoom in/out, +/- adjust iterations, R
// resets the view, H/I toggle the Help/Info windows. Skipped while a
// text field (e.g. the center/zoom edit boxes) has focus.
if !ui.ctx().egui_wants_keyboard_input() {
let dt = ui.input(|i| i.stable_dt as f64).clamp(0.0, 0.1);
let (left, right, up, down, zoom_in, zoom_out) = ui.input(|i| {
(
i.key_down(egui::Key::ArrowLeft),
i.key_down(egui::Key::ArrowRight),
i.key_down(egui::Key::ArrowUp),
i.key_down(egui::Key::ArrowDown),
i.key_down(egui::Key::Z),
i.key_down(egui::Key::S),
)
});
// Pixels/sec pan speed — matches a brisk mouse drag regardless of
// frame rate. See `pan_pixels`'s screen-space (+x right, +y down)
// convention: Right/Down pan the *camera* right/down, which is
// the opposite delta sign from a drag that would show the same
// content (a drag grabs the canvas; these keys move the camera).
const PAN_SPEED_PX: f64 = 700.0;
let mut dx = 0.0;
let mut dy = 0.0;
if left {
dx += PAN_SPEED_PX * dt;
}
if right {
dx -= PAN_SPEED_PX * dt;
}
if down {
dy += PAN_SPEED_PX * dt;
}
if up {
dy -= PAN_SPEED_PX * dt;
}
if dx != 0.0 || dy != 0.0 {
self.view.pan_pixels(dx, dy, height_px);
interacted = true;
}
// e-folds/sec, same scale as the auto-zoom animation.
const ZOOM_SPEED: f64 = 1.0;
if zoom_in != zoom_out {
let rate = if zoom_in { ZOOM_SPEED } else { -ZOOM_SPEED };
let factor = (-rate * dt).exp();
self.view.zoom_at_pixel(0.0, 0.0, height_px, factor);
interacted = true;
}
if left || right || up || down || zoom_in || zoom_out {
ui.ctx().request_repaint();
}
if ui.input(|i| i.key_pressed(egui::Key::R)) {
self.view = Self::default_view_for(self.mode, self.kind);
interacted = true;
}
if ui.input(|i| i.key_pressed(egui::Key::H)) {
self.help_open = !self.help_open;
}
if ui.input(|i| i.key_pressed(egui::Key::I)) {
self.info_open = !self.info_open;
}
if ui.input(|i| i.key_pressed(egui::Key::A)) {
self.antialias = !self.antialias;
}
if ui.input(|i| i.key_pressed(egui::Key::Plus) || i.key_pressed(egui::Key::Equals)) {
self.auto_iterations = false;
self.max_iterations = ((self.max_iterations as f64 * 1.25).round() as u32)
.clamp(32, MAX_REF_POINTS as u32 - 1);
}
if ui.input(|i| i.key_pressed(egui::Key::Minus)) {
self.auto_iterations = false;
self.max_iterations = ((self.max_iterations as f64 / 1.25).round() as u32)
.clamp(32, MAX_REF_POINTS as u32 - 1);
}
}
if self.buddhabrot { if self.buddhabrot {
// No reference orbit / perturbation machinery: iterate directly in // No reference orbit / perturbation machinery: iterate directly in
// f32 from the live view. Progressive accumulation means this // f32 from the live view. Progressive accumulation means this
@@ -1878,6 +2198,9 @@ impl eframe::App for FractalApp {
// Floating overlay, always reachable (even when the panel is collapsed): // Floating overlay, always reachable (even when the panel is collapsed):
// toggle the panel and toggle fullscreen. Essential on a phone. // toggle the panel and toggle fullscreen. Essential on a phone.
self.overlay_buttons(ui); self.overlay_buttons(ui);
self.info_button(ui);
self.info_window(ui.ctx());
self.help_window(ui.ctx());
if std::mem::take(&mut self.export_requested) { if std::mem::take(&mut self.export_requested) {
self.do_export(frame); self.do_export(frame);