Where or how to learn trigonometry for processing?

Hello all! where can i learn trigonometry for processing? or can somebody teach me? my teacher taught it in class and i still don’t understand it, i even watched a bunch of youtube videos and i still don’t understand the concept. i’m at the point where if i don’t learn it i could fail my class because it is used a lot in my class, and my teacher is of no help. Thanks in advance.

Trigonometry is a pretty broad subject. I studied it for a whole year back in school!

That said, the basics.

Imagine a 2D plane. There’s an X axis going to the right, and a Y axis going up.
Where they meet is the origin, AKA (0,0).

Imagine an arrow that is on the X axis. The tail of the arrow is at the origin. The arrow is 1 unit long. The head of the arrow is at the point (1,0).

Now spin the arrow around the origin. The head of the arrow draws out a circle, right?

Imagine that circle. Its center is the origin. The radius of it is 1. Its diameter is 2. What’s its circumference??

That’s right, TWO_PI. Since PI = C / D, it follows that C = D * PI. And as I just said, D = 2, and 2 times PI is TWO_PI.

Now image that circle is a pizza. You know what a pizza is, right? This pizza is cut into 8 equal pieces. Picture just one slice that sits on the X axis. That slice has a burnt edge on the X axis. The other edge is cheesy. It also has some crust. How long is the crust of the slice? Well, it’s 1/8th of the whole circumference, so it has a length of PI / 4.

Okay. Now here’s the real kicker. I don’t want the crust on my pizza. So I’m going to cut it off. But my cut has to be very exact. I want to cut along a line that is parallel to the Y axis, cuts off all of the crust, and as little pizza as possible. Make sure the cut is EXACTLY VERTICAL! Make sure it cuts off ALL the crust!

Can you picture it? OKAY! Now look at this diagram.

Got it? Do you see all these parts?

3 Likes

i think i understand all this but i am confused on how to translate it to processing. for example, it i want to draw a polygon with a line, how do i decide what the number for each angle should be? i can’t figure that out, or if i want to draw a rose petal i can’t even think of how to do that either, or even a sine wave.

Well get back to the pizza in a moment.
We need to talk briefly about functions.

As a wizard, I can do magic tricks to numbers. One trick I can do is to double any number you can think of. You tell me a number, and I can double it. If you tell me the number 2, I tell you 4. You say 19, I say 38. You get the idea.

I can also do a second trick that adds four to any number you can think of. You tell me a number, and I can add four to it. 2 gets you 6, 19 gets you 23, you understand.

The point is, you say one number, and that number (via math magic!) turns into another number.

I am obviously a terrible wizard.

But the idea is the same. The magic is functions. One number goes in (and we’ll call that number X), and another number coms out (and we’ll call that Y).

So my two magic tricks I’ve told you about are the following:

Y = X * 2

Y = X + 4

Hm. Let’s make them just SEEM more impressive. Let’s give them fancy names:

Y = double(X)

Y = add_four(X)

The underlying magic is the same, okay? the double() function just doubles a number. The add_four() function adds four to a number. Like magic!


There are two more spells I know, as a wizard. They are sin() and cos().

It’s hard to tell you how they work. We’ll get back to that in a moment. The point is, they work in the same way as my other spells. You tell me a number, and I tell you a number based on that number, and some magic.

Okay.

I will now pull back the curtain and tell you how sin() and cos() work.

If you tell me a number, I imagine a slice of pizza that has a crust that is as long as that number.

Then I make that vertical blue cut to remove the crust from the pizza.

If you’re asking me to cast sin(), the number I tell you is the length of the cut. That is, the distance from the bottom of the cut (green point) to the top of the cut (pink point).

If you’re asking me to cast cos(), the number I tell you is the length of the remaining burnt edge. That is, the distance from the origin (purple point) to the bottom of the cut (green point).

… That’s it. That’s the whole trick. TA DA!

4 Likes

Now here’s something else to realize. The length of the crust really only depends on the angle at the tip of the slice. Larger angles mean more crust. If you have a slice that’s 1/4th of a whole pizza, my cut is along the cheesy edge, and I have to throw out the whole slice, so the remaining burnt edge is 0.

In other words, sin( PI / 2 ) = 1 and cos( PI / 2 ) = 0.


Okay. Let’s say you want to draw a hexagon.
Hexagons are the bestagons, you know?

To draw a hexagon, you need six points for the corners of the hexagon. Then you can just draw the lines between them, right?

The problem is, when you try to draw a line(), the function is expecting four values that are the X and Y positions of the endpoints for that line. How can we know what these values should be?

Now imagine a pizza cut into only six slices! AH HA!

For the first slice, the angle at the tip of the pizza is TWO_PI / 6, or PI / 3.
So we know that one of the points we want is at…
( cos( 1 * PI / 3 ) , sin( 1 * PI / 3 ) ).

If we jam two slices together, the pizza tip angle is now 2 * PI / 3.
So we know that the next points we want is at…
( cos( 2 * PI / 3 ) , sin( 2 * PI / 3 ) ).

If we keep jamming slices together, we can see the rest of the endpoints we want are:
( cos( 3 * PI / 3 ) , sin( 3 * PI / 3 ) )
( cos( 4 * PI / 3 ) , sin( 4 * PI / 3 ) )
( cos( 5 * PI / 3 ) , sin( 5 * PI / 3 ) )
( cos( 6 * PI / 3 ) , sin( 6 * PI / 3 ) )

So really, you can just use a loop to draw the hexagon!

for( int i = 0; i < 6; i++ ){
  line(
      cos( i         * PI / 3 ), sin( i         * PI / 3 ), 
      cos( ( i + 1 ) * PI / 3 ), sin( ( i + 1 ) * PI / 3 )
 );
}

2 Likes

Of course, all the lengths so far are in circles that have a radius of 1. So all the resulting lengths for cuts and remaining burnt edges will be less than one.

But imagine a larger pizza. One with a radius of 2, for example.
Since all the measurements are lengths, they all just simple double!

A pizza with a radius of 50 will have a hexagon 50 times as big (in terms of side length, not area!), and to draw its endpoints, just multiply all the lengths involved by 50:

for( int i = 0; i < 6; i++ ){
  line(
      50 * cos( i         * PI / 3 ) , 50 * sin( i         * PI / 3 ), 
      50 * cos( ( i + 1 ) * PI / 3 ) , 50 * sin( ( i + 1 ) * PI / 3 )
 );
}

Let’s say you want to draw a wave. The X values will start at 0 and go to width. We can use map() to map form the range [0, width] to a pizza-tip angle of [0, TWO_PI]. We’ll want our wave to have some height to it, so use a bigger pizza too.

for( int x = 0; x < width; x++ ){
  line(
      x,   50 * sin( map( x,   0, width, 0, TWO_PI ) ), 
      x+1, 50 * sin( map( x+1, 0, width, 0, TWO_PI ) )
 );
}

You’ll have to be more specific about what you mean by a rose. A rose curve?

All code untested. For real trig lessons, consult a real teacher. Yes, I do like pizza.

2 Likes

You might have already watched but the coding train is always helpful :steam_locomotive:

see Trigonometry Primer \ Processing.org

yeah, i watched it. but i had problems translating it to other processing codes like polygon, rose petal, etc.

i read that but i was still confused.

1 Like

Can you be more specific about what is confusing you?
What exactly are you trying to do?

1 Like

for example i think i get the whole idea, but when my teacher gives us some kind of assignment, like drawing a rose petal, polygon, etc. i am not sure what the right angle should be, what the sine, or cosine should be.

1 Like

You are not giving us a lot to work with there. It is quite hard to help you with a topic as wide as trigonometry. The best way to work it out is to have a concrete example of something that you want to do and where your blocking points are.

@TfGuy44 spent quite a bit of time walking you through the most basic concepts of trigonometry. Did you read it? Did you understand everything? Is there things that you don’t understand at all?

2 Likes

@TfGuy44 Thanks for the crusty explanations about pizza, love it! :wink:

1 Like

@TfGuy44 by the way (I am not profficient at all in trigenometry other than the effects of sin, cosin, tan and atan)

Given a circle (center point and radius) how do you find the points on that same circle that are x away from a original point? (Imagine drawing a circle with a compass and giving it radius 10, and than choose a random point on the drawn line and making another, smaller circle. How to find the two points where the circles intercept?

Take a look at the last answer i posted which may give you some ideas about trig in context

https://discourse.processing.org/t/need-help-with-trigonometry-or-circle-geometry/28773/12

Hi. Thanks for the interesting question. Here’s how I would do it:

Centre the first circle, R, on the origin. Centre the 2nd circle, r, at the intersection of the first circle with the positive x-axis.


The two circles intersect at
Screen Shot 2021-04-08 at 22.52.44
and
Screen Shot 2021-04-08 at 22.53.55

Once you find the intersection points you can calculate the angle between them and the centre of circle r (using trig!). Then just rotate those points to the location that you want on circle R.
Hope this helps. If you have any questions, or anything isn’t clear, let me know.

2 Likes

Thank you for the answer. You used a lot of clever workarounds! Never thought it could be done this way. It is really interesting!

I wish you a nice [insert time of the day]!

Hello,

https://betterexplained.com/articles/intuitive-understanding-of-sine-waves/

:)

Techie humor!

:)