A better Math.Sin()

Sine waves are great and all, but for us non-mathematicians they are difficult to visualize and tweak. So, lets dissect and analyze this ultra-common trig function.

Scalpel, please

A sine wave calculation has one core parameter, an angle. In AS3 this angle needs to be in radians. But we can expand this into five parameters and two modifiers for a total of seven parts. That’s right, seven different parts:

  • Amplitude: Deviation from center (aka. height of the wave)
  • Frequency: Radians per second (aka. speed of the wave)
  • Offset: Shifting the wave’s position from center (usually a y-offset)
  • Phase: Shifting the wave by time
  • Wavelength: Distance between waves
  • Position: Position at which to calculate the state of the wave (usually an x-position)
  • Time: A point of time at which to calculate the wave

Each of these parts can be combined into a single line of code:

amplitude * Math.sin(((2 * Math.PI) / wavelength) * position - (frequency * time) + phase) + offset;

That makes it really easy to wrap it in a function or a class, like so:

public class Sine
{
	// ------------------ //
	// --- properties --- //
	// ------------------ //
 
	public var amplitude:Number;
	public var frequency:Number;
	public var offset:Number;
	public var phase:Number;
	public var wavelength:Number;
 
	// ---------------------- //
	// --- public methods --- //
	// ---------------------- //
 
	// constructor
	public function Sine(amplitude:Number=0, frequency:Number=0, offset:Number=0, phase:Number=0, wavelength:Number=0)
	{
		this.amplitude = amplitude;
		this.frequency = frequency;
		this.offset = offset;
		this.phase = phase;
		this.wavelength = wavelength;
	}
 
	public function calculate(time:Number, position:Number):Number
	{
		return this.amplitude * Math.sin(((2 * Math.PI) / this.wavelength) * position - (this.frequency * time) + this.phase) + this.offset;
	}
}

Rock n Roll

Now that you have added this sweet-ass tool to your display programming toolbox, you can use this little Flex app to help tweak your sine waves:

That’s it for now

Download the source for this app

Posted in Actionscript | Tagged , , | 1 Comment

Transitioning to WPF, part 9

Let’s talk about organization.

First off, if you just cowboy-code and don’t give two shits about organization then you better start doing it. Here’s some reasons why:

  1. Thoughtful code organization is a tell-tale sign of a good developer
  2. Others can more easily read and understand your code
  3. Reacclimating yourself to your own code becomes easier if you haven’t looked at in a while

Get on with it

AS3 is great in forcing your to organize your crap. If you use namespaces (and you should) then every namespace needs to be a folder in your source code directory and classes in that namespace have to live in that folder. This is great because now there is a 1:1 logical mapping of code structure to file system.

So, you would end up with a highly organized project which might look something like this:

AS3 code organization example

If you look at from the C# perspective, there are no rules governing organization. You can have multiple classes in multiple namespaces all within a single code file. I know some people would say “OMG, that’s totally sweet!”.

How is that a good idea? Managing code becomes a nightmare! Now you have to spend more than a split second to answer simple, common questions like: “Where did I put that class?”

To make things worse, you can have partial classes which gives you the ability to split up the definition of a class across multiple files. Seriously? Management just escalated from nightmare to hellish.

Wow, you’re all sorts of fired up

Look at it from a user experience (UX as you Microsoft-ites call it) perspective. User experience design 101 recommends recognition over recall. So, if someone has to spend more time recalling than recognizing, then it’s bad design.

I don’t know about you, but when I code I want to spend time coding and not scouring my two code files with 42 classes and 18 namespaces for a single function of a class that I defined in 4 spots.

That’s it for now

The moral of the story is, when you start making the switch be strict with yourself about how you organize your code. It’ll help you keep your sanity and that of anyone else who looks at your code.

Posted in Transitioning to WPF | Tagged , , , , | 2 Comments

So, you want to win PhizzPop Miami 2009?

Phenomblue won Microsoft’s PhizzPop Design Challenge in Miami and received the Peoples Choice Award. I’m on the three man team and was also the one to present. This was my first ever tech presentation and it was held in the gigantic Adrienne Arsht Performing Arts Center in front of hundreds of FOWA convention-goers. It doesn’t get more trial-by-fire.

Fielding questions from the judges panel

Microsoft might have some video of the presentation posted later, but I did find a short clip of me fielding the judges questions.

This challenge is also the reason why I haven’t been posting anything for past couple of weeks. PhizzPop is an intense challenge especially for someone who knew so little about Silverlight and Blend. Our entire PhizzPop team locked ourselves in our conference room for 5 days straight, fueled by RedBull and cookies.

This crash course also means I have lots of ammo for upcoming posts :D

Posted in Microsoft | Tagged , , , , , , , | 4 Comments

Transitioning to WPF, part 8

Going into this post I know I’m probably going to catch some flak. But, I feel that being a beginner at WPF and seasoned at display programming gives me a position to complain.

Settin’ up the scenario

First off, I’m learning the code side of WPF, not XAML. Mainly because I’ve decided doing the majority of programming in code-behind is the best solution for what I’m trying to do, based on my limited knowledge of WPF and XAML. Also, because I’m not the biggest proponent of using MXML in Flex, so those feelings carry over.

Lets get to it

When you think about it, moving something across the screen should be easy. In fact, you shouldn’t have to spend any time thinking because it should be elementary. Now just imagine the look on my face when I couldn’t figure out how to do just that.

All I wanted to do was set the x and y values of an object (an Ellipse). But it turns out that’s called a TranslateTransform which is a 2D transformation that you assign to the RenderTransform of the object you wanna move.

WTF?!?

So, to move an object I have to make another object and use it to move my original object? That looks a little something like this:

Ellipse anEllipse = new Ellipse();
anEllipse.RenderTransform = new TranslateTransform(someXOffset, someYOffset);

How intuitive and how much sense does this make? None! The Cartesian coordinate system has been around forever and is what everyone learns when they take their first geometry class. Why break from that paradigm? If something has XY coordinates, give me the XY coordinates!

This morning I was running across examples where people use Left, Top, Right, Bottom and combinations of those referencing it’s parent, or some craziness like that. Seriously? Things like that are great for convenience, but using them as a main means of positioning is like saying portal instead of doorway. It’s just plain weird.

That’s it for now

If I’m just wrong about any of this or just unlearned, please let me know. Or if you can offer an explanation as to why it’s this way, I’d love to hear it. From where I sit, it seems like a step in the wrong direction.

Posted in Transitioning to WPF | Tagged , , | 4 Comments

Transitioning to WPF, part 7

After a week of appetizers and side dishes, it’s time for the main course… WPF. A week-long elope with C# has given me a strong grasp of the language, albiet not the mastery I have with AS3 but that comes with experience.

This is going to be the first day of real WPF learning for me. So far, as in part 1 of this series, I had to scour google for a decent starting point. Judging by the content of the tutorials I pass-off, a person either knows WPF or doesn’t.

All I’ve seen out of the majority of tutorials I’ve come across is this: “Hey! Here’s a really neat feature of WPF/Silverlight and a super obscure scenario you can use it in!” Obviously not much help to someone starting from square one.

The best place I’ve found so far is MSDN, which was still hard to find because they categorize in really weird ways. If you’re not familiar with Microsoft programming in general then MSDN is a crap-shoot for finding what you want.

After finally finding the MSDN WPF page this morning, I’ve been working my way through the Getting Started and WPF Fundamentals pages. It seems like they are going to provide me with the kind of overview with scattered examples I’ve been looking for.

Posted in Transitioning to WPF | Tagged , , , | 4 Comments

Transitioning to WPF, part 6

With any language that deals with complex types, I always raise the question of “How do pointers work?” A lot Actionscript developers out there will wonder what the hell a pointer is.

The short answer: They make or break a programmer in college.

Yikes, sounds nasty

I’m not going to go into it because this really isn’t the forum for it. Instead, all you AS developers, just google it and just know that having a working knowledge is a very important part of being a programmer. Being adept at using them isn’t important because AS and C# handles them for you.

Well, that’s neat

That brings me to my point, C# handles pointers for you, just like AS. I wish I had stumbled upon this tidbit of info earlier because I was throwing the “ref” keyword around like crazy thinking it did something totally different. Then I was getting ultra frustrated when the compiler threw errors.

Basically, all complex types are passed by reference. I just learned that they are actually called Reference Types in C#, go figure. There are also Value Types, who are passed by value. Kudos for making it so easy, seriously.

Anything else?

The “ref” and “out” keywords are a very interesting part of the language. Since learning their functionality this morning, I’m actually jonesing to find somewhere I can use them to my advantage. I really don’t feel like repeating MSDN about these, so read about them here:

http://msdn.microsoft.com/en-us/vcsharp/aa336814.aspx

That’s it for now

I’ve realized that this series has really only been about C#, not WPF. In the future I’m going to split off when I get to WPF and make a new series. I’m also going to create a new version of this series so it’s more objective, because this one is definitely subjective.

Posted in Transitioning to WPF | Tagged , , , , , | Leave a comment

Transitioning to WPF, part 5

Whenever I jump into a new language there are two basic questions I ask:

  1. How do I define a variable?
  2. How do I output stuff?

In that order, actually, which almost seems backwards when I look at it. For now I’m only going to go over the first question because the second question is still pretty mystical to me and I have beef with some of the terminology.

What are you complaining about this time?

In part 1 of this series I constantly got compiler errors that said “field this..” or “field that…” So, I thought to myself “What the hell is a field? It’s referring to a variable!” Here’s what I found:

They’re the same thing and people use the terms interchangably!

It’s a freakin’ variable, so call it a variable! What’s so difficult about that? Is “field” the new hip term and I’m just a square? Come on! Even the term “variable” itself tells me exactly what it’s used for, “field” does not.

From here on out, or until I hear a perfectly reasonable explanation, to express my disdain I will italicize field whenever I use it. And I’m only going to use it when I think it’s absolutely necessary.

Get on with some code already

So, to define a varible in AS3 you would do something along these lines:

// class level variable
public var foo:uint = 0;
 
// class level static variable
protected static var foo:Boolean = false;
 
// a variable scoped in a function or control structure
var foo:String = "bar";

Defining the same fields in C# is similar:

// class level
public uint foo = 12;
 
// class level static
protected static bool foo = false;
 
// scoped in a function or control structure
string foo = "bar";

There’s not too much of a diference between the two. Basically you just have to move the type declaration before the variable name and remove the “var” statement. This irks me some because now fields start to look dangerously close to methods. Notice:

// a field
public string foo = "bar";
 
// a method
public string bar() { ... }

At least in AS3 you have the “var” and “function” statements to help visually seperate the two.

Go on…

One thing I think C# does well is getters and setters, and this is a big deviation from the AS3 way. Here’s how to do it in AS3:

// getter
public function get foo():uint { ... }
 
// setter
public function set foo(value:uint):void { ... }

And now in C#:

public uint foo
{
    // getter
    get { ... }
 
    // setter
    set { ... }
}

Honestly, this is just fantastic. AS3 can get ultra messy because you can seperate the getter and setter in the code and make it a pain for someone to find them. But C# forces you to keep them together. It forces your code to be more organized.

However, this also makes fields look even more like methods and it’s starting to be a real pain to skim over code and imediately know what I’m looking at.

That’s it for now

This post really ballooned into something unexpected, my bad. It’s day 5 and I can confidently code without having to compile every two minutes.

Posted in Transitioning to WPF | Tagged , , , , , | 3 Comments

Transitioning to WPF, part 4

Now, I realize that C# is a strictly typed language and AS3 not so much (but more so than it’s ancestors). But I’ll be damned if I can’t use interfaces the way I can in AS3.

The great thing about AS3 interfaces is you can treat them as a type. For instance, the return type from a function can be an interface:

// notice the return type is an interface
public function myFunction():IPoint { ... }

This also means that function parameters as well as properties/variables can be declared as interface types:

// notice the argument "foo" is an interface type
public function myFunction(foo:IPoint):IPoint
{
    // notice the variable is an interface type
    var bar:IThingy;
}

Why is this so great?

When interfaces are treated as types, then they can reference any instance you want as long as it implements that interface. It’s freakin’ brilliant! It totally blows the doors open for making things ultra flexible and extendible.

Why all the hooplah?

Yikes, looks like I was wrong about this. Isn’t the learning process great?

You can’t do this in C#! It this case it’s too strictly typed. The AS3 way has become so second nature that I have to start at square one when thinking about class architecture.

This is a huge hurdle for any AS3 developer trying to learn C# and was the cause of a massive headache yesterday. My Error List window in VS2008 was out of control. I hadn’t seen so many errors since compiling C++ with gcc back in college.

That’s it for now

It’s day four. It feels like I’m a college freshman again, fumbling around, thinking he knows everything about programming but can’t get anything to compile.

Posted in Transitioning to WPF | Tagged , , , | 4 Comments