Glitches in water rendering

[andybalaam]

Water rendering goes weird in a few places.

Example level:

#  P  #
#     #
#######

1. Sloping water is invisible until there is a certain amount:

2. Sometimes water level flips between high and low:

More water level flipping:

Graph of water levels (see comment for how I got this):

3. Weird asymmetry:

Note that when I printed out wrr.topVertex( LEFT ) and wrr.topVertex( RIGHT ) during this period, they were identical, implying something else is wrong.

[colonelfazackerley]

re 1. What's happening is that there is no water in the adjacent cell yet. should I render some anyway?

[tttppp]

I suspect in 2 the amount of water in the cells is also the problem. It really does flip from high to low sometimes, as the cellular automation happens to resonate with the shape of the world. Maybe we could create a better visualisation of this, but I think it would be hard. The polygon representation is much nicer than the earlier sprite version.

We could consider plotting the height of water at the centre of cells, rather than using the edges. This would result in drawing water in empty cells sometimes, but might be smoother to animate. I think we will get problems with full cells next to empty cells (they won't look good).

[andybalaam]

I want to get a bit more info to check @tttppp's suspicion. I will also add a couple of other gifs. I suspect there may be a couple of actual rendering bugs but could be wrong

[andybalaam]

Having lines bending in the middle of a square might make it harder to tell when a rabbit was going to drown

[tttppp]

@andybalaam Yes - agree about hard to see drowning.

[colonelfazackerley]

I have a commit for 1.

I will make a PR when I have done something about 2.

[andybalaam]

Ooh, so was 1 a bug?

I added 3. I think that covers everything I saw.

[andybalaam]

Oh, sorry - misremembering - 1 was not a bug but we can make it look nicer.

[andybalaam]

The graph of water levels above shows that the values of wrr.topVertex( LEFT ) and wrr.topVertex( RIGHT ) flip to low values, when height is actually smooth.

Here's how I got the graph. In WaterAnimation.java in calculatePolygons(), after:

if ( null == wrr || wrr.adjacentWaterIsFalling( HERE ) )
{
    continue;
}

I added:

if ( x == 3 && y == 1 )
{
    System.out.println(
        wrr.targetWaterHeight
        + " " + wrr.height
        + " " + ( 64 - wrr.topVertex( LEFT ).y )
        + ", " + ( 64 - wrr.topVertex( RIGHT ).y )
    );
}

Edit: I had to make targetWaterHeight and height public too.

I then ran the program with ./runrabbit -l water-glitches.rel and copied the output into a file heights.txt.

Then I plotted with Gnuplot like this:

plot "heights.txt" using 1 with lines title "target", "heights.txt" using 2 with lines title "height", "heights.txt" using 3 with lines title "VertexLEFT", "heights.txt" using 4 with lines title "VertexRIGHT"

[colonelfazackerley]

I am looking at the water level jumping. Your graph is very handy: the height and target seem smooth enough, but the vertices jump anyway.

[colonelfazackerley]

I was using the max of adjacent cells for the vertex height. This was to remove a glitch where the cell above is filling, but the one below has a sloping top.

It creates this glitch, sometimes.

I have several fixes for that under different circumstances. This one may not be necessary any more.

[tttppp]

Just to say I've made some progress on this and I've fixed 1 and 3. There are still some issues and a bit more testing needed.

[tttppp]

I spent quite a while trying to create a gif of the new water rendering, but couldn't get imagemagick to play ball. Basically the main difference is that I've added a mid-point at the top of each cell.

[andybalaam]

Excellent. Imagemagick on your machine seems broken in a hopefully-you-specific way. I will try to make a gif from your MR.

[tttppp]

I have another commit to push to make slopes look a little better. It really needs something for the falling water to make it presentable, but it's already looking more symetrical at least.

[tttppp]

Ok - the extra commit is done now. The most obvious thing remaining is falling water.

[andybalaam]

GIF based on the latest master code (with a new convenience gif-making script:)

Command:

./record-level rabbit-escape-engine/test/rabbitescape/levels/bugs/water-glitches.rel 50 50 600 400 100 100 520 320 3 16 water-glitches-before.gif

[andybalaam]

GIF based on @tttppp 's branch WaterRendering:

Command:

./record-level rabbit-escape-engine/test/rabbitescape/levels/bugs/water-glitches.rel 50 50 600 400 100 100 520 320 3 16 water-glitches-after.gif

[andybalaam]

The flipping (2) is gone, except I see some right at the end, where it looks like the cell is flipping between almost-full and full?

As far as I can see, the asymmetry (3) is gone.

Empty squares next to non-empty (1) is still there, but looks less obvious I think.

Are we OK with the water being a bit "pointy"?

[andybalaam]

This is looking pretty cool:

Level:

#N#t #
#N## #
#N# (#
#N#) #
#N#  #
#N#b #
######
:solution.1=until:WON

Command (on tttppp's WaterRendering branch):

./record-level rabbit-escape-engine/test/rabbitescape/levels/bugs/water-slosh.rel 50 50 600 400 100 100 520 320 3 16 water-slosh.gif

But there is a delay rendering the column of water - I assume we put this in deliberately to make things look smoother, but I now think we should consider rendering the actual state of the square immediately, instead of smoothing, so the column of water on the left would appear immediately,

[tttppp]

I think the delay rendering it is because it's "falling" before that. I can't remember what exactly causes water to be falling, but I think it's falling if the cell below it contains water that's also falling. My plan was to add falling water as a solid square and use alpha to change the fullness between 0 and 1024 - this would cause the falling water to look like a solid column in your new example.

The flipping you're pointing out is when the cell becomes full. I decided that it looks weird for a rabbit to drown in a cell when their head is out of the water, so I made full cells always look full and empty cells always look empty. For anything less than full the boundary height is the average height of the two adjacent cells.

Maybe we could use a more complex formula, perhaps something that mapped water contents to area? I don't really mind the flipping at the moment though - it looks a little bit like surface tension causing the water to snap to the grid.

[tttppp]

Also - removing the pointyness could be done with more midpoints or with some (e.g. polynomial) curve for the top of the polygon, but I haven't looked into this at all.

[andybalaam]

That sounds like a good plan for falling water.

I'm not keen on flipping - could we bring the sides up as we get near to full?

I think pointiness is fine - it looks cool when water is sloshing around.

I was lying awake last night worrying that the best thing to do would be completely horizontal lines across each square that show the exact fullness of that square, and then at the edge of each square about 5-pixels-width of diagonal line to join to the next level. So sloshing water would look like a vertical bar chart shifting over time.

In the column example is the water really falling? It starts with all the cells "full" so I would have thought not.

[tttppp]

Here's the latest version with square backgrounds for water (including falling).

[andybalaam]

Wow, this looks amazing! Is water done???

[BenjaminBalaam]

Looks amazing, made a gif which lasts a bit longer. (The water is a bit grainy, but that is just the gif encoding)

[BenjaminBalaam]

Also here is the testing level.

[andybalaam]

Beautiful

[andybalaam]

@tttppp are you ready for me to review and merge the pull request?

[andybalaam]

Note to self, the PR linked here should fix #431 too.

[tttppp]

You're welcome to review the PR. I think the new code is an improvement, even if it's not perfect. I think we could do better with slopes, and some levels I tried looked a bit 'disco' with cells changing shades of blue. However I think it's playable like this, which is the main thing.

I'm not sure when I'll get chance to push code review fixes, so if anyone gets there before me then feel free to fix any issues. (E.g. There was commented code at one point, I can't remember whether I deleted it or not).

[tttppp]

Another issue with the new code is that I took out the colonel's clever polygon merging code, so it's not as efficient as before. I think we probably need some code for Android to work too (as I changed some code for swing, but none for Android).

[andybalaam]

Ok, I'll give it a proper try and if any of it causes problems we can wait until after the rabbot release. (I'd like to stagger releases for rabbots, misc levels, super-easy levels, water rather than doing them all at once.)

[andybalaam]

It looks amazing, and is merged + I copied the rendering code into Android, in 0.10.3.6.

If people want to make it more efficient, go for it, but we'll see how it works like this. I don't plan to include any water levels in 0.11, so we have time to work on it.

[tttppp]

Woohoo! Time to get started on some rabbot + water levels!

[andybalaam]

Don't forget we need just 1 more non-water rabbot level so we can release 0.11!