|
1 | | -# Getting Started with Create React App |
| 1 | +[](https://app.netlify.com/sites/tesseract22/deploys) |
| 2 | +[](https://opensource.org/licenses/MIT) |
| 3 | +# Tesseract Visualizer |
2 | 4 |
|
3 | | -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). |
| 5 | +I created this visualization as an extra credit project for the multivariable calculus class I took in the fall of my senior year of high school. |
4 | 6 |
|
5 | | -## Available Scripts |
| 7 | +A [tesseract](https://en.wikipedia.org/wiki/Tesseract) is essentially a 4D cube; what you see on the website is a visualization of the points of the tesseract undergoing two [perspective projections](https://en.wikipedia.org/wiki/Perspective_(graphical)): once from 4D into 3D, and again from 3D into 2D (which you see on your computer screen!) |
6 | 8 |
|
7 | | -In the project directory, you can run: |
| 9 | + |
8 | 10 |
|
9 | | -### `yarn start` |
| 11 | +The graphics were created all with [p5.js](https://p5js.org/). I did not use this library's built-in WebGL 3D renderer—rather, everything you see is represented by 2D shapes, the positions and scales of which I calculated manually (for whatever reason, doing something like this has been on my bucket list for a while). |
10 | 12 |
|
11 | | -Runs the app in the development mode.\ |
12 | | -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. |
| 13 | +## Website |
| 14 | +The site is live at [https://tesseract22.netlify.app](https://tesseract22.netlify.app)! Feel free to visit and try it out. |
13 | 15 |
|
14 | | -The page will reload when you make changes.\ |
15 | | -You may also see any lint errors in the console. |
| 16 | +### Parameters |
| 17 | +* **Speed** - Drag the slider to control the speed at which the rotations are happening. |
| 18 | +* **Rotation Axes (3D cube only)** - Enable or disable axes about which to rotate the cube. |
| 19 | +* **Rotation Planes (4D tesseract only)** - In 4D, we can't really rotate about a singular axis. Instead, we rotate about a *plane*. Each rotation is represented by a 4x4 matrix. By checking a box, you add a rotation matrix to a list of matrices to be composed—the resulting matrix is applied to all the points of the tesseract *prior* to projection. |
16 | 20 |
|
17 | | -### `yarn test` |
| 21 | +## Tech Stack |
| 22 | +As mentioned, the animation itself is rendered with [p5.js](https://p5js.org/). The website was programmed with [Create React App](https://create-react-app.dev/) and [TypeScript](https://www.typescriptlang.org/). For CSS, I used [Emotion in the styled flavor](https://emotion.sh/docs/styled). |
18 | 23 |
|
19 | | -Launches the test runner in the interactive watch mode.\ |
20 | | -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. |
| 24 | +## Acknowledgements |
| 25 | +The code was inspired in part by Daniel Shiffman's YouTube video on [3D projection](https://www.youtube.com/watch?v=p4Iz0XJY-Qk). I didn't actually realize he had [another video]((https://www.youtube.com/watch?v=XE3YDVdQSPo)) on 4D projection until I was well into the project—but proved to be useful during my myriad sanity checks. |
21 | 26 |
|
22 | | -### `yarn build` |
23 | | - |
24 | | -Builds the app for production to the `build` folder.\ |
25 | | -It correctly bundles React in production mode and optimizes the build for the best performance. |
26 | | - |
27 | | -The build is minified and the filenames include the hashes.\ |
28 | | -Your app is ready to be deployed! |
29 | | - |
30 | | -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
31 | | - |
32 | | -### `yarn eject` |
33 | | - |
34 | | -**Note: this is a one-way operation. Once you `eject`, you can't go back!** |
35 | | - |
36 | | -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. |
37 | | - |
38 | | -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. |
39 | | - |
40 | | -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. |
41 | | - |
42 | | -## Learn More |
43 | | - |
44 | | -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). |
45 | | - |
46 | | -To learn React, check out the [React documentation](https://reactjs.org/). |
47 | | - |
48 | | -### Code Splitting |
49 | | - |
50 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) |
51 | | - |
52 | | -### Analyzing the Bundle Size |
53 | | - |
54 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) |
55 | | - |
56 | | -### Making a Progressive Web App |
57 | | - |
58 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) |
59 | | - |
60 | | -### Advanced Configuration |
61 | | - |
62 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) |
63 | | - |
64 | | -### Deployment |
65 | | - |
66 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) |
67 | | - |
68 | | -### `yarn build` fails to minify |
69 | | - |
70 | | -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) |
| 27 | +## License |
| 28 | +[MIT](https://choosealicense.com/licenses/mit/) |
0 commit comments