Skip to content

New approach #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mhanberry1 merged 33 commits into from
Apr 1, 2025
Merged

New approach #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
d34515c
draw lines and triangles using webgl
Aug 4, 2024
1a79a5f
add matrix operations
Aug 4, 2024
178a4f5
restructure + add projection matrix
Aug 7, 2024
200e2d4
a really cool mistake
Aug 7, 2024
d55f8f3
fix translation
Aug 20, 2024
b2f7a8f
add translate and rotate controls
Sep 2, 2024
e94b4b5
fix rotation + enable depth sorting
Sep 2, 2024
4e40310
add zoom controls
Sep 2, 2024
397dac4
accommodate aspect ratio
Sep 4, 2024
81f6403
fix colors
Sep 5, 2024
5ea78d5
fix tetrahedron generation
Sep 6, 2024
d955090
remove unnecessary file
Sep 14, 2024
dd448e8
center scene + fix clipping
Sep 14, 2024
a08eef6
resize the canvas when its container's size changes
Sep 15, 2024
62dc81d
don't render unseen triangles
Sep 17, 2024
b7ba668
begin integrating svg into new approach
Sep 18, 2024
d04963a
improved model generation efficiency
Sep 19, 2024
6a0e789
improve rendering efficiency
Sep 20, 2024
ccf953e
add the interface
Sep 21, 2024
bc1cf26
add functionality to controls
Sep 22, 2024
4528a3d
fix rendering
Sep 22, 2024
d27623c
Deploy static site from new-approach branch
Oct 3, 2024
71f00ef
add triangle models
Oct 4, 2024
7632834
add triangle json as a reusable template
Oct 4, 2024
9ee9ebe
use the new model in conjunction with position maps
mhanberry1 Oct 10, 2024
54d8d9f
elongate the frustom
Oct 12, 2024
f38d98c
adjust padding and pivot
mhanberry1 Oct 24, 2024
aed7d8c
relative image links
mhanberry1 Mar 20, 2025
5bb278b
fix triangle json path
mhanberry1 Mar 20, 2025
747b313
Added nmesh file generation + script to run server locally
epituch Apr 1, 2025
1f6015c
Formatting
epituch Apr 1, 2025
7524fdd
Merge pull request #1 from epituch/file-gen
epituch Apr 1, 2025
ad80e68
Merge branch 'main' into new-approach
mhanberry1 Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ input:focus {
padding 10px;
width: 40px;
height: 40px;
background: no-repeat center / 20px var(--white) url('/img/bars-black.svg');
background: no-repeat center / 20px var(--white) url('../img/bars-black.svg');
transition: 0.2s;
}

Expand All @@ -52,7 +52,7 @@ input:focus {
}

#show-controls-button.selected {
background: no-repeat center / 20px var(--black) url('/img/bars-white.svg');
background: no-repeat center / 20px var(--black) url('../img/bars-white.svg');
cursor: pointer;
}

Expand Down Expand Up @@ -92,15 +92,15 @@ input:focus {
}

#triangle-grid .triangle.selected {
background-image: url('/img/triangle.svg');
background-image: url('../img/triangle.svg');
}

#triangle-grid .triangle.selected:hover {

}

#triangle-grid .triangle.selected.even-row {
background-image: url('/img/triangle-flipped.svg');
background-image: url('../img/triangle-flipped.svg');
}

.row {
Expand Down
30 changes: 17 additions & 13 deletions frontend/img/triangle-flipped.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 18 additions & 13 deletions frontend/img/triangle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<html>
<head>
<script type="module" src="js/new.js"></script>
<link rel="icon" href="img/favicon.svg">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
Expand Down Expand Up @@ -41,6 +42,11 @@
Simulate
</div>
</div>
<div class="row">
<div class="pill-button" id="download-nmesh-file">
Download Nmesh File
</div>
</div>
</div>
</div>

Expand Down
44 changes: 7 additions & 37 deletions frontend/js/modules/matrix-lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
// Multiply two matrices together using dot product multiplication
//
// a and b: matrices (2d array of numbers)
export const identity = [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1],
]

export const matrixMult = (a, b) => {
if (a[0]?.length != b.length) {
throw "incompatible dimensions"
Expand All @@ -24,47 +28,20 @@ export const matrixMult = (a, b) => {
return result
}

// An identity matrix.
// This won't transform anything, so it's a good starting point
export const identity = [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1],
]

// Create a matrix that will translate a
// coordinate in the x, y, and z dimensions
//
// x, y, and z: The amount to translate by (number)
//
// returns a matrix (2d array of numbers)
export const translate = (x, y, z) => [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[x, y, z, 1],
]

// Create a matrix that will scale a coordinate
// in the x, y, and z dimensions
//
// x, y, and z: the amount to scale by (number)
//
// returns a matrix (2d array of numbers)
export const scale = (x, y = x, z = x) => [
[x, 0, 0, 0],
[0, y, 0, 0],
[0, 0, z, 0],
[0, 0, 0, 1],
]

// Create a matrix that will rotate a coordinate
// along the x, y, and z axes
//
// x, y, and z: the amount to rotate by (number)
//
// returns a matrix (2d array of numbers)
export const rotate = (x, y, z) => {
// X rotation

Expand Down Expand Up @@ -105,13 +82,6 @@ export const rotate = (x, y, z) => {
return matrixMult(matrixMult(xMat, yMat), zMat)
}

// Creates a matrix that can project a matrix
// in 3d space to create a sense of perspective
//
// scale: Intensity of the effect
// aspect: Ratio of the width and height for the viewport
//
// returns a matrix (2d array of numbers)
export const project = (scale, aspect) => [
[aspect > 1 ? 1 / aspect : 1, 0, 0, 0],
[0, aspect < 1 ? aspect : 1, 0, 0],
Expand Down
3 changes: 2 additions & 1 deletion frontend/js/modules/model-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
// TODO: fix this so that exterior is not always true
export const extrudePoints = (points, layers) => Array(layers).fill(0)
.map((_, z) => points
.map((row, y) => row
.map((p, x) => ({
...p,
z,
exterior: // TODO: fix this so that exterior is not always true
exterior:
!points[0][x - 1]?.[y]
|| !points[0][x + 1]?.[y]
|| !points[0][x]?.[y - 1]
Expand Down
2 changes: 1 addition & 1 deletion frontend/js/modules/scene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default class Scene {

return this
}

/**
* Draws lines using the given positions and colors.
* @param {Float32Array} positions - The vertex positions.
Expand Down
Loading