LinearPlot3D

Welcome to LinearPlot3D!

• There's a large list of resources below, I strongly encourage everyone to take a look at the links and sections with * after it

LinearPlot3D will be a web application that displays animation to help students understand the concept of linear algebra in 3D space and professors to teach the concept of linear algebra in 3D space.

How to contribute:

To contribute to the project, you will have to do the following:

• Clone the repository or pull the latest changes
• If you have not, run npm install to install all the dependencies
• Run npm run dev to start the development server and implement your changes
• Do git checkout -b your_branch_name to create a new branch
• Do git add . to add all the changes
• Do git commit -m "your commit message" to commit the changes
• Do git push origin your_branch_name to push the changes to the repository
• Notify me to review the changes and merge the branch to the main branch

To-dos*

• When2Meet: Please fill out the When2Meet to schedule a meeting time: link

• Discord: If you have not, please join the Discord channel to communicate with the team: link. Regular updates will be posted on LinearPlot3D subchannel. If you are not able to see the subchannel, please let me know through email or ping me on discord

• Github Id: Please enter your github identifiers (username or email) in this sheet so I can add you to the repository

Things to install*

• Visual Studio Code: This is the code editor I use. It is very lightweight and has a lot of extensions that can help you with your coding. Also extremely popular among web developers.
• NodeJs: This is a javascript runtime that we will be using to run our react project.
• Git: This is the official git download page. Git is a version control system that we will be using to manage our project.

Resources

About Our Project

• This is partially inspired by Let's code 3D Engine in Python from Scratch, it might be a bit difficult to understand everything the first time. Be sure to watch some of 3Blue1Brown's videos on linear algebra before watching this video.
• I believe this is doable after writing this repository linear_transformation_visualizer

Linear Algebra

• 3Blue1Brown - Essence of Linear Algebra*: The first 5 videos in his linear algebra series should be all you need for this project. If we have more time at the end of the semester, we might be able to integrate more features and concepts of linear algebra.
• MIT Open Course: This can be used as a supplemental resource to 3Blue1Brown's videos. Prof. Gilbert Strang's teaching style feels a lot slower so 1.25x speed on some section might be a good idea.

ReactJs

• Official ReactJs: not the most useful thing personally but it is the official react js website so.
• Vite + React: I use vite to create my react project (so does both of the tutorials below). It is a lot faster than create-react-app.
• Beginner React Tutorial*: this will cover the basics of react (not much on css styling though)
• A More Advanced React Tutorial: this is a web app project with nice styling using react

ThreeJs

• I have barely touched ThreeJs before but I am aware that this is the goto library for 3D rendering on the web. We will all be researching 3D rendering on the web along our way through the project
• Official ThreeJs: This is the official three js website. It is a bit hard to navigate but it has a lot of examples.
• React Three Fiber: This is a react wrapper for three js on react
• React Three Fiber Github: The official github page for react three fiber contains a good amount of docs and tutorials

Javascript

• I have not done much heavy JS focused projects before. I will learn along the way with you guys.
• W3Schools: This is a good systematic resource for learning javascript.
• MDN Web Docs: This is the official javascript documentation. It is a lot more technical than w3schools but it is a good resource to have.
• Learn JavaScript With This ONE Project!: This is a good tutorial to learn javascript with a project.

General Web Development

• MDN Web Docs: This is the official documentation for web development.

Git & Github

• I am by no means an expert in git. I will learn along the way with you guys.
• Git and GitHub Tutorial for Beginners: This is a good tutorial to learn git and github. I encourage everyone to create an example repository to practice git commands.
• W3Schools: I am not aware that W3Schools has a git tutorial, but WSchools typically have good systematic tutorials.

UI/UX Design

• Figma: This is a free design tool that I always use for UI/UX design. It allows collaboration and is very easy to use.
• Figma Tutorial: This is a good tutorial to learn figma. I encourage everyone who wants to learn Figma and UI/UX design to follow along.

Additional

• Markdown Cheatsheet: This is a markdown cheatsheet that I use to format my README file.