Trigonometry Wars 3.14

There is a game called “Geometry wars – evolved” that has some really nice and simple graphics. I really like the “background image” of the game. It consists of a grid with springs that you dynamically interact with when you fire your weapon. It gives a nicy wavy motion. So my aim with this project is to create a piece inspired by that. My idea is that I create some object based in a grid pattern and these objects are connected with lines. When you press the mouse the distance from the mouse to the objects determine the magnitude of the force that affects them. First I need to figure out how to get the magnitude of the force. Like in my previous post Pythagorean and olives I will use the Pythagorean formula to get the distance from the mouse to the object. Than I inverse and clamp that value so that the range is from 0 to a maximum distance. When I inverse the value it will be at maximum force closest to the object and then drop off linear to o when reaching the max distance value.

Important Formulas:

Sine

The sine of an angle is the ratio of the length of the opposite side to the length of the hypotenuse.

Cosine

The cosine of an angle is the ratio of the length of the adjacent side to the length of the hypotenuse. In our case

Using the Pythagorean formula I get the length of  “h” and the angle “A”. To invert and normalize the hypotenuse I use the max function

var force = Math.max(0,(max_dist - dist));

Using Sine formula I get the opposite “a” (y coordinate) using: y coord = sin(A) * force) + clip_mc.y;

To get the adjacent “b” I use: x coord =  cos(A) * force) + clip_mc.x;

Get Adobe Flash player

I created a grid of objects and drew some lines connecting them. When I did this I wanted to create a smooth drop off between the objects affected by the force. In the case above the object gets affected by the inverse of the hypotenuse starting as soon as the object is closer than max_distance. When i played around with the numbers I got this effect. Is it familiar ? :)

Get Adobe Flash player

In this swf I´ve added the function to explode the grid by clicking !

Get Adobe Flash player

2 Responses to Trigonometry Wars 3.14
  1. [...] to control the rotation and another attribute to control the radius of the motion arc. I the post Trigon... theshapeofmotion.com/after-effects-and-pythagoras
  2. [...] to control the rotation and another attribute to control the radius of the motion arc. I the post Trigon... theshapeofmotion.com/after-effects-and-trig

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>