added alt text to almost all images

src/routes/projects/projectn5/devlog/2024/1222/+page.svelte

@@ -9,7 +9,12 @@
 </svelte:head>
 
 <Content>
-    <BannerTitle title="Project N5 Progress Update: 2024-12-22" subtitle="The Making of a Protagonist, Part II" banner="../../previews/2024/1222.webp" />
+    <BannerTitle
+        title="Project N5 Progress Update: 2024-12-22"
+        subtitle="The Making of a Protagonist, Part II"
+        banner="../../previews/2024/1222.webp"
+        bannerAlt="Laura a-posing and wearing green and brown clothes"
+    />
 
     <p>I have lots progress to share!!</p>
 
@@ -18,8 +23,8 @@
     <p>First things first: Laura is, unlike I promised before, not yet finished. However, I have made <i>so much</i> progress in the past few weeks that I just wanted to get out already. Here's a comparison between my last progress update and the current iteration of Laura:</p>
 
     <div class="horizontally-centre-aligned">
-        <img src="../1127/laura-overview.webp">
-        <img src="laura.webp">
+        <img src="../1127/laura-overview.webp" alt="A featureless blank 3D model of a human body">
+        <img src="laura.webp" alt="A 3D model of a human girl with brown hair, a full face mask, green sweatshirt, brown trousers, and black boots">
     </div>
 
     <p>She's become an actual proper character!! omg omg</p>
@@ -46,7 +51,7 @@
 
     <p>Laura was originally supposed to wear an orange sweatshirt as well as shorts. The orange sweatshirt was thrown out because the character reminded me of Velma from Scooby-Doo, and I changed it to green because I like green. Also, the shorts looked dorky. Here's a picture from 2024-12-01 – Laura oddly looks younger in this picture, I feel. The shorts and hair make a big difference.</p>
 
-    <img src="laura-young.webp">
+    <img src="laura-young.webp" alt="A 3D model of a t-posing human girl with different hair, brown shorts, and no feet">
 
     <h3 id="hair">Hair</h3>
 
@@ -55,15 +60,15 @@
     <p>The first try (seen above) was using the technique from <a href="#low-poly-easy">this video</a> – selecting faces from the character's head, duplicating them, separating them into their own mesh, changing the scale, adding a solidify modifier, and then adding faces. This... worked, but I didn't like the results. And I tried quite a few styles.</p>
 
     <div class="horizontally-centre-aligned">
-        <img src="laura-hair-flat-1.webp">
-        <img src="laura-hair-flat-2.webp">
-        <img src="laura-hair-flat-3.webp">
+        <img src="laura-hair-flat-1.webp" alt="White hair with middle split">
+        <img src="laura-hair-flat-2.webp" alt="White hair with spiky bangs">
+        <img src="laura-hair-flat-3.webp" alt="White hair with spiky ends">
     </div>
 
     <div class="horizontally-centre-aligned">
-        <img src="laura-hair-flat-4.webp">
-        <img src="laura-hair-flat-5.webp">
-        <img src="laura-hair-flat-6.webp">
+        <img src="laura-hair-flat-4.webp" alt="Brown hair with middle split, flowing behind the character's ears">
+        <img src="laura-hair-flat-5.webp" alt="Brown hair with middle split and divided at the ears">
+        <img src="laura-hair-flat-6.webp" alt="Brown hair with big bangs">
     </div>
 
     <p>It always looked too flat, too shapeless, too boring, wrong cuts. It just didn't work.</p>
@@ -73,8 +78,8 @@
     <p>Essentially, you create a curve and a circle, use the circle's shape as a profile for the curve, then change the circle's shape as well as the position and scale of the curve's vertices to create individual hair strands. Shown well in the two videos linked above, this can look pretty amazing! Only one issue: I'm creating a <b>game</b> character, and this technique is quite expensive, as it creates a lot of polygons for all the individual hair strands and the detail that goes into them. To mitigate this, I lowered the resolution of the profiling and used only a few curves to create an entire head's worth of hair. This looked a little like this:</p>
 
     <div class="horizontally-centre-aligned">
-        <img src="laura-hair-curves.webp">
-        <img src="laura-hair-curves-2.webp">
+        <img src="laura-hair-curves.webp" alt="Toon shaded view at the character with brown hair">
+        <img src="laura-hair-curves-2.webp" alt="Side view at the character without special shading">
     </div>
 
     <p>This hair mesh originally (left picture) consisted of three parts: two curves at the front (left/right) and one in the back. This... was okay, but scaling the curves made the hair look weird. Thinner strands, especially when there's only a few of them, made them look more like dreads, and scaling up the vertices to large scales, as seen in the front near the top of the head, makes the hair look as if it's ballooning. Getting the shape right was a mess too: using only a single curve in the back meant that I had exactly one curve to cover quite literally half the head, and making sure that this singular strand of hair covered the head stretching from one ear to another was a pain. I tried using five curves (right picture), so that I have three in the back, but it didn't improve anything.</p>
@@ -82,8 +87,8 @@
     <p>I then went <i>back</i> to the first method of scaling up faces from the head, with more knowledge and several tries behind me, and you know what? It actually kind of worked out.</p>
 
     <div class="horizontally-centre-aligned">
-        <img src="laura-hair-flat-new-2.webp">
-        <img src="laura-hair-flat-new-3.webp">
+        <img src="laura-hair-flat-new-2.webp" alt="Front view at the character with a green headband and bangs">
+        <img src="laura-hair-flat-new-3.webp" alt="Front view at the character with a green headband and middle-split hair">
     </div>
 
     <p>The right picture is the current iteration of Laura's hair. I added a head band because I thought it looked nice, though that detail is not final.</p>
@@ -106,7 +111,7 @@
 
     <p>Laura's supposed to have a mechanical right arm – on the current model, however, I have applied a mirror modifier, which means her left and right arms are identical. The grey mesh in front of her right arm, however, is the work-in-progress mechanical arm.</p>
 
-    <img src="arm.webp">
+    <img src="arm.webp" alt="Grey mechanical arm">
 
     <p>I'm not entirely happy with this yet. The general shape of the arm is relatively decent, the hinge looks ok, but I feel it's missing something. I think I want to add LEDs to the arm, which in-game can serve to display Laura's health status (alongside a more clearly legible health UI element).</p>
 
@@ -117,8 +122,8 @@
     <p>To illustrate my point (get it?), here are some pictures. Left is in T-pose, right is in A-pose:</p>
 
     <div class="horizontally-centre-aligned">
-        <img src="deform-1.webp">
-        <img src="deform-2.webp">
+        <img src="deform-1.webp" alt="Diagram showing a t-posing character, with the text 'large angle, thus more deformation'">
+        <img src="deform-2.webp" alt="Diagram showing an a-posing character, with the text 'smaller angle, thus less deformation'">
     </div>
 
     <p>However, after watching <a href="https://youtu.be/FXfc4Gyw6I0">this video on bind poses</a> by Doodley, it seems that... it doesn't really matter. Whether you use the T-pose, the A-pose, the lovingly-called hug-pose, or anything else really depends on what you plan to do with your character. Since Laura will mostly wield guns and keep her arms fairly low for most of the game, I decided to change Laura's modelling pose to an A-pose, with her arms pointed 30 degrees downward.</p>
@@ -138,5 +143,5 @@
 
     <p>For the time being, here's a picture of the soon-to-be-retired current protagonist character. Smoothly shaded for your viewing pleasure.</p>
 
-    <img src="retiree.webp">  
+    <img src="retiree.webp" alt="The previous purple protagonist with a shiny body in a seductive pose">  
 </Content>