Skip to content

Commit

Permalink
sort links by date
Browse files Browse the repository at this point in the history
  • Loading branch information
@jesperkha
jesperkha committed Dec 5, 2024
1 parent 27f4580 commit 5a6390d
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 3 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -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/)**
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ <h2>About</h2>
<p>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 <em>curiosities</em> I have found in the wild.</p>
<h2>Blog entries</h2>
<ul>
<li>(05.12.24) <a href="src/cloth-simulation.html">Cloth simulation</a></li>
<li>(03.12.24) <a href="src/allocators-and-arenas.html">Allocators and arenas</a></li>
</ul>

Expand Down
6 changes: 5 additions & 1 deletion scripts/generate_pages.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
62 changes: 62 additions & 0 deletions src/cloth-simulation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cloth simulation</title>
<link rel="stylesheet" href="../templates/theme.css" />
<link rel="stylesheet" href="../templates/global.css" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&family=Prata&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="center">
<div class="nav">
<a href="javascript:history.back()">Go Back</a>
<p>|</p>
<a href="/curiosities">Index</a>
<p>|</p>
<p>Cloth simulation</p>
</div>
<h1>Euler's method and cloth</h1>
<p>Making a simple cloth simulation is relatively straightforward. It involves estimating the position of multiple points in a grid using a method known as <a href="https://en.wikipedia.org/wiki/Euler_method">Euler's method</a>.</p>
<p>Let's say we have a grid of points, where each point <code>p</code> has a position and previous position vector. We want to estimate where this point will be in the next time step <code>t</code>. To do this, we calculate a &quot;velocity&quot; as <code>vel = current_pos - old_pos</code>. We set the current position as <code>old_pos</code> and add the velocity to the current position.</p>
<p>By also adding a small gravity constant to the points <code>y</code> velocity we get a falling grid of points:</p>
<img src="../.github/clothsim/falling_points.gif">
<h2>Point recalibration</h2>
<p>Now for the <em>harder</em> 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:</p>
<div class="highlight py"><pre><span></span><span class="c1"># For each line connecting two points</span>
<span class="k">for</span> <span class="n">line</span> <span class="ow">in</span> <span class="n">lines</span><span class="p">:</span>
<span class="c1"># Get the delta position</span>
<span class="n">dx</span> <span class="o">=</span> <span class="n">line</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span> <span class="o">-</span> <span class="n">line</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">x</span>
<span class="n">dy</span> <span class="o">=</span> <span class="n">line</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span> <span class="o">-</span> <span class="n">line</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span>
<span class="n">dist</span> <span class="o">=</span> <span class="n">sqrt</span><span class="p">(</span><span class="n">dx</span><span class="o">*</span><span class="n">dx</span> <span class="o">+</span> <span class="n">dy</span><span class="o">*</span><span class="n">dy</span><span class="p">)</span>

<span class="c1"># The difference between the expected</span>
<span class="c1"># distance and the actual distance.</span>
<span class="n">diff</span> <span class="o">=</span> <span class="n">line</span><span class="o">.</span><span class="n">dist</span> <span class="o">-</span> <span class="n">dist</span>
<span class="n">displacement</span> <span class="o">=</span> <span class="n">diff</span> <span class="o">/</span> <span class="n">dist</span> <span class="o">/</span> <span class="mi">2</span>
<span class="n">offsetx</span> <span class="o">=</span> <span class="n">dx</span> <span class="o">*</span> <span class="n">displacement</span>
<span class="n">offsety</span> <span class="o">=</span> <span class="n">dy</span> <span class="o">*</span> <span class="n">displacement</span>

<span class="c1"># Apply the offset if the points are not pinned</span>
<span class="k">if</span> <span class="ow">not</span> <span class="n">line</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">pinned</span><span class="p">:</span>
<span class="n">line</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span> <span class="o">+=</span> <span class="n">offsetx</span>
<span class="n">line</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span> <span class="o">+=</span> <span class="n">offsety</span>
<span class="k">if</span> <span class="ow">not</span> <span class="n">line</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">pinned</span><span class="p">:</span>
<span class="n">line</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">x</span> <span class="o">-=</span> <span class="n">offsetx</span>
<span class="n">line</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span> <span class="o">-=</span> <span class="n">offsety</span>
</pre></div>
<p>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.</p>
<p>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:</p>
<img src="../.github/clothsim/final.gif">
<p>You can change the stiffness of the cloth by adjusting the number of times you run the point recalibration in with each iteration.</p>

</div>
</body>
</html>
1 change: 1 addition & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h2>About</h2>
<p>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 <em>curiosities</em> I have found in the wild.</p>
<h2>Blog entries</h2>
<ul>
<li>(05.12.24) <a href="src/cloth-simulation.html">Cloth simulation</a></li>
<li>(03.12.24) <a href="src/allocators-and-arenas.html">Allocators and arenas</a></li>
</ul>

Expand Down
7 changes: 6 additions & 1 deletion templates/global.css
View file
Original file line number Diff line number Diff line change
@@ -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%;
Expand Down

0 comments on commit 5a6390d

Please sign in to comment.