Web Analytics Made Easy -
StatCounter Raindrop-ish animated background brainstorm - CodingForum

Announcement

Collapse
No announcement yet.

Raindrop-ish animated background brainstorm

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Raindrop-ish animated background brainstorm

    So for my text RPG project, I want to write a script to make an animated background. Here's the basis:

    I'll have circle objects appear at random locations in the background (z-index -1).
    They will have a transition duration so they softly appear and disappear.
    I set the max objects to about 12 with a conditional statement.
    I'm having problems coming up with an idea for the random location algorithm.
    I can do the styling and all that.

    Does anyone think this is a good idea? Does anyone have any tips for the random location algorithm?


    Thanks!

  • #2
    Does anyone think this is a good idea?
    Reads interesting. I would propose to animate the diameter of the circles from very small to wide.
    Does anyone have any tips for the random location algorithm?
    Simply randomize x and y like this?
    Code:
    x = Math.floor(Math.random() * width);
    y = Math.floor(Math.random() * height);
    A real challenge would be applying raindrops to a photo.

    Comment


    • #3
      I like your idea with the transitioning diameters. I am going to try that.

      Also thanks for helping with the random position algorithm. I am wondering if you can set parameters to keep it from generating raindrops behind the title and footer.

      I'll start coding this and see how it looks.

      Comment


      • #4
        I am wondering if you can set parameters to keep it from generating raindrops behind the title and footer.
        I recommend checking the position and repeating randomizing while the position is in title or footer. Something like this:
        Code:
        do {
            x = Math.floor(Math.random() * width);
            y = Math.floor(Math.random() * height);
        } while (inTitle(x, y) || inFooter(x, y))

        Comment


        • #5
          Found this interesting discussion about applying the raindrop effect to an image:
          javascript - Water ripple effect on background of website - Stack Overflow

          Comment


          • #6
            Your code might work in some scenarios, but I want to use an IF/THEN to set the highest values of raindrops to like maybe 6 at a time. If my statement looks like this... (without the styling and random location)
            Code:
            function raindrop(body) {
            if (var drop < 6);
            $("drop").fadeIn("slow")("raindrop");
            }
            ...Then it won't necessarily generate a new one until another fizzes out. I am also thinking about how to put all the raindrops together, because I'm not sure if an array will hold together ever changing objects.

            If the raindrop goes through the increased diameter transition for maybe 0.4 seconds, relaxes for 0.6 seconds, and fades away for 1.0 seconds, that's 2.0 seconds per raindrop. I might increase the fading time for the drop to make it look less hectic and more relaxing.

            Please tell me if I am going about this right. Also, I am trying to balance baseball, homework, and coding so I don't have as much time as I'd like to to figure this out.

            Comment


            • #7
              but I want to use an IF/THEN to set the highest values of raindrops to like maybe 6 at a time
              I would do things in the following way:
              Create six raindrops at startup, graded by time, e. g. 1st immediately, 2nd after 1 sec, 3rd after 2 sec. and so on.
              Then use the callback for the end of the animation, in this handler remove the raindrop having just terminated and create a new one.
              Then the number remains six, as for each raindrop having terminated and being deleted one new one is created.

              Comment


              • #8
                Alright thanks! I'm going to start working on the code.

                Comment

                Working...
                X