Check out this, imvho, fairly cool css3 "fractal" animation I did...

Discussion in 'HTML' started by Chris M. Thomasson, Jul 24, 2012.

  1. The CSS3 animation should render with webkit or mozilla. For some reason,
    webkit seems to perform better. Anyway...



    Here is _half_ of the fractal in motion:

    http://webpages.charter.net/appcore/ctfractal.html



    Here is the same half with different curve:

    http://webpages.charter.net/appcore/ctfractal_s.html



    Here is the fractal at max "distortion" or wave collapse/cancel I guess:

    http://webpages.charter.net/appcore/ctfractal_ss.html



    When I mention "half" of the fractal, I mean I would like to add a mirror
    image. Imagine the static picture in the motionless fractal with a mirror
    image partner. Will get that done when I get some more time.


    Well, it seems when I put the other half in, it kind of looks like strands
    of dna or something. Anyway, I did not expect the picture I get. It looks 3d
    at moments but its totally stored in 2d. Keep in mind that the "motionless"
    fractal is actually moving, but it cancels.





    BTW, sorry for the sloppy html! ;^(


    I need to refine this, and scale it up by a couple orders of magnitude.
     
    Chris M. Thomasson, Jul 24, 2012
    #1
    1. Advertising

  2. Chris M. Thomasson

    dorayme Guest

    In article <1oCPr.32239$>,
    "Chris M. Thomasson" <> wrote:

    > The CSS3 animation should render with webkit or mozilla. For some reason,
    > webkit seems to perform better. Anyway...
    >
    >
    >
    > Here is _half_ of the fractal in motion:
    >
    > http://webpages.charter.net/appcore/ctfractal.html
    >
    >
    >
    > Here is the same half with different curve:
    >
    > http://webpages.charter.net/appcore/ctfractal_s.html
    >
    >
    >
    > Here is the fractal at max "distortion" or wave collapse/cancel I guess:
    >
    > http://webpages.charter.net/appcore/ctfractal_ss.html
    >
    >
    >
    > When I mention "half" of the fractal, I mean I would like to add a mirror
    > image. Imagine the static picture in the motionless fractal with a mirror
    > image partner. Will get that done when I get some more time.
    >
    >
    > Well, it seems when I put the other half in, it kind of looks like strands
    > of dna or something. Anyway, I did not expect the picture I get. It looks 3d
    > at moments but its totally stored in 2d. Keep in mind that the "motionless"
    > fractal is actually moving, but it cancels.
    >
    >
    >
    >
    >
    > BTW, sorry for the sloppy html! ;^(
    >
    >
    > I need to refine this, and scale it up by a couple orders of magnitude.


    FF on my setup seems to struggle a little, you are right. It should
    not be hard to attend to the HTML, use a doctype that does not put
    your doc into quirks mode and a few other small matters.


    btw, a sharper and more dramatic show comes with

    ..ccommon
    {
    width:90%;

    Nice stuff to play with.

    --
    dorayme
     
    dorayme, Jul 24, 2012
    #2
    1. Advertising

  3. "dorayme" wrote in message
    news:...

    In article <1oCPr.32239$>,
    "Chris M. Thomasson" <> wrote:

    > The CSS3 animation should render with webkit or mozilla. For some reason,
    > webkit seems to perform better. Anyway...

    [...]
    > I need to refine this, and scale it up by a couple orders of magnitude.


    > FF on my setup seems to struggle a little, you are right.


    Yeah. The more I expand the fractal, the worse Mozilla seems to perform.
    Humm...


    > It should
    > not be hard to attend to the HTML, use a doctype that does not put
    > your doc into quirks mode and a few other small matters.


    100% Agreed.


    > btw, a sharper and more dramatic show comes with
    >
    > .ccommon
    > {
    > width:90%;



    Wow That looks pretty awesome! Thanks for that.

    :^)


    > Nice stuff to play with.


    Thanks again. I am trying to come up with a formula so that one can
    infinitely fly through the fractal in motion. However, I will be forced to
    use the canvas and javascript/requestAnimationFrame in order to accomplish
    this task. Once I have the formula worked out, I think I have all I need to
    automate the generation of an animated finite portion of the fractal in pure
    CSS3 and HTML5.
     
    Chris M. Thomasson, Jul 27, 2012
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DU
    Replies:
    13
    Views:
    945
  2. Luigi Donatello Asero

    Support for CSS3

    Luigi Donatello Asero, Sep 18, 2004, in forum: HTML
    Replies:
    3
    Views:
    501
    Toby Inkster
    Sep 25, 2004
  3. Tony Arcieri
    Replies:
    14
    Views:
    455
    Tony Arcieri
    Dec 9, 2010
  4. Tony Arcieri
    Replies:
    0
    Views:
    410
    Tony Arcieri
    Dec 14, 2010
  5. Peter
    Replies:
    9
    Views:
    419
    David Mark
    Jul 7, 2009
Loading...

Share This Page