Compare commits
4 Commits
9d69a900e2
...
244f222eb0
| Author | SHA1 | Date | |
|---|---|---|---|
|
244f222eb0 | ||
|
|
42bdfabd91 | ||
|
|
12abef4076 | ||
|
|
d7dbee4c05 |
2
lang-trials/rust/.gitignore
vendored
Normal file
2
lang-trials/rust/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
target/*
|
||||||
|
dist/*
|
||||||
32
lang-trials/rust/Cargo.toml
Normal file
32
lang-trials/rust/Cargo.toml
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
[package]
|
||||||
|
name = "sycamore-trial"
|
||||||
|
version = "0.1.0"
|
||||||
|
authors = ["Aaron"]
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
[features]
|
||||||
|
default = ["console_error_panic_hook"]
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
nalgebra = "0.33.0"
|
||||||
|
sycamore = "0.9.0-beta.2"
|
||||||
|
|
||||||
|
# The `console_error_panic_hook` crate provides better debugging of panics by
|
||||||
|
# logging them with `console.error`. This is great for development, but requires
|
||||||
|
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
|
||||||
|
# code size when deploying.
|
||||||
|
console_error_panic_hook = { version = "0.1.7", optional = true }
|
||||||
|
|
||||||
|
[dependencies.web-sys]
|
||||||
|
version = "0.3.69"
|
||||||
|
features = [
|
||||||
|
'CanvasRenderingContext2d',
|
||||||
|
'HtmlCanvasElement',
|
||||||
|
]
|
||||||
|
|
||||||
|
[dev-dependencies]
|
||||||
|
wasm-bindgen-test = "0.3.34"
|
||||||
|
|
||||||
|
[profile.release]
|
||||||
|
# Tell `rustc` to optimize for small code size.
|
||||||
|
opt-level = "s"
|
||||||
8
lang-trials/rust/index.html
Normal file
8
lang-trials/rust/index.html
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Lattice circle</title>
|
||||||
|
<link data-trunk rel="css" href="main.css"/>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
50
lang-trials/rust/main.css
Normal file
50
lang-trials/rust/main.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
body {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #fcfcfc;
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: inherit;
|
||||||
|
background-color: #020202;
|
||||||
|
border: 1px solid #606060;
|
||||||
|
min-width: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.point-1 {
|
||||||
|
border-color: #ba5d09;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.point-2 {
|
||||||
|
border-color: #0e8a06;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.point-3 {
|
||||||
|
border-color: #8951fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-panel {
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: 10px 10px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-panel > div {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result-display {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
float: left;
|
||||||
|
background-color: #020202;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
38
lang-trials/rust/src/engine.rs
Normal file
38
lang-trials/rust/src/engine.rs
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
use nalgebra::*;
|
||||||
|
|
||||||
|
pub struct Circle {
|
||||||
|
pub center_x: f64,
|
||||||
|
pub center_y: f64,
|
||||||
|
pub radius: f64,
|
||||||
|
}
|
||||||
|
|
||||||
|
// construct the circle through the points given by the columns of `points`
|
||||||
|
pub fn circ_thru(points: Matrix2x3<f64>) -> Option<Circle> {
|
||||||
|
// build the matrix that maps the circle's coefficient vector to the
|
||||||
|
// negative of the linear part of the circle's equation, evaluated at the
|
||||||
|
// given points
|
||||||
|
let neg_lin_part = stack![2.0*points.transpose(), Vector3::repeat(1.0)];
|
||||||
|
|
||||||
|
// find the quadrdatic part of the circle's equation, evaluated at the given
|
||||||
|
// points
|
||||||
|
let quad_part = Vector3::from_iterator(
|
||||||
|
points.column_iter().map(|v| v.dot(&v))
|
||||||
|
);
|
||||||
|
|
||||||
|
// find the circle's coefficient vector, and from there its center and
|
||||||
|
// radius
|
||||||
|
match neg_lin_part.lu().solve(&quad_part) {
|
||||||
|
None => None,
|
||||||
|
Some(coeffs) => {
|
||||||
|
let center_x = coeffs[0];
|
||||||
|
let center_y = coeffs[1];
|
||||||
|
Some(Circle {
|
||||||
|
center_x: center_x,
|
||||||
|
center_y: center_y,
|
||||||
|
radius: (
|
||||||
|
coeffs[2] + center_x*center_x + center_y*center_y
|
||||||
|
).sqrt(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
114
lang-trials/rust/src/main.rs
Normal file
114
lang-trials/rust/src/main.rs
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
use nalgebra::Matrix2x3;
|
||||||
|
use std::f64::consts::PI as PI;
|
||||||
|
use sycamore::{prelude::*, rt::{JsCast, JsValue}};
|
||||||
|
|
||||||
|
mod engine;
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
// set up a config option that forwards panic messages to `console.error`
|
||||||
|
#[cfg(feature = "console_error_panic_hook")]
|
||||||
|
console_error_panic_hook::set_once();
|
||||||
|
|
||||||
|
sycamore::render(|| {
|
||||||
|
let data = [-1.0, 0.0, 0.0, -1.0, 1.0, 0.0].map(|n| create_signal(n));
|
||||||
|
let display = create_node_ref();
|
||||||
|
|
||||||
|
on_mount(move || {
|
||||||
|
let canvas = display
|
||||||
|
.get::<DomNode>()
|
||||||
|
.unchecked_into::<web_sys::HtmlCanvasElement>();
|
||||||
|
let ctx = canvas
|
||||||
|
.get_context("2d")
|
||||||
|
.unwrap()
|
||||||
|
.unwrap()
|
||||||
|
.dyn_into::<web_sys::CanvasRenderingContext2d>()
|
||||||
|
.unwrap();
|
||||||
|
|
||||||
|
create_effect(move || {
|
||||||
|
// center and normalize the coordinate system
|
||||||
|
let width = canvas.width() as f64;
|
||||||
|
let height = canvas.height() as f64;
|
||||||
|
ctx.set_transform(1.0, 0.0, 0.0, -1.0, 0.5*width, 0.5*height).unwrap();
|
||||||
|
|
||||||
|
// clear the previous frame
|
||||||
|
ctx.clear_rect(-0.5*width, -0.5*width, width, height);
|
||||||
|
|
||||||
|
// find the resolution
|
||||||
|
const R_DISP: f64 = 5.0;
|
||||||
|
let res = width / (2.0*R_DISP);
|
||||||
|
|
||||||
|
// set colors
|
||||||
|
let highlight_style = JsValue::from("white");
|
||||||
|
let grid_style = JsValue::from("#404040");
|
||||||
|
let point_fill_styles = ["#ba5d09", "#0e8a06", "#8951fb"];
|
||||||
|
let point_stroke_styles = ["#f89142", "#58c145", "#c396fc"];
|
||||||
|
|
||||||
|
// draw the grid
|
||||||
|
let r_grid = (R_DISP - 0.01).floor() as i32;
|
||||||
|
let edge_scr = res * R_DISP;
|
||||||
|
ctx.set_stroke_style(&grid_style);
|
||||||
|
for t in -r_grid ..= r_grid {
|
||||||
|
let t_scr = res * (t as f64);
|
||||||
|
|
||||||
|
// draw horizontal grid line
|
||||||
|
ctx.begin_path();
|
||||||
|
ctx.move_to(-edge_scr, t_scr);
|
||||||
|
ctx.line_to(edge_scr, t_scr);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// draw vertical grid line
|
||||||
|
ctx.begin_path();
|
||||||
|
ctx.move_to(t_scr, -edge_scr);
|
||||||
|
ctx.line_to(t_scr, edge_scr);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// find and draw the circle through the given points
|
||||||
|
let data_vals = data.map(|sig| sig.get()).to_vec();
|
||||||
|
let points = Matrix2x3::from_vec(data_vals);
|
||||||
|
if let Some(circ) = engine::circ_thru(points) {
|
||||||
|
ctx.begin_path();
|
||||||
|
ctx.set_stroke_style(&highlight_style);
|
||||||
|
ctx.arc(
|
||||||
|
res * circ.center_x,
|
||||||
|
res * circ.center_y,
|
||||||
|
res * circ.radius,
|
||||||
|
0.0, 2.0*PI
|
||||||
|
).unwrap();
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw the data points
|
||||||
|
for n in 0..3 {
|
||||||
|
ctx.begin_path();
|
||||||
|
ctx.set_fill_style(&JsValue::from(point_fill_styles[n]));
|
||||||
|
ctx.set_stroke_style(&JsValue::from(point_stroke_styles[n]));
|
||||||
|
let ind_x = 2*n;
|
||||||
|
let ind_y = ind_x + 1;
|
||||||
|
ctx.arc(
|
||||||
|
res * data[ind_x].get(),
|
||||||
|
res * data[ind_y].get(),
|
||||||
|
3.0,
|
||||||
|
0.0, 2.0*PI
|
||||||
|
).unwrap();
|
||||||
|
ctx.fill();
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
view! {
|
||||||
|
canvas(ref=display, width="600", height="600")
|
||||||
|
div(id="data-panel") {
|
||||||
|
div { "x" }
|
||||||
|
div { "y" }
|
||||||
|
input(type="number", class="point-1", bind:valueAsNumber=data[0])
|
||||||
|
input(type="number", class="point-1", bind:valueAsNumber=data[1])
|
||||||
|
input(type="number", class="point-2", bind:valueAsNumber=data[2])
|
||||||
|
input(type="number", class="point-2", bind:valueAsNumber=data[3])
|
||||||
|
input(type="number", class="point-3", bind:valueAsNumber=data[4])
|
||||||
|
input(type="number", class="point-3", bind:valueAsNumber=data[5])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user