Tomorrow Evening » Trigonometry

Useful Trig Methods

Colin — Tue, 10 Nov 2009 05:36:27 +0000

I've recently been working on a physics/trigonometry project at home using Processing and memo's amazing MSARemote. In short, I realized I haven't posted anything on Tomorrow Evening in ages, I have a lot of cool things up my sleeve right now, just trying to find time to get all these ideas out. I'll be taking all of Thanksgiving week off to take a break from work and do some fun experiments. If I weren't a web developer I'd turn my internet off for a few weeks, I keep finding such great developers/art online that I start something new every other day and never finish what I was working on the day before! That needs to end soon :P. I know I said I was doing a Processing experiment and this code is in AS3 but I have a good reason why! My wordpress doesn't know how to format processing code and since it's only a few lines, I converted it to AS3.

function findDistance(x1:Number, y1:Number, x2:Number, y2:Number) : Number{
  var xd:Number = x1 - x2;
  var yd:Number = y1 - y2;
  var td:Number = Math.sqrt(xd * xd + yd * yd);
  return td;
}
 
function findAngle(x1:Number, y1:Number, x2:Number, y2:Number) : Number{
  var xd:Number = x1 - x2;
  var yd:Number = y1 - y2;
 
  var t:Number = Math.atan2(yd,xd);
  var a:Number = 180 + (-(180 * t) / Math.PI);
  return a;
}

Logarithmic Spiral

Colin — Wed, 20 May 2009 01:27:35 +0000

Like my previous post, I'll teach you how to draw a spiral using code. This spiral's radius increases per iteration, thus the distance between arms increasing.

First off, the math equation...

r = a * b * O

r = Radius
a = Turn of the spiral
b = Distance between arms
O = Theta (greek character now allowed in post)

Theta is the variable which is constantly updated, so in the instance of showing the spiral being created, we'll say that O = the degree; in other words, O = (O < 360) ? O++ : O = 0;

We also need to determine the X and Y values of where to draw the new point. Since we get the value for r, we simply need to split it up uysing sin and cosine.

Cosine is used to retrieve the X value
Sine is used to retrieve the Y value

Here's our final code:

const speed:Number = 2;
const a:Number = 0.25;
const b:Number = 10;
const midX:Number = 200;
const midY:Number = 150;
 
var angle:int = 0;
var px:Number = 0;
var py:Number = 0;
 
var sp:Sprite = new Sprite ();
sp.graphics.lineStyle (0.1, 0x000000);
sp.graphics.moveTo (midX, midY);
addChild (sp);
 
addEventListener (Event.ENTER_FRAME, _enter);
 
function _enter (e:Event) {
	angle -= speed;
// add the midpoints so that the spiral starts from the center of your stage :)
	px = midX + (a * Math.cos (toRadians (angle)) * (b * toRadians (angle)));
	py = midY + (a * Math.sin (toRadians (angle)) * (b * toRadians (angle)));
	sp.graphics.lineTo (px, py);
}
 
function toRadians (degrees:Number) : Number {
	return ((degrees / 180) * Math.PI);
}

Archimedian Spiral

Colin — Wed, 20 May 2009 01:26:02 +0000

Ever draw spirals in your notebook when you're doodling? Well this will teach you just how to code such a thing!

First off, the math equation...

r = a + bO

r = Radius
a = Turn of the spiral
b = Distance between arms
O = Theta (greek character now allowed in post)

Theta is the variable which is constantly updated, so in the instance of showing the spiral being created, we'll say that O = the degree; in other words, O = (O < 360) ? O++ : O = 0;

We also need to determine the X and Y values of where to draw the new point. Since we get the value for r, we simply need to split it up uysing sin and cosine.

Cosine is used to retrieve the X value
Sine is used to retrieve the Y value

Here's our final code:

const speed:Number = 2;
const a:Number = 0.25;
const b:Number = 10;
const midX:Number = 200;
const midY:Number = 150;
 
var angle:int = 0;
var px:Number = 0;
var py:Number = 0;
 
var sp:Sprite = new Sprite ();
sp.graphics.lineStyle (0.1, 0x000000);
sp.graphics.moveTo (midX, midY);
addChild (sp);
 
addEventListener (Event.ENTER_FRAME, _enter);
 
function _enter (e:Event) {
angle -= speed;
// add the midpoints so that the spiral starts from the center of your stage :)
px = midX + (a * Math.cos (toRadians (angle)) * (b * toRadians (angle)));
py = midY + (a * Math.sin (toRadians (angle)) * (b * toRadians (angle)));
sp.graphics.lineTo (px, py);
}
 
function toRadians (degrees:Number) : Number {
return ((degrees / 180) * Math.PI);
}