motion:art:design

Inspired by Dennis King’s “Art of Modern Rock Mini #2: Poster Girls” and also Molly Crabapple. I’m especially happy with the way the border turned out.

So here’s a steampunk blaster I composited in Photoshop using a bunch of antique tools scattered around my folks’ garage.  Check it.

So this was made following a Photoshop tutorial by Erin Goksel.  I substituted an image of an old wrench I photographed for his mixtape.

http://psd.tutsplus.com/tutorials/designing-tutorials/how-to-design-a-rockin-80s-party-poster/

This is from a tutorial I found in a Photoshop “Tips and Tricks” mag…. turning a photo into a piece of graffiti. First is the original stock photo, and then the photo composited onto a brick wall.

Please vote for my t-shirt design for the new TBTL contest (Too Beautiful to Live, on KIRO 97.3 FM out of Seattle).

My shirt is #9:  Love+Music+Robots.

http://www.mynorthwest.com/?sid=123665&nid=363

So I just threw my hat in the ring for a third time for the TBTL t-shirt design contest.  I won the first one – so here’s hoping my good luck repeats itself.  Voting starts on Wednesday (www.mynorthwest.com/tbtl).

This is part of my design for the t-shirt contest at TBTL.  I sketched it out with a crowquill pen and then live-traced the living S— out of it.

So, I’m working on some graphic design for the band Baby Teardrops out of Brooklyn (www.babyteardrops.com).  Here’s a few of the ideas we’re bouncing around right now:

So for the next few posts, I’m going to be writing about some interesting problems I ran into while programming a flash boardgame. The game is a gladiatorial-style game, where characters can choose weapons like swords or crossbows, and attack the other character. Today I want to talk about the Arrow Problem.

It’s easy to tween a round bullet from one target to another.  It doesn’t matter how the bullet is oriented (since it’s round); it just has to travel from point A to point B.

But what if you’re shooting an arrow?  You can make the arrow shoot from A to B, but you also have to orient it so that the point is facing the target.  So the first issue that came up was: How do you orient a movieclip in 360 degrees when the location of the target and the shooter are changing each round? Basically, this involves using arcTangent and arcCosine functions in Flash to find the sine value (and thus the angle of rotation).

Since we’re on a Cartesian coordinate grid, we always know the X and Y distance between the two players. This means that at any given time, we can create a right triangle with the hypotenuse being the line between the two players.

The next thing you need to do is figure out the angle that the arrow should be rotated to. Assume for a moment that whoever is shooting is at the center of an XY grid.  The enemy can only be located in one of four “quadrants” (with the shooter at the center).  We also made allowances for when the target was directly above or below of the shooter(i.e., the same Y value), or directly East/West of the shooter (i.e., on the same X value).  You can then determine if you need to use arcSine or arcTangent, depending on where the enemy is located.  If the shooter is on the “short” side of the triangle (see diagram below) then you have to use arcCosine.  If the shooter is on the “long side of the triangle (again, see diagram) then you have to use arcTangent.

As a side note, you also have to remember to convert radians to degrees.  (see the commented code section).

The last thing to do is determine (depending on which quadrant the target is in) what value to subtract the angle from in order to find the proper rotation of the arrow.  The arrow starts in a straight up and dow, 12 oclock rotation (0 degrees rotation.)  Remember also that negative angles go ounterclockwise, and positive ones go clockwise.

For example, using the situations depicted in the above diagrams:  depending on whether you used arcCosine or arcTangent (i.e, the shooter is on the short or the long side of the right triangle) and you are shooting into the upper left (NW) quadrant, then you would either add the angle value that you derived to 270 or use the negative value of the angle (to subtract it from the 0 or twelve oclock position and rotate it counterclockwise).

Here’s the code, commented out:

//this creates the function named “arrowShoot”

function arrowShoot()
{

//this adds the arrow to the screen (pointing straight up at twelve oclock)
var missile_mc:Missile = new Missile;
addChild(missile_mc);

//next we set up the variables:

var F1:Number = new Number; //we’ll use these to create the tween of the arrow moving at the end of the function
var D1:Number = new Number;//we’ll use these to create the tween of the arrow moving at the end of the function

var lengthSideA:Number = new Number;//this will represent the length of the X axis on the triangle
var lengthSideB:Number = new Number;//this will represent the length of the Y axis on the triangle
var lengthSideC:Number = new Number;//this is the length of the hypotenuse.
var finalAngle:Number = new Number;//this will hold the value derived from arcCosine or arcTangent
var arcCosine:Number = new Number;//this will hold the arcCosine value in radians before we convert it to degrees
var arcTangent:Number = new Number;//this will hold the arcTangent value in radians before we convert it to degrees

//these equations find the distance as an absolute value for the X and the Y axes, and the hypotenuse.  We used the absolute value, because sometimes the values might come up negative, depending on which direction the arrow is going, but the actual distance is never a negative number.

lengthSideA = Math.abs(player_mc.x – enemy_mc.x);
lengthSideB = Math.abs(player_mc.y – enemy_mc.y);
lengthSideC = Math.sqrt((lengthSideA*lengthSideA) + (lengthSideB * lengthSideB));

//this is the function that calculates the sine in radians.  We’ll run it at the end of the arrowShoot function.

function findSine()
{
if ( lengthSideA >= lengthSideB) // i.e., the shooter is on a “short” side of the triangle
{arcCosine = Math.acos((lengthSideA/lengthSideC));//runs arcCosine

finalAngle =((arcCosine * 180)/Math.PI);//converts angle from radians to degrees using the Math.PI method.

}
else
{

arcTangent = Math.atan((lengthSideA/lengthSideB));// i.e., the shooter is on a “short” side of the triangle

finalAngle =((arcTangent * 180)/Math.PI);//converts angle from radians to degrees using the Math.PI method.

}

}

//this function will calculate the actual rotation of the arrow based on which quadrant the target is located in

function findRotation()
{

//upper left quadrant
if ((X > A) && (Y>B))
{
if (lengthSideA < lengthSideB)//shooter is on the “short” side of the triangle
{
missile_mc.rotation = -(finalAngle);
}
else //if shooter is on “long side” of the triangle
{
missile_mc.rotation = 270+finalAngle;

}
}
//upper right quadrant
else if ((X < A) && (Y>B))
{
if (lengthSideA < lengthSideB) { missile_mc.rotation = finalAngle; }

else { missile_mc.rotation = 90 – finalAngle; } }

//lower left quadrant

else if ((X > A) && (Y<B))
{
missile_mc.rotation = 180 + finalAngle;

if (lengthSideA < lengthSideB)
{
missile_mc.rotation = 180 + finalAngle;
}
else
{
missile_mc.rotation = 270 – finalAngle;
}

}
//lower right quadrant
else if ((X < A) && (Y<B))
{
if (lengthSideA < lengthSideB)

{ missile_mc.rotation = 180 – finalAngle; }

else { missile_mc.rotation = 90 + finalAngle; } }

else if (X > A)//this is if the player is on the same X axis as the target
{
missile_mc.rotation = -90;
}

else if (X < A)//this is if the player is on the same X axis as the target
{
missile_mc.rotation = 90;
}

}

//we then run the above functions:

findSine();
findRotation();

we then determine whether the arrow should go from the player to the enemy, or vice versa.

I have a variable set up within the game (not shown here) that sets a string to show the current player.

if(currentPlayer == “PLAYER”)
{//the arrow starts at the player location
missile_mc.x = player_mc.x;
missile_mc.y = player_mc.y;
}
else if (currentPlayer == “ENEMY”)
{//the arrow starts at the enemy location
missile_mc.x = enemy_mc.x;
missile_mc.y = enemy_mc.y;
}

if (currentPlayer == “PLAYER”)//runs the tween using the greensock tweenlite engine
{F1 = enemy_mc.x;
D1 = enemy_mc.y;
TweenLite.to(missile_mc, 2, {x:F1, y:D1, onComplete:clearIt});//runs a function to erase the arrow after the shot
} //description:   (clip to tween, duration of tween, {end location x/end location y,  onComplete: run function clearIt})

else if (currentPlayer == “ENEMY”)
{missile_mc.rotation += 180;//flips the arrow around to point at the player if the enemy is the shooter
F1 = player_mc.x;
D1 = player_mc.y;
TweenLite.to(missile_mc, 2, {x:F1, y:D1, onComplete:clearIt});

}
//this functionruns on completion of the arrow tween.  It:

erase the arrow;

changes the current player;

function clearIt()
{
removeChild(missile_mc);

if (currentPlayer == “PLAYER”)
{
currentPlayer = “ENEMY”;

}
else if (currentPlayer == “ENEMY”)
{currentPlayer = “PLAYER”;

}

}

This is pretty rad. And this movie also happens to be one of my favorites.

http://www.111archeravenue.com/tenenbaums/
via: http://agentmlovestacos.tumblr.com