diff --git a/README.md b/README.md index 90bfeb0..ab588a7 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ # Curiosities -[Go to the blog!](https://jesperkha.github.io/curiosities/) +I often learn things I find interesting and useful, but despite my attempts at carrying these factoids with me at all times, it seems as though primitive human brain has a tendency to spontaneously forget things after a while. The solution? A blog containing explanations, diagrams, and code examples for various _curiosities_ I have found in the wild. + +**[Go to the blog ➜](https://jesperkha.github.io/curiosities/)** diff --git a/index.html b/index.html index 9b838f9..f9f1a17 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@

About

I often learn things I find interesting and useful, but despite my attempts at carrying these factoids with me at all times, it seems as though primitive human brain has a tendency to spontaneously forget things after a while. The solution? A blog containing explanations, diagrams, and code examples for various curiosities I have found in the wild.

Blog entries

diff --git a/scripts/generate_pages.py b/scripts/generate_pages.py index d6ac7d1..bf3ec26 100644 --- a/scripts/generate_pages.py +++ b/scripts/generate_pages.py @@ -19,7 +19,11 @@ def page_md_to_html(filename: str, out_dir: str, template_file: str): md = f.read() if filename == "index.md": entries = "" - for file in os.listdir("pages"): + files = os.listdir("pages") + files = [f"pages/{name}" for name in files] + files = sorted(files, key=os.path.getmtime, reverse=True) + for file in files: + file = file.removeprefix("pages/") if file == "index.md": continue diff --git a/src/cloth-simulation.html b/src/cloth-simulation.html new file mode 100644 index 0000000..3d64506 --- /dev/null +++ b/src/cloth-simulation.html @@ -0,0 +1,62 @@ + + + + + + Cloth simulation + + + + + + + + +
+ +

Euler's method and cloth

+

Making a simple cloth simulation is relatively straightforward. It involves estimating the position of multiple points in a grid using a method known as Euler's method.

+

Let's say we have a grid of points, where each point p has a position and previous position vector. We want to estimate where this point will be in the next time step t. To do this, we calculate a "velocity" as vel = current_pos - old_pos. We set the current position as old_pos and add the velocity to the current position.

+

By also adding a small gravity constant to the points y velocity we get a falling grid of points:

+ +

Point recalibration

+

Now for the harder part. To simulate the elasticity, we need to make sure neighboring points try to stay together. To do this, we calculate the delta distance between the two points, find the desired distance between them, and compute an offset proportional to the displacement. Here's some pseudo code:

+
# For each line connecting two points
+for line in lines:
+    # Get the delta position
+    dx = line.p1.x - line.p2.x
+    dy = line.p1.y - line.p2.y
+    dist = sqrt(dx*dx + dy*dy)
+
+    # The difference between the expected
+    # distance and the actual distance.
+    diff = line.dist - dist
+    displacement = diff / dist / 2
+    offsetx = dx * displacement
+    offsety = dy * displacement
+
+    # Apply the offset if the points are not pinned
+    if not line.p1.pinned:
+        line.p1.x += offsetx
+        line.p1.y += offsety
+    if not line.p2.pinned:
+        line.p2.x -= offsetx
+        line.p2.y -= offsety
+
+

Notice how we added a check to see if a point is pinned. Pinned points should not be affected by any forces, so you can simply ignore them when updating point positions.

+

With this new functionality forcing points to stay close to each other, line rendering, and some simple wind physics, we get a pretty good looking cloth simulation:

+ +

You can change the stiffness of the cloth by adjusting the number of times you run the point recalibration in with each iteration.

+ +
+ + diff --git a/src/index.html b/src/index.html index e3ba590..6e54af3 100644 --- a/src/index.html +++ b/src/index.html @@ -27,6 +27,7 @@

About

I often learn things I find interesting and useful, but despite my attempts at carrying these factoids with me at all times, it seems as though primitive human brain has a tendency to spontaneously forget things after a while. The solution? A blog containing explanations, diagrams, and code examples for various curiosities I have found in the wild.

Blog entries

diff --git a/templates/global.css b/templates/global.css index c6ef708..ad038d2 100644 --- a/templates/global.css +++ b/templates/global.css @@ -1,13 +1,18 @@ .center { margin: auto; width: 40%; - min-width: 500px; font-family: "Source Serif 4", serif; font-optical-sizing: auto; color: #171717; margin-bottom: 25vh; } +@media screen and (max-width: 1000px) { + .center { + width: 90%; + } +} + p, li { line-height: 150%;