To find the direction from one object to another, we need to use some trig functions. First we need to know the positions of those objects. Then we can find the change in X and Y. From there we can find the distance between them and the angle from one to the other.

Here’s an example: Point A is located at coordinates (-10, -20), and Point B is located at (110, 70). To go from A to B is a change of (120, 90).

To find the angle from A to B, we use the arc-tangent function.

var distX = objectB.x - objectA.x;
var distY = objectB.y - objectA.y;
 
var angle_radians = Math.atan2(distY, distX);
var angle_degrees = radiansToDegrees( angle_radians );

function radiansToDegrees(r){
    return r * 180 / Math.PI;
}

In Javascript and ActionScript, the Math function atan2 will take y and x, and return the direction in radians. That means the returned value will be between -π and π. to convert radians to degrees, we multiply by 180 and divide by π. In this example, the angle is about 36.87°.

To find the distance between them, we use the Pythagorean theorem: a² + b² = c², or:

var dist = Math.sqrt(distX * distX + distY * distY);

In this example, the distance is 150.

Now you can set the rotation of the first object to look at the second object. OK, but how do you move it forward at a constant rate? If you update its x and y position by 120 and 90, respectively, it would reach the goal in one step. Not much of an animation. Instead, give it a speed and use trigonometry to figure out the change in the x and y positions.

var speed = 6;
 
var deltaX = Math.cos(angle_radians) * speed;
var deltaY = Math.sin(angle_radians) * speed;
 
objectA.x += deltaX;
objectA.y += deltaY;

First we decide what speed to use. This is in pixels per frame. Each frame the object will move by 6 pixels in its forward direction. Then each frame, calculate the change in the x and y positions using the cosine and sine functions. This time we need to use radians, not degrees. These functions will return a value between -1 and 1. Now just multiply by the speed and apply it to the object.

To make the object turn smoothly, as in the example above, is a little more complicated, so I’ll save that for another time. But to give you a hint, it starts with a turning speed. You can see how it’s done in the attached FLA: trigTest.fla

Demo:
Enter a word or phrase in to the box below to see how the illustration begins to emerge. On load, the illustration shows what “ZoomCreates” looks like. Numbers and symbols won’t work, so you must only use upper and lowercase A-Z characters. Also, no spaces allowed.

Here at Zoom Creates, we continue to apply open font use to our web sites and applications, to better tie together web code and design typography. There are simply far too many applications to list, and we find designers and developers all over modern web sites finding new ways to explore these concepts.

To get started, download the @font-face kit from a source like FontSquirrel. Install the files on your web server in a location you can remember. Next, make sure you have a compatible version of jQuery installed. Any version put out in the last year should do nicely.

Write the CSS
This will go inside your included CSS file. Note: this code is included with your downloaded @font-face kit.

@font-face {
  font-family: 'AierbazziRegular';
  src: url('/path-to-font-file/aierbazzi-webfont.eot');
  src: url('/path-to-font-file/aierbazzi-webfont.eot?#iefix') format('embedded-opentype'),
        url('/path-to-font-file/aierbazzi-webfont.woff') format('woff'),
        url('/path-to-font-file/aierbazzi-webfont.ttf') format('truetype'),
        url('/path-to-font-file/aierbazzi-webfont.svg#AierbazziRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Write the HTML and jQuery
This is your input element and the span which uses the AierbassiRegular font-family to write the typed characters.

<input id="input-aierbazzi" onkeyup="$('span.illustration').text(this.value);"
name="input-aierbazzi" size="30" type="text" value="ZoomCreates">

<span class="illustration" style="font-family: AierbazziRegular;
font-size: 250px; color: #000;">ZoomCreates</span>

Additional mods to try:

I’d like to modify this later to randomly choose a color for each character being typed. Also, playing with alpha opacity would be fun. Writing most of the jQuery in to a function would be another great way to handle these additional mods. Finally, writing some code to not allow the typing of invalid characters will help overall user experience. Give it a try and let us know what you come up with.

I just came across a very beautiful presentation of exactly what I’m describing at andysmith.co.uk. Check that out.

Like most people with smartphones or other mobile devices, you can find me using mine everywhere. I’m on it while I’m at lunch, estate saleing on the weekends and definitely on the couch while “watching” TV. Since I’m using my phone as my second computer, I would hope that the mobile site would have the same functionality of a laptop or desktop, but optimized for my mobile device. A mobile site has to accommodate every user, if they are out and about, or just laying in bed before they turn off the lights.

Because of this common over simplification, I often find myself clicking on “view full site” taking me away from the mobile version of the page. I’ll get frustrated when information on a mobile site isn’t intuitive or if a site is so pared down that I can’t find the information I’m looking for. And once I move away from the site, the user experience deteriorates. I have to pinch and zoom to read any text or sit waiting for pages to load. The mobile site experience becomes a missed opportunity. A better experience causes increased engagement, more conversion and a good chance someone will walk away feeling positive about your company or product.

A mobile site should create a focused experience, not a limited experience. To do this:

1. Information needs to be highly prioritized. Present the content that will be most important to the user first. A mobile site should focus on prime information pages upfront, but let you dive deeper if needed. The content users interact with should be adjusted to suit the size of their site— the same information from the full site may need to be presented in a different order from the full site to make more sense for the mobile user.

2. Navigation should be simplified, minimizing the user options. The navigation needs to be clear and intuitive to the user so they can find exactly what they are looking for. If needed, pages should include sub navigation so the user can still access any meaty details.

3. Your site should be touch-friendly. Buttons or links need to be large and easy to hit with a thumb or finger tip, based off of standard finger sizes (Apple suggests 44 pixels) Not only should it be click-able, but it should be in an area it can be easily clicked—buttons shouldn’t be placed too closely together, or you risk taking the user to the wrong link.

4. Images should be limited. Reduce the number of images to limit loading times.

The ultimate goal in having a mobile is to create a platform that is adapted to a device’s size, but mainly to what the user needs. We need to think about what mobile users want when visiting a mobile site, if it is to get things quickly on-the-go, or if they are using it as their main computer. A mobile site should not be limiting, but focused to give the user a valuable and positive experience that keeps them coming back for more.

Congratulations to Linda Cella, our Rethink Ink contest winner! Her idea “Your Are The Balm” inspired our design team to create a tattoo that evokes World War II era tattoos and visually depicts her play on a common phrase.

Thank you to everyone who participated. We appreciate the healthy dose of inkspiration provided by all of your ideas fantastic ideas!

The good new is, everyone is a winner! Make sure you visit the site to download the latest free desktop and smartphone wallpapers inspired by the winning tattoo.

Today is your last chance to submit your idea for the ReThink Ink temporary tattoo contest, so get in there and enter your amazing ideas to our Zoom Creates Facebook page. We’ve had some great submissions, a few of our favorites so far are “Sexy Saturday”, “You are the balm” and “A rockin’ Gretsch Guitar”. But there is still time to get your idea in the running. The tattoo idea that inspires us most will win big!

The Grand Prize Winner will receive:
• Your tattoo idea designed by Zoom Creates
• Your Design on a stylin’ T-shirt
• Temporary tattoos of your design idea for you and 10 of your friends
• All six sets of Zoom Ink temporary tattoos

Two Runners up will receive:
• All six sets of Zoom Ink temporary tattoos
• A temporary tattoo of the winning design

Don’t forget to also stop by the Zoom Ink web site and check out all the free downloads to help you spice up your desktop and mobile phone!

Now is your last chance to submit your idea for the Zoom Creates Rethink Ink contest.

Get on over to our Facebook page and submit your best idea for your own tattoo design. Whether it’s “kitten popsicles,” a “frog in a giraffe suit” or a “polka-dotted poncho” we want to hear it! No need to design, just write out your idea and hit submit! The concept that inspires us the most will have their idea designed by us AND will receive a set of their tats and a stylin’ T-shirt so they can show off their design to their jealous buds. Plus, the top three ideas will win all six sets of our Zoom Ink temporary tats.

Don’t Miss out!
We want to make sure everyone‘s devices stay rockin’ too. Drop by the Zoom Ink site to spice up your laptop or mobile phone with backgrounds inspired by the tats.

Banana cakes is a phrase started by me after I heard it randomly one day from a person talking on the radio. I said to myself, “That is so flippin’ fun, I’ve got to use that!” Since then, I’ve been throwing out “banana cakes” left and right to express my excitement, surprise or disbelief. With my constant use, it finally caught on around the office and now I’ve got everyone spreadin’ the fun. Now that’s banana cakes!

What is this “Tat-A-Day” all about?
The Zoom Creates team has created six sets of temporary tattoos, and to share some of our ink-spiration, we’ll be posting a “Tat-A-Day”. The “Tat-A-Day” posts will last throughout the duration of the Rethink Ink contest. So tune in and get ink-spired to create your own!

What is this “Tat-A-Day” all about?
The Zoom Creates team has created six sets of temporary tattoos, and to share some of our ink-spiration, we’ll be posting a “Tat-A-Day”. The “Tat-A-Day” posts will last throughout the duration of the Rethink Ink contest. So tune in and get ink-spired to create your own!

“What do you know about tweedle beetles? Well… When tweedle beetles fight, it’s called a tweedle beetle battle. And when they battle in a puddle, it’s a tweedle beetle puddle battle. AND when tweedle beetles battle with paddles in a puddle, they call it a tweedle beetle puddle paddle battle.”

Thank you Dr. Seuss for creating Fox in the Socks for today’s Tat-A-Day inspiration.

Why tweedles, you ask? Well, Corrina and I have been deemed the official “Tweedles” in the office, lovingly named by Eva approximately 5 years ago because of our obvious similarities in our sense of style and design and that we have a tendency to carry on like two peas in a pod from time to time.

“The Tweedles” has become an exclusive group that many have tried to enter into. It’s not easy, but you can become an official “Tweedle” too, just let us know if you’d like to join and we’ll provide a lengthy application and put you on our wait list. FYI, Tim has been wait-listed for about 5 years now.

What is that “Tat-A-Day” all about?
The Zoom Creates team has created six sets of temporary tattoos, and to share some of our ink-spiration, we’ll be posting a “Tat-A-Day”. The “Tat-A-Day” posts will last throughout the duration of the Rethink Ink contest. So tune in and get ink-spired to create your own!