Tangent Tutorial


I've made a simple (I hope!) Tangent Tutorial,

Please ask questions about Tangent here or publish a project with IKeudin in the title.

Maths blocks? Please reply
Sine And Cosine Help

Cool tutorial!

Maybe go more in depth with the tan() block and what it does?


Yes, a bit more explanation would be helpful but overall a very cool project.:+1:


Wait, so... is that line's "c" value the tangent of the triangle? What do I plug into the blanks of the block to calculate the tan?


I believe it goes

Tan x = sin x / cos x


Hi @t1_hopscotch!

(Saw you liking the posts.)

Any insight into using tan?


Awesome tutorial, lovely of you to make it @IKeudin!!

Great question @Rawrbear :smiley: that line's c value is the length of that side, I think it's related to something called Pythagoras' theorem though.

Hi @KVJ!! (I was in the middle of writing before you mentioned actually :joy:) I realised just now after seeing this forum post that I'd made some diagrams on showing how to use the sine, cosine and tangent but never got to talk about them. Now would be a great time, yay!

This part is to help with understanding more about the basics of where sine, cosine and tangent come from. Let's look at a right-angled triangle:

This is a graph for the sine of angles from 0° to 360° :smiley::

I marked in sin(~37°) = 3/5, sin(30°) = 1/2 and a few more to illustrate :slight_smile:

In Hopscotch you can move the graph up and down, make it wider or narrower and so on :slight_smile: There are other great posts on that under sine and cosine tags :smiley:

The same idea applies for cosine and tangent:

cos(angle) = A/H

Graph of cosine of angles from 0 to 360 degrees:

tan(angle) = O/A

Finally, this is a graph for the tangent of angles from 0 to 360 degrees. It's a little out of scale :grin: but tan(~37°)=3/4 and tan(45°) = 1 as some examples

So sine, cosine and tangent are related to the ratios of sides of a triangle :smiley:

This originally started as an idea for an animation actually and I may as well have pointed to the [Intro to the trigonometric ratios video from Khan Academy] but here it is in readable form :slight_smile:

That's to help with a basic understanding, using these trig ratios is a whole world in itself — look at all the awesome things people have created on Hopscotch :smiley:

Just like you can graph sine and cosine of an object's x position, you can also graph tangent. The shape looks like this:

Link to basic tangent graph project

You can play around with the shape just like you can play around with the shape of a sine or cosine graph. In that project, I put these blocks:

The bubble with + 384 is the position where the graph will be centred, and the 5 is how steep the graph will go.

I wish I could explain more in more depth, but this is a wiki (not entirely sure on how they work yet) so feel free to add on anything! (I was running out of time when I introduced cosine and tangent, apologies ;( feel very free to elaborate there!)

I think I went a lot into the fundamentals but it's what I need to refer to, so maybe this can provide the basis when you need to refer to anything too :smiley:

Whew that's super long. If you're looking at this for the first time, it may be confusing don't worry. Just like everything, you can take it bit by bit and the more you come across it, the more you'll remember each time :smile:

Can somebody explain sine and cosine?
JonnyGamer and t1's Math Blog!
Help with tangent

Wow that's really helpful!! :smiley:


Don't confuse Pythagorean Theorem with sine, cosine, and tangent.

Pythagorean Theorem gives the relationship between the length of all 3 sides of a right (90 deg) triangle.
A^2 + B^2 = C^2
From which we can say
C = sqrt(A^2 + B^2)
A = srqt(C^2 - B^2)
That's great, but it doesn't have anything directly to do with tangent.

Sine, cosine, and tanget give the relationship between the length of 2 sides and an angle of a right triangle
Which to use just depends on what you know.

In Hopscotch I use inverse tanget much more than tanget. This is because I know O & A and want to know theta.
- O is usually the change in Y position between two objects
- A is usually the change in X position between two objects
- Theta is the angle, so
theta = inverse tan(O/A)

@IKeudin eluded to this usage:

The bit about "set a block to turn" is where we'd use inverse tangent to calculate the angle (as shown above in bold*).

*sorta. Inverse tangent doesn't always give the right answer depending on the relationship of the two objects. The fix straight forward but I'm not sure if anyone would be interested. If someone is I'm happy to explain more.


That's a cool tutorial and project!:grinning:


Which is where I got confused, as I didn't understand if this was meant to be a tutorial for the Pythagorean theorem or tangent..?

EDIT: (I believe) I guess pretty much what @ThinBuffalo mentioned had happened here, the Pythagorean Theorem had been confused with tangent. I (non-firmly) believe this had happened here, so it caused some confusion on my part.


What would be an example of a project that you would have to find the "theta" variable in order for the project to work?


Finding the angle from one object to another (point towards) is a common usage for inverse tangent

Point Towards (using inverse tangent)
Using inverse tangent (arctan) is much simpler than the "old school" formula employed before the inverse trig blocks were added.

The Check If is used because when the angle is not -90 < theta < 90, tangent returns an angle off by 180 deg. More sophisticated languages will have an Atan2 function to addre.ss this. In Hopscotch we simply need to check the x positions & subtract 180 if necessary.

Can someone help me with inverse tangent
How do I make an object follow another?
How do you make objects point at last touch?
Jedi Adventures! (Game Changer?) Published!
Help with my tiny tanks game
Point towards touch location

Of course kvj said something about sin and cos

He is the sin and cow MASTER!!!


Lol it autocorrected to cow! I'm gonna leave it like that cuz it's funny!


Ooh, I get it. I'd like to try to replicate this. Would you like any credit?

Thank you! ^^


I'm not the sin and cow master...


@Rawrbear, you're welcome. No credit necessary.

If you want to try a thought experiment, would you be interested to trying to write the arctan point towards code with just one line of code? Ie, a single Set Angle & no If blocks.


Could you help me with what the actual block does please? I'll give you credit, obviously!


Lol scroll a post or two down from mine :stuck_out_tongue: