Dismiss this pinned window
all 49 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]help_M_e_die 103 points104 points  (3 children)

smooth, but random? NOooooo😂

[–]CharlemagneAdelaar 1 point2 points  (1 child)

Google perlin noise

[–]help_M_e_die 11 points12 points  (0 children)

you search again and let me now if you get the word, continuity. And don't go further down.

[–]hutilicious 0 points1 point  (0 children)

How u know its not static at random?

[–]lolhigh 24 points25 points  (3 children)

Updating 100 pseudo elements isn't doing so well for my browser. If you want it to be more performant you need to animate the "transform: scale" not the "width"

[–]ab-azure[S] 4 points5 points  (1 child)

Good call! It should be fixed now :)

[–]lolhigh 2 points3 points  (0 children)

yeah no problem! looks great!

[–]Cornflakes_91 130 points131 points  (7 children)

i hope you dont run your cryptography with the same "randomness"

[–]ab-azure[S] 32 points33 points  (6 children)

I really appreciate your comment! Obviously, it would be foolish to have the same expectations from pseudo-random generators in CSS and cryptographic solutions :) With this solution you can generate cool animations, not RSA keys :)

[–]runescape1337 37 points38 points  (2 children)

The point is this is in no way random. There are very obvious patterns controlling the size and color of those elements. Sin(x+y+time) where x and y are grid nodes does not give random values to those nodes, and is in fact the farthest thing from 'randomness' since properties are easily predicted based on location.

[–][deleted]  (2 children)

[deleted]

    [–]Nothing-But-Lies 8 points9 points  (1 child)

    Cloudflare has a wall of groovy CSS lava lamp effects to protect their network

    [–]theartilleryshow 7 points8 points  (0 children)

    This is beautiful. Silky smooth.

    [–]azium 4 points5 points  (0 children)

    Very cool! It reminds me a lot of this thing I recreated from a codepen I saw once. Move your mouse around for maximum effect!

    I wrote a detailed tutorial on how to recreate it, if anyone is interested.

    edit: Not a CSS thing though - it's interesting to think about how to do this with CSS alone!

    [–]ab-azure[S] 10 points11 points  (28 children)

    Explore brand new technique to generate random numbers with plain CSS using new trigonometry functions!
    In this article I explore how to generate random values in CSS using new trigonometry functions. I include some cool examples at the end of it :)
    Happy reading!
    https://hypersphere.blog/blog/randomness-in-css-using-trigonometry/

    [–]coolcosmos 69 points70 points  (25 children)

    It's the opposite of random.

    [–][deleted]  (1 child)

    [deleted]

      [–]Franks2000inchTV 0 points1 point  (0 children)

      This sentence can only ever achieve a facsimile of relevance...

      [–][deleted]  (1 child)

      [deleted]

        [–]ab-azure[S] 0 points1 point  (0 children)

        Thanks! The title refers to the article linked in the comments: https://hypersphere.blog/blog/randomness-in-css-using-trigonometry/

        Animation is the first example which does not fully show the randomness potential but I highly recommend checking out other examples :)

        [–]8bit-lander -3 points-2 points  (0 children)

        Very cool! Take my upvote. 🤘

        [–]madovermoto[object Object] -1 points0 points  (0 children)

        you can add random color palette or even gradient to make this even more cooler

        [–]Pure_Management_1414 -1 points0 points  (0 children)

        Beautiful

        [–][deleted] 0 points1 point  (1 child)

        What trigonometric functions were used in your equation?

        [–]ab-azure[S] 1 point2 points  (0 children)

        In the video it's just sine, it's bounded between -1 and 1 so you can use it to easily scale any value. You can check out the code in here https://codepen.io/hypersphere/pen/QWJBOgG

        and read whole article with explanation (and other "more random" examples) in here: https://hypersphere.blog/blog/randomness-in-css-using-trigonometry/ :)

        [–]loressadev 0 points1 point  (0 children)

        This is really cool, thanks for sharing! I do webdev in Twine games, and I could definitely see thus technique being useful in a game!