Upgrade your web design
3232Design is a Minneapolis web design studio offering affordable high-quality communication design specializing in websites and interactive media; also producing and integrating business systems, print marketing, online marketing and brand identity design for creative professionals and small to medium-sized businesses.

Call or email today for a free consultation.

Circular rotation in Javascript

show all entries...

I really hate math. I'm not very good at it. What I am good at, however is Googling things. I am convinced that this is the key to being a good programmer. Since you can't be good at everything you do, Google lets you pretend. So I pretended to know something about sine, cosine, and tangent formulae and this is what I came up with.

My original doohickey in the upper-right corner of my pages was a Flash interface for my portfolio. It doesn't do anything now, so if you have any ideas for it please let me know in the comments!

For those of you looking for the code to do it, the relevant nugget is this: 

rad = dir * Math.atan2(obj.data('_y') - _ymouse,  obj.data('_x') - _xmouse)

What this means is, take the x and y coordinates of the center of the thing we've clicked on and subtract them from the page coordinates, then take the atan of those x,y coordinates, which will return the angle represented by those coordinates in radians. Then use CSS3 to rotate your image by that much. That's it! 

Doesn't it sound like I know what I'm talking about? 


No comments yet.