I'm trying to implement water ripple effect on a polygon model / wireframe. I followed these two guides that are pretty clear: 2D Water and The Water Effect Explained
Following these guides, I ended up with (in this order)
Two arrays of floats, full of zeros after my app launches expect one to start the ripple effect
float[][] heightMapPrev = new float[101][101];
float[][] heightMapCurr = new float[101][101];
// ... filling both arrays with 0.0f ...
heightMapCurr[30][40] = -0.5f; // changing one value to start a water wave
Variable to define damping of waves as they go further
float damping = 0.4f;
The algorithm itself. I loop through all the vertices, count their new y position and smoothening/damping the effect
// Loop through all the vertices and update their vertical position values according to their surrounding vertices' vertical positions
for (int i = 1; i < 100; i++) {
for (int j = 1; j < 100; j++) {
// Count new vertical position of each vertex
heightMapCurr[i][j] = (heightMapPrev[i+1][j] +
heightMapPrev[i-1][j] +
heightMapPrev[i][j+1] +
heightMapPrev[i][j-1]) % 2.0f -
heightMapCurr[i][j];
// Count water vertical velocity
float velocity = -heightMapCurr[i][j];
// Smooth buffers every frame to waves spread out the waves
float smoothed = (heightMapPrev[i+1][j] +
heightMapPrev[i-1][j] +
heightMapPrev[i][j+1] +
heightMapPrev[i][j-1]) / 4.0f;
// Calculate new height of the water; reduce the effect with *2
heightMapCurr[i][j] = smoothed * 2 + velocity;
// Damp ripples to make them loose energy
heightMapCurr[i][j] *= damping;
}
}
(Re)drawing all the vertices, inside those two for loops
gl.glVertex3f((float)i, heightMapCurr[i][j], (float)j); // for each vertex
Finally, as the guide tells me to, I swap values in both arrays - what was in the waveMapPrev is now in waveMapCurr and vice versa
for (int i = 0; i < 101; i++) {
for (int j = 0; j < 101; j++) {
temp[i][j] = heightMapPrev[i][j];
heightMapPrev[i][j] = heightMapCurr[i][j];
heightMapCurr[i][j] = temp[i][j];
}
}
I though I'm clear about what is happening there but clearly I'm not, because there something wrong in my algorithm. Wave spreads from a certain point into distance, keeping circle shape, that is okay. However, water keeps "bubbling" also in the middle of the circle and once the water ripple reaches borders, everything is "bubbling" and it never stops. The ripple should probably not even hit all the borders.
Can you tell/explain me what I did wrong and how to correct the error? I tried for hours changing values (damping...), operators (% for /, + for -), and smoothening function, I did not succeed, though.
Update://
In the code above, I use modulus operator (%) instead of (/). The reason for this is just because I always get completely wrong heightMap values, the wave starts spreading to all directions including somewhere into the sky, never getting back down - like in the image below.
I think I've found your problem. Replace the modulus operator % with a simple divide /, as both of the links you provide suggest and see what that does.
The solution is even simpler than what the guides propose. I have found it here
This is the the body of the whole algorithm according to the latter guide provided, even simpler than anyone could expect.
// Loop through all the vertices and update their vertical position values according to their surrounding vertices' vertical positions
for (int i = 1; i < 100; i++) {
for (int j = 1; j < 100; j++) {
// Count new vertical position of each vertex
heightMapCurr[i][j] = (heightMapPrev[i+1][j] +
heightMapPrev[i-1][j] +
heightMapPrev[i][j+1] +
heightMapPrev[i][j-1]) / 2.0f -
heightMapCurr[i][j];
// Damp ripples to make them loose energy
heightMapCurr[i][j] -= heightMapCurr[i][j] * damping;
}
}
Related
I would like to create a sine wave using vectors (as I am using box2d).
So far I have (in void draw())
Vec2 mov2 = new Vec2(sin(angle)*scalar,0);
for (int j = 0; j <= 10; j++) {
bridge.particles.get(j).body.setLinearVelocity(mov2);
}
where bridge is a chain of particles. However, this makes all the particles move back and forth at the same time whereas I would like to move like a sine wave so that each particle moves just slightly after the previous one.
You need to add some sort of offset between each of the particles inside your loop.
Example:
for( int i=0; i < 360; i++ ){
float x = 1 + i;
float y = (float)(Math.sin( Math.toRadians(i+currentOffset)));
bridge.particles.get(j).setTransform(x, y, 0);
}
currentOffset+=1;
I have a quick question, that in most languages (such as python) would be straightforward.
I am looking to obtain the integral (area of curve) from an 1D-array of fixed points. Java apparently has many numerical integration libraries, all of which seem to require a function (f {double(x)}) as input.
However I can not seem to find any which accommodate arrays (double []) such as [1,4,10,11]. I would be integrating over the entirety of the array (x values 1-n, where n represents the size of the array)
Any help is greatly appreciated
Well, they expect functions because its normal to use them with a continuity.
Since you have only a different height every step (1,2,3,4...?) you have rectangles with triangles on top of them. the height of the triangles is the difference between the current height and the previous height. therefore the rectangle s height is the current pint height minus triangle height.
Write a function which calculates and adds both areas.
Do this for every point/item in your Array and you will get the integral of your "function".
EDIT: I wrote a little code. no guarantee, I just coded some easy to understand code of the idea of this integral prob. Further improvements have to be done.
public static double getIntegralFromArray(double[] ar, double xDist)
{
double base = 0;
double prev = 0;
double triHeight = 0;
double rectHeight = 0;
double tri = 0;
double rect = 0;
double integral = 0;
for (int i = 0; i < ar.length; i++) {
triHeight=Math.abs(ar[i]-prev); // get Height Triangle
tri = xDist*triHeight/2; // get Area Triangle
if(ar[i]<=prev){
rectHeight = Math.abs(base-ar[i]); // get Height Rectangle
}else {
rectHeight = Math.abs(base-(ar[i]-triHeight)); // get Height Rectangle
}
rect = xDist*rectHeight; // get Area Rectangle
integral += (rect + tri); // add Whole Area to Integral
prev=ar[i];
}
return integral;
}
double[] ar = new double[]{1,2,3,2,2,3,1,3,0,3,3};
System.out.println(MyMath.getIntegralFromArray(ar, 1));
Area under 'curve': 21.5
By using trapezoidal rule you can simply call below method to get area under a graph(approx.)
public static double trapz(double ar[],double xDist){
if (ar.length==1 || ar.length==0)
return 0;
double integral=0;
double prev=ar[0];
for (int i=1;i<ar.length;i++)
{
integral+=xDist*(prev+ar[i])/2.0;
prev=ar[i];
}
return integral;
}
The code below is programmed to produce a coloured image in a 200x200 display. However, I am wondering, lets say I want to generate another window but this window will be a 200x200 sketch which is mostly white but the colour boundaries of the original picture are in black, how do I achieve this?
In short, the first window is coloured. The second window is a black and white sketch of the first window. Both windows are to appear next to each other. Do you know how to generate such results? If so, could you please help me?
//Setting the size of the graphics window
final int WINDOW_DIMENSION = 200;
EasyGraphics generate = new EasyGraphics(WINDOW_DIMENSION,WINDOW_DIMENSION);
//Constructing the arrays
char[][] firstArray = new char[WINDOW_DIMENSION][WINDOW_DIMENSION];
char[] secondArray = scan.toCharArray();
//Using "for" loop to generate 2D array
int line = WINDOW_DIMENSION;
int column = -1;
for (int i = 0; i < WINDOW_DIMENSION*WINDOW_DIMENSION; i++) {
column++;
if (i%WINDOW_DIMENSION == 0) {
line--;
column = 0;
}
firstArray[column][line]=secondArray[i];
}
//Plotting the colours for respective range of numbers
for (int a = 0; a < WINDOW_DIMENSION; a++) {
for (int b = 0; b < WINDOW_DIMENSION; b++) {
if (firstArray[a][b]=='0' || firstArray[a][b]=='1' || firstArray[a][b]=='2' || firstArray[a][b]=='3') {
generate.setColor(66,167,243);
generate.plot(a,b);
}
else if (firstArray[a][b]=='4' || firstArray[a][b]=='5') {
generate.setColor(0,255,77);
generate.plot(a,b);
}
else if (firstArray[a][b]=='6' || firstArray[a][b]=='7') {
generate.setColor(51,183,91);
generate.plot(a,b);
}
else if (firstArray[a][b]=='8' || firstArray[a][b]=='9') {
generate.setColor(102,51,0);
generate.plot(a,b);
}
}
}
}
Your help would be sincerely appreciated.
First you need to define what is a boundary if it's juste a change of color or nuances of the same color are counted as the same one, if you take into account nuances you should define a distance between color (for exemple RedDiff+GreenDeff+BlueDiff) and if it's less than a certain value you color the bit in black.
then you can do something like that:
for (int a = 1; a < WINDOW_DIMENSION; a++) {
for (int b = 1; b < WINDOW_DIMENSION; b++) {
generate.setColor(255,255,255);
if(array[a,b]!=array[a-1,b] || array[a,b]!=array[a,b-1])
generate.setColor(0,0,0);
generate.plot(a,b);
}
}
before this you juste need to construct the first line and the first column using something like the code above then use the code above for the other pixels
If by "black and white", you mean greyscale, you need to determine which gradient to use. There are three major methods. Suppose you have [R, G, B] for each coordinate in your array. I'm assuming you're using AWT Color. When that is the case, you can develop the grayscale coordinate by applying the lightness method:
int intensity =
(max((double)color.getRed(), (double)color.getGreen(), (double)color.getBlue()}) +
min((double)color.getRed(), (double)color.getGreen(), (double)color.getBlue()})
/ 2) * 255
Color newColor = new Color(intensity, intensity, intensity)
Or the average method:
int intensity = (((double)color.getRed() + (double)color.getGreen() +
(double)color.getBlue())/3)*255;
Or the luminosity method:
int intensity = ((double)color.getRed() * 0.21 +
(double)color.getGreen() * 0.72 +
(double)color.getBlue() * 0.07) * 255;
or really any other as long as you have a satisfactory slide in lightness between adjacent colors.
If you really mean just black and white, then user1928596's suggestion will definitely do it; but if this is for a course, you may need to adjust the sensitivity to color differences later. Broadening that definition a bit, programs like Photoshop and Gimp generally use the error function on the difference between the two adjacent colors, and a boundary on how different they need to be to be considered an edge. The error function can be found in Apache Commons, at org.apache.commons.math3.special.Erf. I might suggest something like this:
boolean edge = Math.abs(Erf.erf(Intensity2 - Intensity1)) > σ;
where σ is your threshold, between 0 and 1, for an edge. If true, there's an edge, if false, it's a more minor smear and can be ignored.
I've issued myself a sort of challenge, and thought I could stand to ask for help getting my head around it. I want to use java Graphics to draw something that looks like lightning striking a given point.
Right now I just have this, which shoots cheap "lightning" in random directions, and I don't care where it ends up.
lightning[0] = new Point(370,130); //This is a given start point.
// Start in a random direction, each line segment has a length of 25
double theta = rand.nextDouble()*2*Math.PI;
int X = (int)(25*Math.cos(theta));
int Y = (int)(25*Math.sin(theta));
//Populate the array with more points
for (int i = 1 ; i < lightning.length ; i++)
{
lightning[i] = new Point(X + lightning[i-1].x, Y + lightning[i-1].y);
boolean plusminus = rand.nextBoolean();
if (plusminus) theta = theta + rand.nextDouble()*(Math.PI/2);
else theta = theta - rand.nextDouble()*(Math.PI/2);
X = (int)(25*Math.cos(theta));
Y = (int)(25*Math.sin(theta));
}
// Draw lines connecting each point
canvas.setColor(Color.WHITE);
for (int i = 1 ; i < lightning.length ; i++)
{
int Xbegin = lightning[i-1].x;
int Xend = lightning[i].x;
int Ybegin = lightning[i-1].y;
int Yend = lightning[i].y;
canvas.drawLine(Xbegin, Ybegin, Xend, Yend);
//if (Xend != Xbegin) theta = Math.atan((Yend - Ybegin)/(Xend - Xbegin));
// Restrict the angle to 90 degrees in either direction
boolean plusminus = rand.nextBoolean();
if (plusminus) theta = theta + rand.nextDouble()*(Math.PI/2);
else theta = theta - rand.nextDouble()*(Math.PI/2);
// 50/50 chance of creating a half-length off-shoot branch on the end
if (rand.nextBoolean())
{
int Xoff = (int)(Xend+(12*Math.cos(theta)));
int Yoff = (int)(Yend+(12*Math.sin(theta)));
canvas.drawLine(Xend, Yend, Xoff, Yoff);
}
}
I'm trying to think of some similar way to create this effect, but have the last point in the array pre-defined, so that the lightning can "strike" a specific point. In other words, I want to populate a Point array in a way that is random, but still converges on one final point.
Anyone care to weigh in?
I think this is fairly simple, accurate, and elegant approach. It uses a divide and conquer strategy. Start with only 2 values:
start point
end point
Calculate the midpoint. Offset that midpoint some value variance (which can be calculated relative to the length). The offset should ideally be normal to the vector connecting start and end, but you could be cheap by making that offset horizontal, as long as your bolts travel mostly vertically, like real lightning. Repeat above procedure for both (start, offset_mid) and (offset_mid, end), but this time using a smaller number for variance. This is a recursive approach which can terminate when either a threshold variance is achieved, or a threshold line segment length. As the recursion unwinds, you can draw all the connector segments. The idea is that the largest variance happens in the center of the bolt (when the start-to-end distance is the longest), and with each recursive call, the distance between points shrinks, and so does the variance. This way, the global variance of the bolt will be much greater than any local variances (like a real lightning bolt).
Here is an image of 3 different bolts generated from the same pre-determined points with this algorithm. Those points happen to be (250,100) and (500,800). If you want bolts that travel in any direction (not just "mostly vertical"), then you'll need to add more complexity to the point shifting code, shifting both X and Y based on the angle of travel of the bolt.
And here is some Java code for this approach. I used an ArrayList since the the divide and conquer approach doesn't know ahead of time how many elements it will end up with.
// play with these values to fine-tune the appearance of your bolt
private static final double VAR_FACTOR = 0.40;
private static final double VAR_DECREASE = 0.55;
private static final int MIN_LENGTH = 50;
public static ArrayList<Point> buildBolt(Point start, Point end) {
ArrayList<Point> bolt = new ArrayList<Point>();
double dx = start.getX() - end.getX();
double dy = start.getY() - end.getY();
double length = Math.sqrt(dx*dx + dy*dy);
double variance = length * VAR_FACTOR;
bolt.add(start);
buildBolt(start, end, bolt, variance);
return bolt;
}
private static void buildBolt(Point start, Point end,
List<Point> bolt, double variance) {
double dx = start.getX() - end.getX();
double dy = start.getY() - end.getY();
double length = Math.sqrt(dx*dx + dy*dy);
if (length > MIN_LENGTH) {
int varX = (int) ((Math.random() * variance * 2) - variance);
int midX = (start.x + end.x)/2 + varX;
int midY = (start.y + end.y)/2;
Point mid = new Point(midX, midY);
buildBolt(start, mid, bolt, variance * VAR_DECREASE);
buildBolt(mid, end, bolt, variance * VAR_DECREASE);
} else {
bolt.add(end);
}
return;
}
Without any graphics experience, I have this advice: it's going to be hard to pick a specific point, then try to reach it in a "random" way. Instead, I'd recommend creating a straight line from the origin to destination, then randomly bending parts of it. You could make several passes, bending smaller and smaller segments down to a certain limit to get the desired look. Again, I'm saying this without any knowledge of the graphics API.
I'm a first year programmer. I'm trying to create a squircle. (square with round corners).
So far i have managed to get. I have been given the constants of a,b and r. If anyone could help i would be really thankful. I'm a total noob to this. So be nice :)
package squircle;
import java.awt.*;
import javax.swing.*;
import java.lang.Math;
public class Main extends javax.swing.JApplet {
public void paint(Graphics g){
// (x-a)^4 + (y-b)^4 = r^4
// y = quadroot( r^4 - (x-a)^4 + b)
// x values must fall within a-r < x < a+r
int[] xPoints = new int[200];
int[] yPoints = new int[200];
int[] mypoints = new int[200];
for(int c = 0; c <200; c++){
int a = 100;
int r = 100;
int b = 100;
double x = c ;
double temp = (r*r*r*r);
double temp2 = x-a;
double temp3 = ((temp2)*(temp2)*(temp2)*(temp2));
double temp6 = Math.sqrt(temp-temp3);
double y = (Math.sqrt(temp6) + b );
double z = (y*-1)+300;
mypoints[c]=(int)z;
// if (c>100){
// y = y*1;
// }
// else if(c<100){
// y = y*1;
// }
xPoints[c]=(int)x;
yPoints[c]=(int)y;
// change the equation to find x co-ordinates
// change it to find y co-ordinates.
// r is the minor radius
// (a,b) is the location of the centre
// a = 100
// b = 100
// r = 100
// x value must fall within 0 or 200
}
g.drawPolygon(xPoints, yPoints, xPoints.length);
g.drawPolygon(xPoints, (mypoints), xPoints.length);
}
}
Is it homework or is there some other reason why you're not using Graphics#drawRoundRect()?
If you are submitting this as homework there are some elements of style that may help you. What are the roles of 200, 100 and 300? These are "magic constants" which should be avoided. Are they related or is it just chance that they have these values? Suggest you use symbols such as:
int NPOINTS = 200;
or
double radius = 100.0
That would reveal whether the 300 was actually the value you want. I haven't checked.
Personally I wouldn't write
y*-1
but
-y
as it's too easy to mistype the former.
I would also print out the 200 points as floats and see if you can tell by eye where the error is. It's highly likely that the spurious lines are either drawn at the start or end of the calculation - it's easy to make "end-effect" errors where exactly one point is omitted or calculated twice.
Also it's cheap to experiment. Try iterating c from 0 to 100. or 0 to 10, or 0 to 198 or 1 to 200. Does your spurious line/triangle always occur?
UPDATE Here is what I think is wrong and how to tackle it. You have made a very natural graphics error and a fence-post error (http://en.wikipedia.org/wiki/Off-by-one_error) and it's hard to detect what is wrong because your variable names are poorly chosen.
What is mypoints? I believe it is the bottom half of the squircle - if you had called it bottomHalf then those replying woulod have spotted the problem quicker :-).
Your graphics problem is that you are drawing TWO HALF-squircles. Your are drawing CLOSED curves - when you get to the last point (c==199) the polygon is closed by drawing back to c==0. That makes a D-shape. You have TWO D-shapes, one with the bulge UP and one DOWN. Each has a horizontal line closing the polygon.
Your fence-post error is that you are drawing points from 0 to 199. For the half-squircle you want to draw from 0 to 200. That's 201 points! The loss of one point means that you have a very slightly sloping line. The bottom lines slopes in tghe opposite direction from the top. That gives you a very then wedge shape, which you refer to as a triangle. I'm guessing that your triangle is not actually closed but like a slice from a pie but very then/sharp.
(The code below could be prettier and more compact. However it is often useful to break symmetrical problems into quadrants or octants. It would also be interesting to use an anngle to sweep out the polygon).
You actually want ONE polygon. The code should be something like:
int NQUADRANT = 100;
int NPOINTS = 4*NQUADRANT ; // closed polygon
double[] xpoints = new double[NPOINTS];
double[] ypoints = new double[NPOINTS];
Your squircle is at 100, 100 with radius 100. I have chosen different values here
to emphasize they aren't related. By using symbolic names you can easily vary them.
double xcenter = 500.0;
double ycentre = 200.0;
double radius = 100.;
double deltax = radius/(double) NQUADRANT;
// let's assume squircle is centered on 0,0 and add offsets later
// this code is NOT complete or correct but should show the way
// I might have time later
for (int i = 0; i < NPOINTS; i++) {
if (i < NQUADRANT) {
double x0 = -radius + i* deltax;
double y0 = fourthRoot(radius, x0);
x[i] = x0+xcenter;
y[i] = y0+ycenter;
}else if (i < 2*NQUADRANT) {
double x0 = (i-NQUADRANT)* deltax;
double y0 = fourthRoot(radius, x0);
x[i] = x0+xcenter;
y[i] = y0+ycenter;
}else if (i < 3*NQUADRANT) {
double x0 = (i-2*NQUADRANT)* deltax;
double y0 = -fourthRoot(radius, x0);
x[i] = x0+xcenter;
y[i] = y0+ycenter;
}else {
double x0 = -radius + (i-3*NQUADRANT)* deltax;
double y0 = -fourthRoot(radius, x0);
x[i] = x0+xcenter;
y[i] = y0+ycenter;
}
}
// draw single polygon
private double fourthRoot(double radius, double x) {
return Math.sqrt(Math.sqrt(radius*radius*radius*radius - x*x*x*x));
}
There is a javascript version here. You can view the source and "compare notes" to potentially see what you are doing wrong.
Ok, upon further investigation here is why you are getting the "triangle intersecting it". When you drawPolygon the points are drawn and the last point connects the first point, closing the points and making the polygon. Since you draw one half it is drawn (then connected to itself) and then the same happens for the other side.
As a test of this change your last couple lines to this:
for( int i = 0; i < yPoints.length; i++ ) {
g.drawString( "*", xPoints[ i ], yPoints[ i ] );
}
for( int i = 0; i < mypoints.length; i++ ) {
g.drawString( "*", xPoints[ i ], mypoints[ i ] );
}
// g.drawPolygon( xPoints, yPoints, xPoints.length );
// g.drawPolygon( xPoints, ( mypoints ), xPoints.length );
It is a little crude, but I think you'll get the point. There are lots of solutions out there, personally I would try using an array of the Point class and then sort it when done, but I don't know the specifics of what you can and can not do.
Wow, are you guys overthinking this, or what! Why not just use drawLine() four times to draw the straight parts of the rectangle and then use drawArc() to draw the rounded corners?