update random stuff

Author: stevenctl

content/tech/buoyancy/foam.png

@@ -6,19 +6,21 @@ weight: 920
 
 {{<video "demo.webm" >}}
 
-For the intro to a game I (perodically) work on, I decided to put the player on
-a pirate ship. Scrolling textures on a big plane looked pretty boring. To make
-things a bit angrier I decided to add waves.
+During the intro to a game I (perodically) work on, the player starts on a
+pirate ship. Realistic water doesn't fit the style, and scroling textures on a
+big plane looked pretty boring. To make things a bit angrier I needed intense
+waves, and I needed those waved to actually affect the world.
 
 ## Waves
 
-The visual component is the most common technique for basic waves: displacing
-the height of each vertex on a subdivided plane.
+To keep it simple, we'll just do a procedural heightmap; i.e. set the vertical coorinate to
+be a function of the horizontal position and time.
 
-Inspired by [sum of sines](https://developer.nvidia.com/gpugems/gpugems/part-i-natural-effects/chapter-1-effective-water-simulation-physical-models#:~:text=The%20sum%20of%20sines%20gives,to%20the%20continuous%20water%20surface.)
-which can make semi-realistic ocean shaders, I'm taking the basic idea of adding two waves
-with different frequencies to break up the repetitiveness. The result is good enough for this
-cartoon style.
+[Sum of
+sines](https://developer.nvidia.com/gpugems/gpugems/part-i-natural-effects/chapter-1-effective-water-simulation-physical-models#:~:text=The%20sum%20of%20sines%20gives,to%20the%20continuous%20water%20surface.)
+can add some semi-realistic texture to the surface of the water. I'm not doing
+that, but I am taking the basic idea of adding two waves with different
+frequencies to break up the repetitiveness.
 
 
 ```glsl
@@ -38,16 +40,20 @@ void vertex() {
 
 ## Floating
 
-There are two components to making objects float on top of our waves:
+The fun part is making the waves interactive. There are two components to
+making objects float on top of our waves:
 
 * Position: move the object up and down so it sits on top of the water.
 * Rotation: orient the object according to the slope of the waves.
 
 We generally want some of the object to sit beneath the surface of the water.
-Instead of doing anything fancy like using volume to calculate actual buoyancy,
-we can just define our own y-offset from the model's postition, and a 2D size
-of the "buoyancy-plane". In Godot, `CSGBox3D` conveiently lets us visualize and edit
-these properties.
+There are more realistic buoyancy simulations that figure out the displacement according
+to the amount of a volume that sits beneath the surface. The complexity and noise that
+comes with an accurate solution doesn't fit the style, so instead we're going to fit a plane to
+the waves surface.
+
+It's easy to adjust the plane within the Godot editor, without doing anything
+custom, by defining a CSGBox3D that is thrown away at runtime.
 
 ![CSGBox3D as a buoyancy plane](boundingplane.png)
 
@@ -85,27 +91,26 @@ because I assume the shape of my rectangle is longer on that axis.
 
 ```gdscript
 # find the corners (the rotation puts us into global space, needed by _wave)
-var front_r = center + (Vector3(size.x, 0, size.y) / 2.0).rotated(Vector3.UP, plane.global_rotation.y)
-var front_l = center + (Vector3(-size.x, 0, size.y) / 2.0).rotated(Vector3.UP, plane.global_rotation.y)
-var back_r = center + (Vector3(size.x, 0, -size.y) / 2.0).rotated(Vector3.UP, plane.global_rotation.y)
-var back_l = center + (Vector3(-size.x, 0, -size.y) / 2.0).rotated(Vector3.UP, plane.global_rotation.y)
-
-# project the points onto the wave
-front_r.y = _wave(front_r)
-front_l.y = _wave(front_l)
-back_l.y = _wave(back_l)
-back_r.y = _wave(back_r)
+# Define corners in local space
+var local_corners = [
+    Vector3( half_x, 0,  half_z), Vector3(-half_x, 0,  half_z), # front
+    Vector3(-half_x, 0, -half_z), Vector3( half_x, 0, -half_z), # back
+]
+
+# Rotate and add to center (global space), then apply wave
+for i in range(local_corners.size()):
+    local_corners[i] = center + local_corners[i].rotated(Vector3.UP, rot_y)
+    local_corners[i].y = _wave(local_corners[i])
+
+# Also project center on the wave
 center.y = _wave(center)
 
-# average normals from the triangles
-var normal_f = (front_l - center).cross(front_r - center).normalized();
-var normal_b = (back_r - center).cross(back_l - center).normalized();
-
+# Compute the two triangle normals
+var normal_f = (local_corners[1] - center).cross(local_corners[0] - center).normalized()
+var normal_b = (local_corners[3] - center).cross(local_corners[2] - center).normalized()
 
-# rotation based on avg of cross products of triangles in the plane
-var normal = ((normal_b + normal_f) / 2.0)
-# undo the global space transformation
-normal = normal.rotated(Vector3.UP, -plane.global_rotation.y).normalized()
+# Average the normals, then undo the global space rotation
+var normal = ((normal_f + normal_b) * 0.5).rotated(Vector3.UP, -rot_y).normalized()
 ```
 
 {{< gallery >}}
@@ -117,23 +122,27 @@ normal = normal.rotated(Vector3.UP, -plane.global_rotation.y).normalized()
 From left to right are examples using the back normal, the averaged normals and
 the front normal on top of a sharp peak.
 
+To be scientific about it, I plotted a "smoothness" field, the gradient of the computed
+normal-field. Not very surprising, sampling a bigger area results in smoother changes.
+The cross-product approach had the lowest variance, and spreads the variance around a larger
+space.
+
+![smoothness graph](smooth_field.png)
+
 ### Position
 
-Assuming our buoyancy-plane is already offset from the model, and we use
-`position.y = wave(position.xy)`, concave parts of the curve will have the boat
-dip into the water on each side.
+A naive `position.y = wave(position.xy)` means that at concave parts of the curve,
+our plane will undernath the surface.
 
 {{< gallery >}}
     <img src="finite_diffs_width.png" class="grid-w50"/>
     <img src="adjust_pos.png" class="grid-w50"/>
 {{< /gallery >}}
 
-We should re-frame our goal to be none of the or extremes of our bounding shape
-dip under the water. If we instead use the mean of our samples, we fix the concave case but now we'll
-end up submerged in convex areas.
-
-To get the best of both, we just take the `max` of the center sample or the edge
-samples ([desmos](https://www.desmos.com/calculator/y4neofo1zw)).
+If we instead use the mean of our samples, we fix the concave case but now
+we'll end up submerged in convex areas. To get the best of both, we just take
+the `max` of the center sample or the edge samples' mean
+([desmos](https://www.desmos.com/calculator/y4neofo1zw)).
 
 ```gdscript
 # for central differences, re-use the samples
@@ -240,11 +249,15 @@ parent.velocity.y = impulse.y
 
 {{<video "swim.webm" >}}
 
-## Conclusion
+## What's next
+
+* Make some levels with this!
+  * Swimming/water levels. Diving?
+  * Make it so you can drive the ship.
+  * Taking advantage of the waves to gain some height could be a game mechanic.
+* A better surface shader, that uses depth and a bit of transparency.
+* ~~Foam.~~ I made foam!
+
+
+![foam](foam.png)
 
-Both the game's frame-budget and my own free time to work on personal projects
-are limited. It might be fun to implement a proper plane fitting algorithm such
-as [Least Squares](https://en.wikipedia.org/wiki/Least_squares) or [Principal
-Component
-Analysis](https://en.wikipedia.org/wiki/Principal_component_analysis), but the
-added fidelity (and noise) aren't worth the effort for this style of game.

content/tech/buoyancy/index.md

@@ -172,10 +172,11 @@ quite a work in progress. Currently you can import content from:
 
 Major TODOs are:
 
-* Allow saving stories to be read later
+* ~~Allow saving stories to be read later~~ Done!
 * An editor mode that allows writing and editing content directly.
-* A button that shows other potential words in the dictionary if my automated
-  mappings are wrong.
+* ~~A button that shows other potential words in the dictionary if my automated
+  mappings are wrong~~. Done!
+* ~~Custom TextPainter and Markdown support~~ Done!
 * Potentially, a curated library of content. I'm not sure how I'd source this
   legally and ethically. Unless...
 * Users or teachers could produce and share their own content, potentially
@@ -350,17 +351,31 @@ would be fun to one day play in a competition overseas in Taiwan or mainland
 China. Besides the daily review, you can also do a cutom review and filter
 using these tags if you're studying a particular topic.
 
-## Conclusion
-
+## What's next?
 
 {{< gallery >}}
 <img src="pics/stats.png" alt="tag on words" class="grid-w100">
 {{< /gallery >}}
+
 The main idea of the app is "bring your own content". I've been dogfooding
 it for a little while now, and it has definitely sped up my vocab acquisition.
-I'm not sure whether the long term plan is to polish it and publish it as FOSS,
-or to make it a closed source side-hustle.
-
-In the meantime, I'll continue to iterate. It's a slow going process and I
-just have the nights and weekends that I'm not doing other hobbies like BJJ or
-Yu-Gi-Oh. I'm happy with the progress I've made so far.
+There is a lot of polish yet to be done. Scalabilty checks, testing on other devices,
+and just a couple more features:
+
+* A screen reader to get the tap-to-lookup experience in any app. Likely
+  Android only.
+* Curated content library. Maybe even daily/weekly releases of short readers,
+  like [Maayot](https://www.maayot.com/).
+* Reccomendation algorithms to asses a new user's current Chinese level, and
+  
+* Test the pinyin model, and potentially train an additional model, to ensure
+  traditional chinese works well.
+* Integrate a higher quality dictionary. CEDIT is pretty good, but I at least need
+  to have the option to hide "Potentially innapropriate words". For example,
+  reading about [a duck (鸭) shouldn't show a slang definition "male prostitute" by
+  default.
+  ](https://www.mdbg.net/chinese/dictionary?page=worddict&email=&wdrst=0&wdqb=%E9%B8%AD)
+
+I'm not sure when it will be done.I'll continue to iterate. It's a slow going
+process and I just have the nights and weekends that I'm not doing other
+hobbies and work. Hopefully I can make this project a priority in the near future.

content/tech/buoyancy/smooth_field.png

@@ -17,9 +17,9 @@ I want to use heightmaps to add details without extra geometry. The concern is
 mostly on my workflow, not on performance. I'm simply too lazy to model that into
 my modules in a tileable way.
 
-The effect is turned up a bit to make it extra apparent int he sample. The floor
-shouldn't be offset so strongly if you want to have a character walk on it without
-them appearing to levitate.
+The effect is turned up a bit to make it extra apparent int the images here.
+The floor shouldn't be offset so strongly if you want to have a character walk
+on it without them appearing to levitate.
 
 ## Heightmap with Deep Parallax
 
@@ -36,11 +36,10 @@ tutorial, and I think the results are just fine.
 
 ## The Shader
 
-Here's the code for those who are interested. It's mostly me gluing code from
-various tutorials together. Also there's some unnessary conditionals I have for
-toggling the ability to use two sets of textures for the walls and floor. In
-reality there should be a separate shader for each, or some preprocessor stuff
-instead of a runtime check.
+It's mostly gluing code from various tutorials together. Also there's some
+unnessary conditionals I have for toggling the ability to use two sets of
+textures for the walls and floor. In reality there should be a separate shader
+for each, or some preprocessor stuff instead of a runtime check.
 
 ```c
 shader_type spatial;