OSC2: Springs ‍‍‍‍‍‍‍‍‍‍

Open-Source Courses groups advanced skills that are very useful in all sorts of projects. They are completely free to use and no credits will be needed. Support and new topic ideas are very appreciated to help me keep content quality high.


OSC2: Springs

Springs are essential for any sort of physics-based motion animation. I’m very surprised not to see this a lot in Hopscotch - and I’m here to change that! Believe it or not, they’ll become your best friend after finishing reading this tutorial!

What is a spring?

A spring is an object capable of exerting an opposing force when it’s compressed or stretched from its original position. For example, in most ballpoint pens, you will find a small heavy duty coil spring, designed for exerting a force against you when you compress them.

To make sure you understand the vocabulary to code a spring in Hopscotch or any other external code app, let’s learn three new words: stiffness, mass, and damping. You’ll also need to differentiate between an acceleration and a speed. These are keywords in this tutorial and will be mentioned a lot - bring a coffee or tea if it helps you to concentrate! :cookie:

k: stiffness/spring force

The stiffness, or spring force, is the force the spring exerts when it’s compressed or stretched. The more the stiffness value is high, the bigger force you’ll feel. Plus, when you release the spring, a spring with high stiffness will be more violent than a spring with low stiffness.

m: mass

The mass acts the opposite way from the stiffness; the heavier the spring is, the more difficult is to pull it to movement. For instance, a spring will have more difficulty getting back to its equilibrium if it’s attached to a train, compared to if it’s attached to a bee.

d: damping/friction force

“Damping is the force that slows down and eventually stops an oscillation by dissipating energy” - Maxime Heckel. It is a friction force, an acceleration exerted in the opposite way of the current speed. Wait, woah, what a beautiful introduction to acceleration vs speed!

Acceleration vs Speed

The acceleration is not the speed - two are different concepts. If you accelerate constantly your car without stopping, you’ll reach the moon. However, if you put your car at a constant speed, you’ll stay on earth.

Mathematically, this is how the two concepts are different:

⁣ ⁣ ⁣ ⁣ Acceleration: Speed = Speed + 50; your speed will increase infinitely.

⁣ ⁣ ⁣ ⁣ Speed: Speed = 50: your speed stays constant.

Coding a spring

Warning! Like I said earlier, reading the “What is a spring?” section is essential to understand the vocabulary of the following part!

Step 1: Fusion of Hooke’s Law and Newton’s Second Law of Motion

Hooke’s Law is a general law that applies to almost all sorts of springs. It is expressed like so:

F = -kx

Where,

⁣ ⁣ ⁣ ⁣ F is the resulting force a spring applies;

⁣ ⁣ ⁣ ⁣ k is a constant, the stiffness of the spring;

⁣ ⁣ ⁣ ⁣ x is the displacement vector, or in other words, the length and direction from its equilibrium state.

Since Hooke’s law is a general law for physical springs existing in real life, and not for algorithm springs, we’ll add another law: Newton’s second law of motion, which is expressed like so:

F = ma

Where,

⁣ ⁣ ⁣ ⁣ F is resulting force an object applies;

⁣ ⁣ ⁣ ⁣ m is the mass of an object;

⁣ ⁣ ⁣ ⁣ a is the acceleration of an object.

Algebraically, because both two equations have a common result, which is F, the two equations can be fusion and it gives this:

ma = -kx
\frac{ma}{m} = \frac{-kx}{m}
a = \frac{-kx}{m}

And with a little bit of algebra, we isolated the acceleration. This is the value we’ll use to get the spring to work. And if you don’t understand the equation, in English words, this means “acceleration = negative stiffness × distance to center ÷ mass”.

Small bracket: scientifically speaking, this equation makes a lot of sense - discover why!

⁣ ⁣ ⁣ ⁣ The more the stiffness (spring’s force) is high, the more the spring will exert an important acceleration;

⁣ ⁣ ⁣ ⁣ More the distance to the center is high, the more the spring will exert an important acceleration;

⁣ ⁣ ⁣ ⁣ The more the mass of the object attached to the spring is high, the more difficult for the spring to exert an important acceleration.


For some experts in springs, you can already compute mentally the code for executing the previous math equations. I’m going to borrow your knowledge and put it down below for everybody:

stiffness = 0.4;
mass = 7.5;
Speed = 0;
When Game is Playing {
  distance = Y Position - Target Y;
  Acceleration = -stiffness * distance / mass;
  Speed = Speed + Acceleration;
  Set Position to [X Position][Y Position + Speed];
}

And… let’s discover together if this works!

https://files.catbox.moe/egcwtb.gif

Well yes, it surely has a wonderful spring effect, but how’s the animation not stopping? Simply we didn’t add damping in our code, the force that opposes the current movement and direction - let’s fix that! :wrench:

Step 2: Considering damping

Damping is a natural force opposing all movements. It theoretically can be called a “friction force”. Opposing all movements can also be translated as

-ds

Where,

⁣ ⁣ ⁣ ⁣ d is the damping value;

⁣ ⁣ ⁣ ⁣ s is the speed of the spring.

And if we add this is our acceleration equation, we get this awesomeness:

a = \frac{-kx + -ds}{m}

And let’s modify our previous code…

stiffness = 0.4;
mass = 7.5;
damping = 1.5;
Speed = 0;
When Game is Playing {
  distance = Y Position - Target Y;
  Acceleration = (-stiffness * distance + -damping * Speed) / mass;
  Speed = Speed + Acceleration;
  Set Position to [X Position][Y Position + Speed];
}

And… let’s see how well it turns out!

https://files.catbox.moe/pjpmrf.gif

Woah, pretty insane, right? However, you might have noticed something from the beginning - this spring is unidirectional, and in most cases you want the spring to act bidirectionally. Let’s code that together!

Step 3: Bidirectional spring

Implementing bidirectional code allows the spring to go in all directions. For example, if Chillanna is going at an X speed of 45 and a Y speed of 25, her total speed will be ~51.47815 and her angle will be ~29.0546°.

I made multiple tests and the most efficient way to make a bidirectional spring is to have two distances (x and y distances), two accelerations (x and y too), and two speeds (x and y). But not two positions because we’ll enter into a quantum world lol.

stiffness = 0.4;
mass = 7.5;
damping = 1.5;
Speed = 0;
When Game is Playing {
  // Calculate the distance between the target point and the object itself
  distanceX = X Position - Target X;
  distanceY = Y Position - Target Y;

  // Calculate the acceleration to apply to the current speed
  AccelerationX = (-stiffness * distanceX + -damping * SpeedX) / mass;
  AccelerationY = (-stiffness * distanceY + -damping * SpeedY) / mass;

  // Add up the current speed to the acceleration
  SpeedX = SpeedX + AccelerationX;
  SpeedY = SpeedY + AccelerationY;

  // Apply the new position of the object
  Set Position to [X Position + SpeedX][Y Position + SpeedY];
}

https://files.catbox.moe/7guxrq.gif

Woohoo, that’s insane! We made it! We made it! Now, let’s move together our huge knowledge package in a Hopscotch project!

Everything in a Hopscotch project

To understand this section better, if you haven’t done it yet, I strongly suggest you read the “Coding a spring” part because in this part I assume you understand what I am doing. If you have already read that part, nice! Let’s move on.

Step 1 Variables


In a new object, create these three object variables. Then, create a custom rule with the Stiffness, Mass, and Damping as parameters. Inside it, declare the local variables SpeedX and SpeedY.

Step 2: Physics

Add this short code in a When Self Spring-able? = 1 container. You can ignore the comment blocks, they are not important.

Your spring physics should now be done. You have in your backpack a universal code extension, and you can apply the physics to whatever clone whenever you want.

Step 3: Using the spring custom rule

In order to activate the spring animation, there are two steps. One, adding the custom rule in your object. And two, setting the variable “Spring-able?” to 1. Step number two is useful if you use clones.

From what you learned earlier, you can easily change the parameters of your spring using Stiffness, Mass, and Damping. The numbers shown on the screen are examples, a mix of three that I like.

And finally, you can change the spring target wherever in your code, and to whatever value you want. As an example project, I set it to follow the finger:

Example project

Drag your finger across the screen and watch the beautiful magic! Small extra: I also made a magic spring-based button!

This project is also a submission for Hopscotch Innovation Contest under the Code Snippet category.


Hey, I’m sorry that this was a long tutorial but I believe you understood this is very very useful. As always, like subscribe comment I mean this tutorial is completely free-to-use and you don’t need to give credit if you don’t want to :) super excited to see what y’all make!

- Your friendly local train company :steam_locomotive:

18 Likes
Rate this tutorial! :D
  • 1
  • 2
  • 3
  • 4
  • 5

0 voters


Opensource Courses - Request to join! :)

@Cutelittlepuppydog @Mouldycheese8 @William04GamerA @C.H.Rissole @RoadOcean @Temm @Dragongirl1264 @Friday @Nobody @aadenboy @Innerpanda @Bobinny @Dinocomix @Potato @Crosbyman64 @Jay @CreativePenguin @The_Wild_Fox @DogIcing @DaughterOfHecate @hrh @creationsofavillager @Cutedogs1Forum @HapPI314 @894 @Dolphin_Blast @Tabitha @Noland @Potato @RoadOcean @StarlightStudios @TB23 @Bobinny @FearlessPhoenix

18 Likes

This is the best tutorial I have ever seen. Great Job, Tri-Angle!

8 Likes

thank you so much :)

8 Likes

There’s also a thing in springs called elasticity, or the “ability of a deformed material body to return to its original shape and size when the forces causing the deformation are removed.”

The way your springs are now is just perfect. It don’t need no ELASTICITY!!

4 Likes

Awesome! Great job ‘Flank Guard’ > @Tri-Angle! lol I might use this in a future project!

2 Likes

Tri, can you change my tag?

3 Likes

@Crosbyman64, I have a question for you, do you think it would be possible to intergrate spring into platformers? If so, would you mind trying?

4 Likes

And you also need to change @moocow ‘s

4 Likes

I guess @/Jay is now @/Liquid, and @/hrh is now @/moocow. That’s definitely good to know.

What kind of spring?

4 Likes

The one chillanna has in the example project

2 Likes

Are your fingers still on your hand /j

3 Likes

What’s this for?

3 Likes

These tutorials are awesome! I’d like to join the tag list.

Is there a way to request topics that you could cover in the future?

4 Likes

Nice tutorial, I can’t understand EVERYTHING but it looks well made

2 Likes

changed! :+1:

thank you

it will possible - for moving platforms and instable platforms

it looks like you signed up for it - basically, each month, i post a big tutorial about a hopscotch trick, and everything is free to use if you’d like to use it! :D

yes! you can do it here or in the y-taco :)) and added!

i can try to help ;)

6 Likes

Lol, my all time favorite joke :rofl:

1 Like
  1. This would be really interesting to integrate into a platformer with spring tiles
  2. It’s awesome (E) to see physics being recreated in Hopscotch. AP Physics was a fun class to take in high school too, but some of the stuff can be a bit hard to remember, like, um, springs
  3. I thought “why is this poll average so low?”, then I realized it was out of 5. Still pretty low for something with this amount of detail.
  4. Nice Typo in the topic title

Maybe Tri could actually make a YT video for these open-source courses.

4 Likes

yep, i’ll use it when i’ll be coding the tile physics in my platformer (still coding the level editor haha)

yea i personally think there’s absolutely no difference between 8 and 9, 7 and 8, 6 and 7, etc etc so i simply go with 12345.
it’s low probably because this one is a long tutorial :P

:person_facepalming: thanks for catching that lol

there were actually 28 people voting for yt video with voice, but before making one i should:

  1. practice having a better pronunciation
  2. get some free time irl to make the video
  3. get permission from my parents to publish the video with my voice

so i wont atm make videos, but def will if these three conditions are met :D

6 Likes

right, got it now

2 Likes