Libgdx Wavy line

Hey, I’m trying to create a line that moves in a wave. Similar to the “milk” in Cookie Clicker (see: http://orteil.dashnet.org/cookieclicker/). I also want a color to be filled underneath the wave, I can only think of drawing a box under the line (obviously that wouldn’t look right);

I’d like to do it with ShapeRender, but I cannot think of the math needed or how to make a line bend.

Hopefully you understand what I’m trying to say.
Thanks.

Have you tried simply using sin or cos?

Starting at x=0, set the y value of your point to heightsin(x) or heightcos(x). Then add some delta value (.1 or .25 maybe) to your x, and your next y value is again heightsin(x) or heightcos(x).

Try that out, and if you can’t get it working, post an MCVE and we’ll go from there!

Wouldn’t the x be greater than my screen width and then not be visible? I want the wave to loop. :slight_smile:

What happened when you tried?

When you reach the bounds of your screen, then you just continue the shape to fill in the bottom of the screen.

My bad, I was using arc() instead of line().

Here’s my code so far;


float x = 0;
public void render() {
                float y = (float) (20*Math.sin(x));
		x += 0.06;
		s.begin(ShapeType.Line);
		s.line(0, 100+y, 480, 100+y);
		s.end();
}

The line is straight and bounces up and down (slightly, like I wanted). Now I think all that needs to be done is the line to curve. :smiley:

That’s not quite what I was talking about. You need to have a for loop that draws the entire top of the line, which will actually be a bunch of little lines. Right now it seems that this will only draw a single small line.

I guess what you’re going for is the movement of the entire thing. You can do that by having some offset that you increment each time.

But break it down into smaller pieces: first get the “wavy” part down by doing what I recommended above. Then when you get that working, worry about getting that wavy to move over time.

Sorry, I don’t quite understand. Could you post the base for loop?

It would look something like this:

public void render() {

   float deltaX = .06;

   s.begin(ShapeType.Line);
   for(int x = 0; x < windowWidth; x += deltaX){
      float y = (float) (20*Math.sin(x));
      s.point(x, y, 0);
   }
   s.point(lowerRightX, lowerRightY);
   s.point(lowerLeftX, lowerLeftY);
   s.point(originalX, originalY); //might not be needed
   s.end();  
}

This code is not tested, so you’ll probably have to play with it a bit, but the idea is there.

You might also just consider using an image.

How could I move the image to wave?

The same way you’d move the above approach: by having some offset that you increment over time.

It’s pretty hard to answer general “how do I do this” type questions. I highly recommend just trying something out and seeing what happens. If you really have no idea how to even start, then I recommend taking a step back and breaking the problem down into smaller pieces: like I said above, can you show a still-frame of the effect you’re looking for? After you get that working, then worry about making it move.

f***sake you got me addicted to cookie clicker again …

Yeah I was going to say, links to Cookie Clicker should have a warning like links to TV Tropes