Buoyancy Simulation: Geogebra & Javascript

4 min readJan 28, 2021

Step-by-Step Procedure for Geogebra Stimulation

To begin the project, I had to first learn some tools and how the web application actually works. So I looked on youtube, where we can find a bunch of videos that use different tools to make the object stimulating. Initially, I learned how to work with the basic features in it. Basically, it is an application that is more used for mathematical tasks and stimulations. However, you can for sure mold and use some tools to do the stimulation implementation. I learned how to add an image and then make it wobble/show a floating effect on the image. In Geogebra you can create shapes with names to them and a lot more things. So, let’s get started with detailed step-by-step instructions for the Buoyancy Simulation Project.

Step1:

In order to create boxes/ floating objects. I created a square with four corners that I could name. Now I added an image to that square. So, now it appears as a box.

Repeating the similar step 1 for creating different boxes.

Step2:

A similar idea is used for the water tank, with one end of the image is movable which helps in changing the level of water. For variations.

- Pro Tip!: Go to step- 10a once, the tip for ease of work!!

Step3:

Make the show axis for X-axis for the positive side.

Step4:

Add start and stop buttons, it simply uses one function from Geogebra, onclick() javascript. Which can be shown below in the code block. Here then, u and o are the three boxes defined here for the task.

StartAnimation(n)

StartAnimation(u)

StartAnimation(o)

Step5:

Now, add a slide bar that is connected to the location of one of the points of the water image, in order to change the water level.

Step6:

Now, it's the most important part, where all the stimulation happens. For the object to have that floating motion, you need to first have a line segment on that plane parallel to the direction you want the object to move. After creating a line segment, mark a point on the line segment. As soon as you see that the point is placed on the line, a play button appears on the point in the left information column. If you click that button you will find that the point moves back and forth on the line segment.

Information on tools in Geogebra: -

The “reflect object in a point” feature in GeoGebra helps to make the selected object/image reflect that point. Now as the point in our case can move back and forth the line segment, so as the image/object can too.

Step7:

Now use this feature, to make the image moving, by selecting the object as the image or the square with the image in it (both would be the same thing). But, now the object is under movement, however in our case, we would not be able to notice that, but the image has been flipped along the Y-axis. Although, the flipping does not matter to this project since the flipped object happens to be the same from all sides (it is a square).

Step8:

Adjust the original object such that the reflected object holds a correct position in the diagram in accordance with the water tank, and the water level.

Repeat the same steps for the other boxes as well, considering their generalized densities.

Step 9:

Now play with the different show and hide commands available in the javascript portion of the Geogebra. What I did was that when you click on the Ice button you will only be able to see the Icebox floating at a specific water level and it will hide all other boxes. This can be done by the code block shown below. Here, the code checks for the visibility of the current box as well as other boxes. I applied the same trick to other boxes as well. A tip ! would be that if you want all boxes to be removed you can just do that by double-clicking any one of the boxes choices.

Below is the commented code block for the rubber box.

SetValue(rubber,If(rubber,false,true))

SetValue(ice,false)

SetValue(show,false)

SetValue(a,3)

Step10:

(Tip)! -:

For all the unnecessary objects at the moment, click on them, click on the 3 dot icon in the small toolbox → Go to settings → uncheck the Show object check box for all the things you think should not be visible. A screenshot has also been attached for reference.

Step 10a: -