Merge branch 'v0.3-pre-devs/3d' into v0.3-pre

Author: 38

Cargo.toml

@@ -61,7 +61,7 @@ default = [
         "image",
         "deprecated_items",  "all_series", "all_elements"
 ]
-all_series = ["area_series", "line_series", "point_series"]
+all_series = ["area_series", "line_series", "point_series", "surface_series"]
 all_elements = ["errorbar", "candlestick", "boxplot", "histogram"]
 
 # Tier 1 Backends
@@ -80,6 +80,7 @@ histogram = []
 area_series = []
 line_series = []
 point_series = []
+surface_series = []
 
 # Font implemnetation
 ttf = ["font-kit", "rusttype", "lazy_static"]

examples/3d-plot.rs

@@ -0,0 +1,47 @@
+use plotters::prelude::*;
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let area = SVGBackend::new("plotters-doc-data/3d-plot.svg", (1024, 760)).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)
+        .caption(format!("3D Plot Test"), ("sans", 20))
+        .build_cartesian_3d(x_axis.clone(), -3.0..3.0, z_axis.clone())?;
+
+    chart.with_projection(|mut pb| {
+        pb.yaw = 0.5;
+        pb.scale = 0.9;
+        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),
+        ))?
+        .label("Surface")
+        .legend(|(x, y)| Rectangle::new([(x + 5, y - 5), (x + 15, y + 5)], BLUE.mix(0.5).filled()));
+
+    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,
+        ))?
+        .label("Line")
+        .legend(|(x, y)| PathElement::new(vec![(x, y), (x + 20, y)], &BLACK));
+
+    chart
+        .configure_series_labels()
+        .border_style(&BLACK)
+        .draw()?;
+    Ok(())
+}

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, pitch: f64, yaw: f64) -> Result<(), JsValue> {
+        plot3d::draw(canvas, pitch, 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,42 @@
+use crate::DrawResult;
+use plotters::prelude::*;
+use plotters_canvas::CanvasBackend;
+use web_sys::HtmlCanvasElement;
+
+pub fn draw(canvas: HtmlCanvasElement, pitch: f64, 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.pitch = pitch;
+        pb.scale = 0.7;
+        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

@@ -15,16 +15,21 @@ <h1>Plotters WebAssembly Demo</h1>
         <canvas id="canvas" width="600" height="400"></canvas>
 	    <div id="status">Loading WebAssembly...</div>
 	    <div id="control">
-		<label for="plot-type">Demo: </label>
-		<select id="plot-type">
-		    <option value="0">Graph of y=1</option>
-		    <option value="1">Graph of y=x</option>
-		    <option value="2">Graph of y=x^2</option>
-		    <option value="3">Graph of y=x^3</option>
-		    <option value="4">Graph of y=x^4</option>
-		    <option value="5">Graph of y=x^5</option>
-		    <option value="mandelbrot">Mandelbrot Set</option>
-		</select>
+			<label for="plot-type">Demo: </label>
+			<select id="plot-type">
+				<option value="0">Graph of y=1</option>
+				<option value="1">Graph of y=x</option>
+				<option value="2">Graph of y=x^2</option>
+				<option value="3">Graph of y=x^3</option>
+				<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 id="3d-control" class="hide">
+				<label for="pitch">Pitch: </label> <input type="range" min="0" max="157" id="pitch" value="10"> <br/>
+				<label for="yaw">Yaw: </label> <input type="range" min="0" max="314" id="yaw" value="50">
+			</div>
 	    </div>
 	</main>
 	<footer>

examples/wasm-demo/www/index.js

@@ -5,12 +5,21 @@ class Chart {}
 const canvas = document.getElementById("canvas");
 const coord = document.getElementById("coord");
 const plotType = document.getElementById("plot-type");
+const pitch = document.getElementById("pitch");
+const yaw = document.getElementById("yaw");
+const control = document.getElementById("3d-control");
 const status = document.getElementById("status");
 
 let chart = null;
 
 /** Main entry point */
 export function main() {
+	let hash = location.hash.substr(1);
+	for(var i = 0; i < plotType.options.length; i++) {
+		if(hash == plotType.options[i].value) {
+			plotType.value = hash;
+		}
+	}
     setupUI();
     setupCanvas();
 }
@@ -24,6 +33,10 @@ export function setup(WasmChart) {
 function setupUI() {
     status.innerText = "WebAssembly loaded!";
     plotType.addEventListener("change", updatePlot);
+	yaw.addEventListener("change", updatePlot);
+	pitch.addEventListener("change", updatePlot);
+	yaw.addEventListener("input", updatePlot);
+	pitch.addEventListener("input", updatePlot);
     window.addEventListener("resize", setupCanvas);
     window.addEventListener("mousemove", onMouseMove);
 }
@@ -58,15 +71,33 @@ function onMouseMove(event) {
     }
 }
 
+function updatePlot3d() {
+	let yaw_value = Number(yaw.value) / 100.0;
+	let pitch_value = Number(pitch.value) / 100.0;
+	Chart.plot3d(canvas, pitch_value, yaw_value);
+	coord.innerText = `Pitch:${pitch_value}, Yaw:${yaw_value}`
+}
+
 /** Redraw currently selected plot. */
 function updatePlot() {
     const selected = plotType.selectedOptions[0];
     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":
+			control.classList.add("hide");
+			chart = Chart.mandelbrot(canvas);
+			break;
+		case "3d-plot": 
+			control.classList.remove("hide");
+			updatePlot3d();
+			break;
+		default:
+			control.classList.add("hide");
+			chart = Chart.power("canvas", Number(selected.value))
+	}
+	
     const end = performance.now();
     status.innerText = `Rendered ${selected.innerText} in ${Math.ceil(end - start)}ms`;
 }

examples/wasm-demo/www/style.css

@@ -48,3 +48,8 @@ footer {
     font-size: 12px;
     text-align: center;
 }
+
+.hide {
+	visibility: hidden;
+	height: 0px;
+}