Ship #1 Pending review

@belbel on Linea - Matrix and stuff · about 2 hours ago

LINEA!

Hi! So I’ve made this new web app called Linea.
Linea is basically a step-by-step visualizer for linear algebra problems, to which I learned these concepts on my linear algebra classes ofc.
Currently there are 3 main features! Determinant calculation, System solver with matrix, and linear regression using matrix! I think these would be more helpful than just a generic matrix addition and multiplications.

For the design concept of the website itself, I chooses skies and clouds. Why those objects specifically? No particular reason… Clouds are the first thing came into my mind, probably because of Indonesia’s recent forest fire and because of that event the skies are no longer blue (skies forever blue reference??).

But yeah there’s that!

The idea is to create a tool so that people would be able to see the step by step on how to solve these problems if it is must be handwritten.

Challenge!

I think design wise, at first I don’t know how I can make the web app interesting because general clouds would be boring. So I decided to add these cute cat clouds… Some of them are bunnies

Then the code itself, C++ is quite challenging even if I got some experiences with that language. I would say the math logic and the LaTeX format was harder to implement than I imagined.

But I think I like how this turned out.

What I enjoy doing the most?

The sprites, and the React.JS coding ofc!

So yeah. After shipped this web app I’ll also share this to my friends so that this website would actually help others.

6 devlogs
15h

Try project → See source code →

Open comments for this post

@belbel on Linea - Matrix and stuff · about 2 hours ago

3h 2m 32s logged

Part 6 - Finishing!

So I’ve managed to integrate the WASM lib that I made into my Next.JS web app as well as create the Woodpanel component that uses my Aseprite sprite as its background. Additionally I also put my old Ibis Paint artwork for the background.

With Pixi.JS, I added a cute little cloud cat animated background. These cat entities will move from left to right or vice versa, and if you touched them they will bounce for a bit!

I think the colors of my sky painting and the woodpanel and these cloud cats also plays nicely.

I also tried to breakdown my interfaces in components, reusing some of my cold next.js codes for efficiency too! Especially those graphs that is why I managed to implement it quickly (utilized at Linear Regression feature).

In order to render my C++ code output in form of formatted LaTeX, I added KaTeX to my Next.JS web app.

Open comments for this post

@belbel on Linea - Matrix and stuff · 1 day ago

2h 17m 17s logged

Part 5 - Moving Cloud Cats and Wood Panel Prep

So I’ve managed to make those animated cat cloud doodle for my linear algebra web app! And also I’ve just made this wood sprite

Open comments for this post

@belbel on Linea - Matrix and stuff · 3 days ago

1h 35m 47s logged

Part 4 - New Sprite

I just drew these doodle cloud sprites that will be put behind the interface(s) of the web app. I’ll work on those tomorrow. Basically these clouds will float on the background.

Open comments for this post

@belbel on Linea - Matrix and stuff · 4 days ago

3h 22m 43s logged

Part-3 New WASM Function and Moving on to Next.JS!!

So I’ve finished adding the linear regression function into the WASM code-base. And I was struggling with the LaTeX unit test but yeah I managed to fix the bug. It was a formatting issue.

Then I moved into coding in JS once again! I think I’m gonna be picking sky-themed UI? The idea is to create a single page responsive website. So to access different features, the user could just easily swipe left and right.

Open comments for this post

@belbel on Linea - Matrix and stuff · 7 days ago

1h 38m 26s logged

Part 2 - More Algorithms and New LaTeX-PDF automation

So I’ve added a new function to find determinant by reusing the LU code I have and created a new minor-cofactor expansion method code
There’s also bug in LaTeX formatting that I’ve just noticed as I paste the .txt output resulted from the testing into Overleaf.
Pasting each .txt test output to external websites feels tiring so I automated the pdf conversion with Python and Tectonic!

I suppose I’ll push these updates to github next and then continuing with linear regression before moving on into Next.JS and such.

Open comments for this post

@belbel on Linea - Matrix and stuff · 7 days ago

2h 41m 48s logged

Part 1 - WASM Set Up

By using C++, I am planning to create functions to solve matrix based problems. I am currently learning both C++ and Linear Algebra so this project would combine both then applied into a Next.JS based web app!

For now I have done the solvers function, which will be the function for the web app to solve linear equation system using matrices!

There are test cases I need to revisit too.