Compare commits
No commits in common. "244f222eb0b42f96eb59c88d840555580bb1d712" and "9d69a900e28e0694b984ed326d3c9b6d6edca668" have entirely different histories.
244f222eb0
...
9d69a900e2
2
lang-trials/rust/.gitignore
vendored
2
lang-trials/rust/.gitignore
vendored
@ -1,2 +0,0 @@
|
||||
target/*
|
||||
dist/*
|
||||
@ -1,32 +0,0 @@
|
||||
[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"
|
||||
@ -1,8 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Lattice circle</title>
|
||||
<link data-trunk rel="css" href="main.css"/>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
@ -1,50 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
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(),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
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