Add 3d plot to example

Author: 38

examples/wasm-demo/src/lib.rs

@@ -3,6 +3,7 @@ use web_sys::HtmlCanvasElement;
 
 mod func_plot;
 mod mandelbrot;
+mod plot3d;
 
 #[global_allocator]
 static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
@@ -44,6 +45,11 @@ impl Chart {
         })
     }
 
+    pub fn plot3d(canvas: HtmlCanvasElement, yaw: f64) -> Result<(), JsValue> {
+        plot3d::draw(canvas, yaw).map_err(|err| err.to_string())?;
+        Ok(())
+    }
+
     /// This function can be used to convert screen coordinates to
     /// chart coordinates.
     pub fn coord(&self, x: i32, y: i32) -> Option<Point> {

examples/wasm-demo/src/mandelbrot.rs

@@ -1,8 +1,8 @@
 use crate::DrawResult;
 use plotters::prelude::*;
+use plotters_canvas::CanvasBackend;
 use std::ops::Range;
 use web_sys::HtmlCanvasElement;
-use plotters_canvas::CanvasBackend;
 
 /// Draw Mandelbrot set
 pub fn draw(element: HtmlCanvasElement) -> DrawResult<impl Fn((i32, i32)) -> Option<(f64, f64)>> {

examples/wasm-demo/src/plot3d.rs

@@ -0,0 +1,41 @@
+use crate::DrawResult;
+use plotters::prelude::*;
+use plotters_canvas::CanvasBackend;
+use web_sys::HtmlCanvasElement;
+
+pub fn draw(canvas: HtmlCanvasElement, yaw: f64) -> DrawResult<()> {
+    let area = CanvasBackend::with_canvas_object(canvas)
+        .unwrap()
+        .into_drawing_area();
+    area.fill(&WHITE)?;
+
+    let x_axis = (-3.0..3.0).step(0.1);
+    let z_axis = (-3.0..3.0).step(0.1);
+
+    let mut chart =
+        ChartBuilder::on(&area).build_cartesian_3d(x_axis.clone(), -3.0..3.0, z_axis.clone())?;
+
+    chart.with_projection(|mut pb| {
+        pb.yaw = yaw;
+        pb.scale = 0.8;
+        pb.into_matrix()
+    });
+
+    chart.configure_axes().draw()?;
+
+    chart.draw_series(SurfaceSeries::<f64, _, f64>::new(
+        x_axis.values(),
+        z_axis.values(),
+        |&x, &z| (x * x + z * z).cos(),
+        &BLUE.mix(0.2),
+    ))?;
+
+    chart.draw_series(LineSeries::new(
+        (-100..100)
+            .map(|y| y as f64 / 40.0)
+            .map(|y| ((y * 10.0).sin(), y, (y * 10.0).cos())),
+        &BLACK,
+    ))?;
+
+    Ok(())
+}

examples/wasm-demo/www/index.html

@@ -24,6 +24,7 @@ <h1>Plotters WebAssembly Demo</h1>
 		    <option value="4">Graph of y=x^4</option>
 		    <option value="5">Graph of y=x^5</option>
 		    <option value="mandelbrot">Mandelbrot Set</option>
+		    <option value="3d-plot">3D Plot Demo</option>
 		</select>
 	    </div>
 	</main>

examples/wasm-demo/www/index.js

@@ -64,9 +64,26 @@ function updatePlot() {
     status.innerText = `Rendering ${selected.innerText}...`;
     chart = null;
     const start = performance.now();
-    chart = (selected.value == "mandelbrot")
-        ? Chart.mandelbrot(canvas)
-        : Chart.power("canvas", Number(selected.value));
+	switch(selected.value) {
+		case "mandelbrot":
+			chart = Chart.mandelbrot(canvas);
+			break;
+		case "3d-plot": {
+				var yaw = 0;
+				var update = function() {
+					if(plotType.selectedOptions[0].value != "3d-plot")
+						return;
+					Chart.plot3d(canvas, yaw);
+					yaw += 3.14 / 200;
+					setTimeout(update, 50);
+				};
+				update();
+			}
+			break;
+		default:
+			Chart.power("canvas", Number(selected.value))
+	}
+
     const end = performance.now();
     status.innerText = `Rendered ${selected.innerText} in ${Math.ceil(end - start)}ms`;
 }