Generating water pool

Newbie & Debugging Questions
#1

I would like to generate a water pool like the below image (but smoother curves). Does anybody have any ideas on how to programmatically generate points along a border of a water pool? I have code to store the shape and know how to render it, I just need to generate it.

Any thoughts would be appreciated :slight_smile:
CopyableCougar4

#2

If you’re using openGL you create the shape using curves…

Anyway have you tried using an Alpha channel? You can create an algorithm to detect edges and then blend the image with the background or use alpha to blend the edges.

#3

Hm… have you ever worked with OpenGL? :slight_smile: It’s not curvy at all.

#4

I have certainly made curves in openGL…3dbuzz even has a couple (old) vids on it?

quick youtube came up with this

#5

I wasn’t saying it’s impossible, but it’s not an inherent feature/property of OpenGL.

Advising the OP to use OpenGL to generate curves, is like sending him down the rabbit hole.

#6

True…idk thought they should know it’s possible, yields nice results in most cases.

#7

I had an idea, but
a. I don’t know how to decide slope (see below)
b. I don’t know if it would work

Anyways, here’s my idea:

  • Generate several points around a center, with randomized radii and offsets from the center.
  • Do the following per point:
    • find it’s relative location to the two nearest points
    • if the other point is above it (y value), then that segment is concave up, otherwise it’s concave down
    • determine slopes of selected points between two points (this is where I don’t know what to do)
    • add all points to my shape object.
      and then I know how to render it from there.

Illustration:

CopyableCougar4

#8

You could try your luck at splines for that…

#9

I will certainly try :slight_smile: I found a javascript file that is supposed to create the curves, now to translate it…

Flaws noticed.

  • only designed for a function where all the x values only have one possible y value
  • it’s in javascript, so I have to figure out types and sizes for all variables

Off to translate it!

For anybody interested, here’s the JavaScript:

function CSPL(){};
	
	CSPL._gaussJ = {};
	CSPL._gaussJ.solve = function(A, x)	// in Matrix, out solutions
	{
		var m = A.length;
		for(var k=0; k<m; k++)	// column
		{
			// pivot for column
			var i_max = 0; var vali = Number.NEGATIVE_INFINITY;
			for(var i=k; i<m; i++) if(A[i][k]>vali) { i_max = i; vali = A[i][k];}
			CSPL._gaussJ.swapRows(A, k, i_max);
			
			if(A[i_max][i] == 0) console.log("matrix is singular!");
			
			// for all rows below pivot
			for(var i=k+1; i<m; i++)
			{
				for(var j=k+1; j<m+1; j++)
					A[i][j] = A[i][j] - A[k][j] * (A[i][k] / A[k][k]);
				A[i][k] = 0;
			}
		}
		
		for(var i=m-1; i>=0; i--)	// rows = columns
		{
			var v = A[i][m] / A[i][i];
			x[i] = v;
			for(var j=i-1; j>=0; j--)	// rows
			{
				A[j][m] -= A[j][i] * v;
				A[j][i] = 0;
			}
		}
	}
	CSPL._gaussJ.zerosMat = function(r,c) {var A = []; for(var i=0; i<r; i++) {A.push([]); for(var j=0; j<c; j++) A[i].push(0);} return A;}
	CSPL._gaussJ.printMat = function(A){ for(var i=0; i<A.length; i++) console.log(A[i]); }
	CSPL._gaussJ.swapRows = function(m, k, l) {var p = m[k]; m[k] = m[l]; m[l] = p;}
		
		
	CSPL.getNaturalKs = function(xs, ys, ks)	// in x values, in y values, out k values
	{
		var n = xs.length-1;
		var A = CSPL._gaussJ.zerosMat(n+1, n+2);
			
		for(var i=1; i<n; i++)	// rows
		{
			A[i][i-1] = 1/(xs[i] - xs[i-1]);
			
			A[i][i  ] = 2 * (1/(xs[i] - xs[i-1]) + 1/(xs[i+1] - xs[i])) ;
			
			A[i][i+1] = 1/(xs[i+1] - xs[i]);
			
			A[i][n+1] = 3*( (ys[i]-ys[i-1])/((xs[i] - xs[i-1])*(xs[i] - xs[i-1]))  +  (ys[i+1]-ys[i])/ ((xs[i+1] - xs[i])*(xs[i+1] - xs[i])) );
		}
		
		A[0][0  ] = 2/(xs[1] - xs[0]);
		A[0][1  ] = 1/(xs[1] - xs[0]);
		A[0][n+1] = 3 * (ys[1] - ys[0]) / ((xs[1]-xs[0])*(xs[1]-xs[0]));
		
		A[n][n-1] = 1/(xs[n] - xs[n-1]);
		A[n][n  ] = 2/(xs[n] - xs[n-1]);
		A[n][n+1] = 3 * (ys[n] - ys[n-1]) / ((xs[n]-xs[n-1])*(xs[n]-xs[n-1]));
			
		CSPL._gaussJ.solve(A, ks);		
	}
		
	CSPL.evalSpline = function(x, xs, ys, ks)
	{
		var i = 1;
		while(xs[i]<x) i++;
		
		var t = (x - xs[i-1]) / (xs[i] - xs[i-1]);
		
		var a =  ks[i-1]*(xs[i]-xs[i-1]) - (ys[i]-ys[i-1]);
		var b = -ks[i  ]*(xs[i]-xs[i-1]) + (ys[i]-ys[i-1]);
		
		var q = (1-t)*ys[i-1] + t*ys[i] + t*(1-t)*(a*(1-t)+b*t);
		return q;
	}

CopyableCougar4

#10

ugh whats the name for that oh yer it is a bezier curve , infact they look really nice and (nicely) are pretty efficient to create , you can do it with a series of points and iteration. Check out the wikipedia article BAM->http://en.wikipedia.org/wiki/BĂ©zier_curve