Posts Tagged ‘JavaScript’

Animation with HTML and JS

Tuesday, July 3rd, 2012

We used to do a lot of animation in house with Flash and Action Script 3. There were some great tools and libraries out there to help with the position of items and opacity and all that not-as-fun-stuff.

One of my favorite libraries for AS3 was TweenLite from GreenSock. It made moving objects around super easy, and it was super fasts too. Luckily, they reciently released their awesome libraries for JavaScript, so I took to the text editor and made a quick fourth of July animation. Check it out below, and the code is after the break…

(more…)


Fun with Trigonometry

Monday, May 14th, 2012

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: a2 + b2 = c2, 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


MODx Update: Fantastic new administration panel

Wednesday, October 27th, 2010

We here at the Zoom Creates Nerd Herd (the development team) have always loved the modX CMS tool. It’s extremely flexible, has a great system for templates and code chunks, and is limited only by your imagination. We’ve been using it for sites since before the code base was at a stable 1.0 release, probably since around late 0.8 beta releases. There are many great plugins that help with breadcrumbs, dynamic navigation and menus, AJAX requests, search engine friendly URLs and more. Today I’d like to point out some of the features and changes of their latest release, Revolution 2.0.4.
(more…)


Do spam bots use mice?

Tuesday, June 22nd, 2010

The typical solution to avoiding spam bots from abusing your online forms is to use a CAPTCHA test. You know – the hard to read, wavy text that you must type in correctly to prove to the web page that you are human and capable of making sense out of the non-sense. Well, spammers have used OCR (optical character recognition) algorithms to have their bots read the messy text and complete the test. Since then, there have been lots of alternatives to the text CAPTCHA test. Some involve selecting an image from a list given its name or description, or answering simple math problems. However, I didn’t find one that I really liked. So we started to build our own on the assumption that spam bots don’t use mice.
(more…)


Utilizing Google AJAX APIs CDN

Wednesday, February 3rd, 2010

jqueryWhen using JavaScript libraries to perform a function on a public-facing web site, the traditional way of referencing your library is using something like this:

<script src="/js/jQuery.min.js" type="text/javascript"></script>

Here, we are loading a jQuery library in to the HTML header for future use on the web page.  This means each time you want to use the jQuery library (or any other JavaScript library) on your new web site, you must download the latest version, upload it to your server, and then reference it here.  This technique works well enough, but lets explore a better way to perform this same library load.  We’ll do it in a way which will help us with version control, decreased latency, and better caching. How? By utilizing a CDN (content delivery network).

Below is an example on how to go about using the Google AJAX Libraries CDN, using jQuery as the library to load. (more…)


Google Chrome is at it again

Monday, January 18th, 2010

IEChromeOver the weekend I was researching some new web technologies and stumbled across a new plug-in for Internet Explorer (IE). It’s called Google Chrome Frame, and it solves some big problems in the current development cycle for web apps.

Many people don’t know this, but a lot of time is devoted entirely to making IE (especially older versions) behave properly with W3C standard based browsers (Mozilla Firefox, Safari, Google Chrome, Opera, etc.). This makes developing for the web more complex than it needs to be because most browsers function as you would expect them to. Unfortunately, IE is used by most users across the planet, so the fact that it isn’t based on current standards and behaves oddly isn’t something that we developers can ignore. This is where Google-Chrome-Frame comes to the rescue.

(more…)


Build A Better Dialog Box With jQuery

Tuesday, December 15th, 2009

dialogboxfailLet’s face it…  JavaScript “alert” notifications are boring and can be annoying.  They are ugly and make ding-y sounds when appearing. However, you still need to notify the user upon certain events.  What is a better way to display a dialog box to web users?  Using  jQuery, of course!

EXAMPLES:

First, let’s have an example of the “old” way of doing things with an alert box.  Click Here

Now, the new hotness example:  Click Here

The script is fairly simple, and requires very little code to implement.  No additional images are required, although they can be added on the DIV for an even more-stylized look. The effect is very smooth in comparison to the traditional alert box.  Also, this event can be applied to nearly any HTML element, including links, divs, images, buttons, etc. (more…)


Flash Camera

Monday, December 14th, 2009

On a recent project (which will be revealed later this week) we needed to save an image created in a Flash application, using AS3 and PHP. It turned out to be really easy. Here’s how we did it…

(more…)


Back to the Basics

Wednesday, December 9th, 2009

iStock_000005624791XSmallWe have an intern coming in next week to hang out with us nerds. He’s a highschool student that would like to see what the day to day tasks of a web programmer are. I’ve talked to him about what he will be doing and what to brush up on. Here are a list of sites that I recommended him click through to brush up on some of the basics of the tools that we use. These are in no particular order.

  • HTML Goodies – This site was one of the first that I used to help me understand HTML and JavaScript. A little outdated, but still great for fundamental learning.
  • Tizag PHP Tutorial – Basics of PHP. This website does an amazing job of putting complex concepts into words that everyone can understand.
  • MySQL Introduction – From the MySQL website, an introduction.
  • W3Schools – Straight from the people who make the standards we love and use, you can learn a bunch on their site about the RIGHT way to do things. Topics in PHP, MySQL, JavaScript, jQuery, CSS and XHTML are where you can learn the tools we use.
  • PHP Screncasts – Some good free video screencasts that show you some of the basic aspects of PHP. Buy it for the advanced videos.

There are more places online that can teach you our toolset. Google is great if you know what you are searching for. The internet is a great thing, and can teach you just about anything you want, especially if it relates to computers and programming.


Google Chrome: Missing JavaScript Event

Thursday, September 17th, 2009

chromeA quick note to any/all web developers out there who read our Code Logic posts:

After battling a weird bug that we couldn’t quite find in Google Chrome, we thought we’d share a little inside information to help you save some time and headaches. While Firefox and other browsers were responding to a call we were making, Chrome just wouldn’t bind the right information to an onclick event. Granted, it was on an element that we don’t usually bind events to, but still.

The element in question was an <option>. Inside of a select box, we had two groups of data and wanted a hidden form field to be updated to a certain value when you choose an option from group A, and a different value when you choose an option from group B. It worked great in other browsers, but not in the latest build of Chrome for Windows.

Just a heads up. Hopefully now you don’t need to lose a bunch of time because your JavaScript isn’t working.