Iceberg simulator – draw an iceberg and see how it floats and melts

The code has been updated to allow for multiple chunks of icebergs now, which can occur via melting and also if you draw an iceberg a certain way.

Visualize how icebergs of different shapes will float based on the brilliant Iceberger

I was so impressed with the interactive Iceberger tool that Josh Tauberer (@JoshData) made that I had to modify it and add some additional features. Click here to see the original. My additions allow you to conjure up pre-made “icebergs” to see how they float and also allow some interaction. Try “poking” the icebergs you make.

Josh and I were both inspired by a tweet by Megan Thompson-Munson (@GlacialMeg).

Instructions
You can choose between 3 different iceberg creation options:

• Draw Iceberg – the original Iceberger option. Choose this option and draw any shape you want and see how it floats.
• Select State – Choose this option and select from one of the states of the United States to see how it will float.
• Select Shape = Choose this option and select from one of the premade shapes to see how it will float.

Once the iceberg has been created, you can also affect it in a couple of different ways:

• Click on the Iceberg – This lets you push on the left side of the iceberg to induce some rotation and see if there are multiple stable orientations. Click it several times in a row if you want to flip the iceberg over. If you push on the right size it will rotate the iceberg clockwise and if you push on the left size, it will rotate counter clockwise. if you push in the middle third of the iceberg, it will push it straight down.
• Melting – You can select between different options – No melting, slow medium and fast. This took awhile to code correctly. Previously, I’d just scale parts of the iceberg but this new code actually takes material away from the surface of the iceberg in a uniform way. It works more like you would expect melting ice to behave.
• Changing the Sky – You can change the colors of the sky between sunrise, midday and sunset colors.
• Showing forces – You can toggle whether to show the center of buoyancy and center of gravity of the iceberg.

Some Math – no equations
The force of gravity (G) affects the entire body regardless of where it is or how it is oriented. If you show the forces, the red dot labeled G shows where the center of mass of the iceberg is. The blue dot labeled B shows where the center of buoyancy is. This is the center of mass of the part of the iceberg that is submerged. The force acting on the submerged part is equal to the volume of water displaced. If the center of buoyancy is below the center of gravity, then the forces will be equal and object will be in stable equilibrium. If the center of buoyancy is somewhere other than under the center of gravity, then the buoyant force will be pushing up on a different place than the gravity force and this will induce a rotation until they are directly over one another.

The code has been updated so that multiple icebergs are now allowed. Melting can separate a single piece of iceberg into multiple pieces, just as in real life. The melting process was a bit difficult to program because of the complexity of shapes that could be produced.

If you have additional suggestions for shapes or countries to add to the list, let me know in the comments.

Sources and Tools:
This visualization uses HTML/CSS/Javascript code from the Iceberger app to simulate the buoyancy of icebergs. Melting was accomplished with the help of code from the turf.js, polygon-offset and simplify.js javascript libraries. Additional elements of the UI and other features are also made using HTML, CSS and javascript.

---

---

---

5 Comments »

from Hacker News https://ift.tt/309jwPY