47 votes

I made some tildes loading .gifs

16 comments

  1. toly
    Link
    The "sin" wave looking one is better than the triangle wave one

    The "sin" wave looking one is better than the triangle wave one

    14 votes
  2. teaearlgraycold
    (edited )
    Link
    I made both of these with a combination of Shadron and Photoshop (for the rending of the animation into a gif). Here's the source code: #include <math_constants> image Source = input() :...

    I made both of these with a combination of Shadron and Photoshop (for the rending of the animation into a gif).

    Here's the source code:

    #include <math_constants>
    
    image Source = input() : filter(nearest), map(clamp);
    
    glsl float quant(float val, float divisions) {
        return floor(val * divisions) / divisions;
    }
    
    // Yes I realize this could probably be done in a more shader-friendly way
    glsl float triangle_wave(float x) {
        x = mod(x, 2.0);
    
        if (x >= 0 && x < 1) {
            return x;
        } else {
            return 2 - x;
        }
    }
    
    glsl vec4 tildes(vec2 pos) {
        float quant_x = quant(pos.x, 8.0);
        float deviation = triangle_wave(quant_x * 3.0 + shadron_Time / 3.0) / 3.0; // can substitute for sin()
        return texture(Source, vec2(pos.x, pos.y + deviation - 0.225));
    }
    
    animation Tildes = glsl(tildes, 256, 256);
    export png_sequence(Tildes, "tildes/Tildes_?.png", 50, 6);
    

    And the "Source" image that is used as the texture.

    11 votes
  3. [2]
    frickindeal
    Link
    I really like these. Both work for me, but I prefer "triangle wave." Where would you envision these being used? The site is pretty lightweight to need loading animations, is it not? I suppose on...

    I really like these. Both work for me, but I prefer "triangle wave."

    Where would you envision these being used? The site is pretty lightweight to need loading animations, is it not? I suppose on an exceedingly throttled mobile connection, they might become necessary.

    7 votes
    1. teaearlgraycold
      Link Parent
      No idea. I just thought they'd be fun to make. Hopefully Tildes never gets slow enough to need them. Ironically in gif form they'd not be of much help on a mobile connection. But you could keep...

      Where would you envision these being used?

      No idea. I just thought they'd be fun to make. Hopefully Tildes never gets slow enough to need them.

      Ironically in gif form they'd not be of much help on a mobile connection. But you could keep the size to a few KiB by utilizing JavaScript to render it in real time.

      14 votes
  4. Fin
    Link
    IMO I like the second one better. The first one feels like it's being too "microsofty"

    IMO I like the second one better. The first one feels like it's being too "microsofty"

    6 votes
  5. [2]
    meghan
    Link
    They both seem too slow

    They both seem too slow

    4 votes
    1. teaearlgraycold
      Link Parent
      I suppose so. Usually when I write GLSL it's so I can have something pretty to look at, and anything that moves too quickly is jarring. I doubt these animations will ever get used, but if they do...

      I suppose so. Usually when I write GLSL it's so I can have something pretty to look at, and anything that moves too quickly is jarring. I doubt these animations will ever get used, but if they do then I'd recommend varying the animation speed with the loading progress. So normally it would idle at this rate, but a jump from 0 to 25% would give a short burst of speed.

      4 votes
  6. SleepyGary
    Link
    They are cool and don't take offense but I really hope the site never needs them.

    They are cool and don't take offense but I really hope the site never needs them.

    4 votes
  7. tiz
    Link
    Neat stuff

    Neat stuff

    2 votes
  8. [3]
    Comment deleted by author
    Link
    1. [2]
      teaearlgraycold
      Link Parent
      Hm? Looks the same to me. If it's been changed at all that's probably because of .gif compression.

      Hm? Looks the same to me. If it's been changed at all that's probably because of .gif compression.

      4 votes
      1. [2]
        Comment deleted by author
        Link Parent
        1. teaearlgraycold
          Link Parent
          Yeah it seems that all of the colors are of the format #XXYYZZ (where X, Y, and Z are all hex digits) in my gif. Must just be the compression.

          Yeah it seems that all of the colors are of the format #XXYYZZ (where X, Y, and Z are all hex digits) in my gif. Must just be the compression.

          2 votes
  9. Shahriar
    Link
    I could see this being used for the mobile app, glad the website itself is so lightweight it doesn't need a loading screen!

    I could see this being used for the mobile app, glad the website itself is so lightweight it doesn't need a loading screen!

    1 vote
  10. starchturrets
    Link
    Could this be used for the splash screen of a tildes app?

    Could this be used for the splash screen of a tildes app?

  11. edca5
    Link
    Looks really cool!

    Looks really cool!