summaryrefslogtreecommitdiff
path: root/posts/linear_system_solver.html
diff options
context:
space:
mode:
authormattkae <mattkae@protonmail.com>2021-09-19 16:32:15 -0400
committermattkae <mattkae@protonmail.com>2021-09-19 16:32:15 -0400
commitde850676e79da39aec6f1ce0400cfa94cecbd744 (patch)
tree48927e3cd3a518ddee1874df40d188cbc5112393 /posts/linear_system_solver.html
First commit
Diffstat (limited to 'posts/linear_system_solver.html')
-rw-r--r--posts/linear_system_solver.html102
1 files changed, 102 insertions, 0 deletions
diff --git a/posts/linear_system_solver.html b/posts/linear_system_solver.html
new file mode 100644
index 0000000..a8b17e5
--- /dev/null
+++ b/posts/linear_system_solver.html
@@ -0,0 +1,102 @@
+
+<h2>Linear Systems Solver</h2>
+<h3>2021-08-01 by Matthew Kosarek</h3>
+<p>
+ I wanted to write a little algorithm to visually solve linear systems of equations for fun. I am only going to deal with 3x3 matrices for now, but I'll make it so that I can easily extend it to more matrices in the future if I think that would be cool.
+
+ <br/><br/>
+
+ <div id='equation_container'>
+ <div id='matrix_lhs'></div>
+ <label>&times;</label>
+ <div id='unknown_variables'></div>
+ <label>=</label>
+ <div id='matrix_rhs'></div>
+ </div>
+
+ <div id='solution_container'>
+ </div>
+
+ <div id='actions_container'>
+ <button class='action_button'id='reset_button'>
+ Reset
+ </button>
+ <button class='action_button' id='solve_button'>
+ Solve
+ </button>
+ </div>
+
+ <script src='/posts/linear_system_solver.js'></script>
+
+ <style>
+ #equation_container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+ justify-content: center;
+ }
+
+ #equation_container input {
+ width: 128px;
+ }
+
+ #equation_container > label {
+ padding: 1rem;
+ }
+
+ #matrix_lhs {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ #unknown_variables {
+ display: grid;
+ grid-gap: 1rem;
+ }
+
+ #unknown_variables > input {
+ text-align: center;
+ }
+
+ #matrix_rhs {
+ display: grid;
+ grid-gap: 1rem;
+ }
+
+ #actions_container {
+ padding: 1rem;
+ text-align: center;
+ }
+
+ #solve_button {
+ background-color: lightgreen;
+ }
+
+ .augmented_matrix_container {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ padding: 1rem;
+ }
+
+ .augmented_matrix_container input {
+ width: 128px;
+ }
+
+ .augmented_matrix_container > div:first-child {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: repeat(3, 1fr);
+ padding-right: 0.5rem;
+ border-right: 1px dashed white;
+ }
+
+ .augmented_matrix_container > div:last-child {
+ display: grid;
+ grid-gap: 1rem;
+ padding-left: 0.5rem;
+ }
+ </style>
+</p>