Using MobileMe's animated wisps of cloud on your own site

Discussion in 'Web Design and Development' started by u1725, Nov 22, 2010.

  1. u1725 macrumors member

    Joined:
    May 26, 2008
    #1
    Hi,

    Have you seen the new log in page on me.com? Well it's pretty nice.

    I was wondering if anybody knew how to use that animation on your own site. I think a lot of people think it's pretty cool.

    Does anybody know how to make a similar one, or better yet, copy Apple's and use it on your own site?

    Thanks,
    Ulrik :D
     
  2. Ygn macrumors member

    Joined:
    Aug 8, 2010
    #2
    It's definitely HTML5 and some Javascript... I'm not sure how you would go about using it on your own site though. Perhaps give it a few days until google find some pages with people discussing it. :p
     
  3. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #3
    The source is fairly obfuscated, so Apple does not necessarily want you seeing how they are drawing this to the canvas.

    And if you are thinking of using this on your own site, take a look at what sits at the very top:

    Personally, I would use processing.js to get the same effect, but there are lots of ways of doing it.

    Strangely, I got a much higher animation frame-rate in Firefox than in Safari....
     
  4. elppa, Nov 22, 2010
    Last edited: Nov 22, 2010

    elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #4
    You can unpack the javascript though.

    Look at OL.FreeMasthead from line 3674 to line 5433.

    It's full of fun math* like this:
    Code:
    opacityCoeff = 1 - (opacityCoeff * (1 - 0.3 * Math.pow(Math.sin(t * (7 + 4 * r2) * Math.PI / 2), 4)));
    Code:
    this.drawPoint(x, y, d, (Math.pow(r7 * 0.5 + 0.5, 3) * 2 - 1) * (Math.sin(10 * (Math.sin(3 * t)) * (1 + 0.5 * r3) * t) * 0.5 + 1) + 0.2 * mouseOffset, flashR, opacityCoeff, i)
    On the inline script on the homepage Login.main() gets called. Which is line 6553 of the file attached. And that calls OL.MastheadContainer.create(). And that leads to the creation an FreeMasthead (with the pixie dust ln. 3674) or a CookiedMasthead (the buttons ln. 2941).

    It is fun to have a look at. Someone smarter than me is probably working on a jQuery pixie dust plugin as I type.

    *I know how to spell it properly I'm just humouring the mainly American audience this site attracts.
     

    Attached Files:

  5. u1725 thread starter macrumors member

    Joined:
    May 26, 2008
    #5
    I don't understand what to do :confused:, but i'm not very good at web development so...

    Can you (or anyone else) translate it into step by step understandable english?
     
  6. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #6
    This is a 6572-line javascript file. There is no way to explain it step-by-step if you don't have a fundamental understanding of javascript.

    In "layman's terms" this is a particle animation system drawing into a canvas tag. Particle animation systems are not particularly difficult to make once you have grasped the concepts behind object oriented programming.

    Here are some (arguably more complex) examples of javascript/canvas particle systems

    http://www.mrspeaker.net/dev/parcycle/

    and here is a particle library implemented with Jquery

    http://erikfriend.com/jquery.particles/

    using that library you could get pretty close to the effect on the mobile me page.
     

Share This Page