Develop Reference

Creating Visualisations in Processing and Understanding Code

I am trying to get into creative coding mainly for creating live visuals. I have recently stumbled upon this great website called https://www.openprocessing.org/ where people can share their creations.
I have attached code below for creating two moving circles but I am having trouble understanding how the creator went about doing so, If anyone could explain to me how the for loop is working as well as how the x += 0.006; y += 0.006; if (x > TWO_PI) {x = 0;} section works, it would be greatly appreciated. The use of sin, cos and the Two_PI functions has me puzzled. Here is a link to the original code:
https://www.openprocessing.org/sketch/467333
//comment
float x = 0;
float xx = 0;
float y = 0;
float yy = 0;
float sizecircle = 250;
void setup() {
size (800, 650);
frameRate (60);
strokeWeight (1);
stroke (223, 170, 22);
}
void draw() {
background (51, 51, 51);
for (float i = 0; i < TWO_PI; i += TWO_PI/100) {
line (350 + sin(x+i) * sizecircle, 275 + cos(y+i) * sizecircle, 450 + cos(xx+i) * sizecircle, 375 + sin(yy+i) * sizecircle);
}
x += 0.006;
y += 0.006;
if (x > TWO_PI) {
x = 0;
}
if (y > TWO_PI) {
y = 0;
}
xx += 0.002;
yy += 0.002;
if (xx > TWO_PI) {
xx = 0;
}
if (yy > TWO_PI) {
yy = 0;
}
}

The unit of the angle for sin and cos is Radian. 360° are 2*PI, this is the reason for TWO_PI.
The variables x, y, xx and yy are incremented for 0.0 to 2*PI. If they reach 2*PI, they start form 0.0 again.
With the following code will draw lines from a center point (cx, cy) to 100 points around a circle with radius r.
for (float i = 0; i < TWO_PI; i += TWO_PI/100) {
line(cx, cy, cx + cos(i)*r, cy + sin(i)*r);
}
The trick in the code of the question is that the lines are connection the points around 2 circles, which are rotating opposite direction:
line(cx1 + sin(i)*r, cy1 + cos(i)*r,
cx2 + cos(i)*r, cy2 + sin(i)*r);
Note, that the order of sin and cos is swapped for the start point in compare to the end point, this causes that the circles are rotating opposite directions.
The different rotation speed is caused by the different constants 0.006 respectively 0.002.
By the way, the code can be simplified, because x == y and xx == yy. It is sufficient to use 2 angles in the range [0, TWO_PI]:
float a1 = 0;
float a2 = 0;
float sizecircle = 250;
void draw() {
background (51, 51, 51);
for (float i = 0; i < TWO_PI; i += TWO_PI/100) {
line (350 + sin(a1+i)*sizecircle, 275 + cos(a1+i)*sizecircle,
450 + cos(a2+i)*sizecircle, 375 + sin(a2+i)*sizecircle);
}
a1 += 0.006;
a2 += 0.002;
}
Since sin(x) == sin(x + TWO_PI*n) and cos(x) == cos(x + TWO_PI*n) (n is an integral number), it is not necessary to "reset" the angles.

It's more about math than about programming (well, both these things goes hand in hand).
He's doing the same thing twice, once for each circle, but one of the two will "move" faster than the other, hence the difference in x += 0.006; and xx += 0.002;.
There are 2 PI radians in a full circle (so 2 PI radians == 360 degrees). That's why he's using this measure.
This line
line (350 + sin(x+i) * sizecircle, 275 + cos(y+i) * sizecircle, 450 + cos(xx+i) * sizecircle, 375 + sin(yy+i) * sizecircle);
defines how each circle is "attached" to the other one by drawing a bunch of lines between them. The idea is that the author created a loop that updated the beginning point and the end point of a line, and this loop runs as long as there are lines to draw (it goes around the circle using the 2 PI number).
So in the for (float i = 0; i < TWO_PI; i += TWO_PI/100) loop he draws every line for this position of the circles.
Than he changes the "starting point" where he'll draw the first line by increasing variables x, y, xx, yy a little bit. As they are used in the context of radians, they "circle" around the circles.
Then the draw() loop start over again and he re-draws the whole thing, but a little different as the starting points changed. This makes the drawing look like it moves.
When the "starting points" variables x, y, xx, yy are finished doing a complete turn (so when they are over 2 PI radians), he resets them. As it's a full turn, it's not a huge reset. It's like rounding the time when the clock is one minute past the hour.
Hope it helps.

Rotating a vector by angle and axis in java

I know there are lots of questions and answers about this topic or related but i've beenn trying for 2 hours and still haven't benn able to figure it.
I would like to get a function that looks like this:
public static Vector rotateVector(Vector v, Vector axis, double angle){
}
Where the axis is a unit vector that defines the plane of rotation (the vector v rotates towards the vector axis if angle is positive)
I have already taken a look at rotation matrices but haven't been able to implement those to the above function

Rotating (x, y, z) counter clockwise around unit vector (u, v, w) by angle theta produces a vector (xPrime, yPrime, zPrime):
double xPrime = u*(u*x + v*y + w*z)*(1d - Math.cos(theta))
+ x*Math.cos(theta)
+ (-w*y + v*z)*Math.sin(theta);
double yPrime = v*(u*x + v*y + w*z)*(1d - Math.cos(theta))
+ y*Math.cos(theta)
+ (w*x - u*z)*Math.sin(theta);
double zPrime = w*(u*x + v*y + w*z)*(1d - Math.cos(theta))
+ z*Math.cos(theta)
+ (-v*x + u*y)*Math.sin(theta);
Source here.

Got it, thanks #Chris K. Here is the java function:
public static Vector rotateVectorCC(Vector vec, Vector axis, double theta){
double x, y, z;
double u, v, w;
x=vec.getX();y=vec.getY();z=vec.getZ();
u=axis.getX();v=axis.getY();w=axis.getZ();
double xPrime = u*(u*x + v*y + w*z)*(1d - Math.cos(theta))
+ x*Math.cos(theta)
+ (-w*y + v*z)*Math.sin(theta);
double yPrime = v*(u*x + v*y + w*z)*(1d - Math.cos(theta))
+ y*Math.cos(theta)
+ (w*x - u*z)*Math.sin(theta);
double zPrime = w*(u*x + v*y + w*z)*(1d - Math.cos(theta))
+ z*Math.cos(theta)
+ (-v*x + u*y)*Math.sin(theta);
return new Vector(xPrime, yPrime, zPrime);
}
However, I will keep the check on Chris' answer.

This is the correct way to rotate a vector.
private Vector rotateZ(Vector vector,double angle) { // angle in radians
//normalize(vector); // No need to normalize, vector is already ok...
float x1 = (float)(vector.x * Math.cos(angle) - vector.y * Math.sin(angle));
float y1 = (float)(vector.x * Math.sin(angle) + vector.y * Math.cos(angle)) ;
return new Vector(x1, y1);
}

If you want the rotation for x,y and z axis then you should use rotation matrices all at once.
NewVector = [Rotation_X][Rotation_Y][Rotation_Z]*OldVector
Here Rotation_X,Rotation_Y and Rotation_Z are 3x3 matrices. (You can see http://mathworld.wolfram.com/RotationMatrix.html)
The order of multiplication depends on the problem but i guess you want only one-axis rotation (i.e. the other 2 matrices become identity matrices)
So just putting an if-block you can set the correct matrix, and leave the rest as identity matrices.
Hope this helps.

Z-buffering algorithm not drawing 100% correctly

I'm programming a software renderer in Java, and am trying to use Z-buffering for the depth calculation of each pixel. However, it appears to work inconsistently. For example, with the Utah teapot example model, the handle will draw perhaps half depending on how I rotate it.
My z-buffer algorithm:
for(int i = 0; i < m_triangles.size(); i++)
{
if(triangleIsBackfacing(m_triangles.get(i))) continue; //Backface culling
for(int y = minY(m_triangles.get(i)); y < maxY(m_triangles.get(i)); y++)
{
if((y + getHeight()/2 < 0) || (y + getHeight()/2 >= getHeight())) continue; //getHeight/2 and getWidth/2 is for moving the model to the centre of the screen
for(int x = minX(m_triangles.get(i)); x < maxX(m_triangles.get(i)); x++)
{
if((x + getWidth()/2 < 0) || (x + getWidth()/2 >= getWidth())) continue;
rayOrigin = new Point2D(x, y);
if(pointWithinTriangle(m_triangles.get(i), rayOrigin))
{
zDepth = zValueOfPoint(m_triangles.get(i), rayOrigin);
if(zDepth > zbuffer[x + getWidth()/2][y + getHeight()/2])
{
zbuffer[x + getWidth()/2][y + getHeight()/2] = zDepth;
colour[x + getWidth()/2][y + getHeight()/2] = m_triangles.get(i).getColour();
g2.setColor(m_triangles.get(i).getColour());
drawDot(g2, rayOrigin);
}
}
}
}
}
Method for calculating the z value of a point, given a triangle and the ray origin:
private double zValueOfPoint(Triangle triangle, Point2D rayOrigin)
{
Vector3D surfaceNormal = getNormal(triangle);
double A = surfaceNormal.x;
double B = surfaceNormal.y;
double C = surfaceNormal.z;
double d = -(A * triangle.getV1().x + B * triangle.getV1().y + C * triangle.getV1().z);
double rayZ = -(A * rayOrigin.x + B * rayOrigin.y + d) / C;
return rayZ;
}
Method for calculating if the ray origin is within a projected triangle:
private boolean pointWithinTriangle(Triangle triangle, Point2D rayOrigin)
{
Vector2D v0 = new Vector2D(triangle.getV3().projectPoint(modelViewer), triangle.getV1().projectPoint(modelViewer));
Vector2D v1 = new Vector2D(triangle.getV2().projectPoint(modelViewer), triangle.getV1().projectPoint(modelViewer));
Vector2D v2 = new Vector2D(rayOrigin, triangle.getV1().projectPoint(modelViewer));
double d00 = v0.dotProduct(v0);
double d01 = v0.dotProduct(v1);
double d02 = v0.dotProduct(v2);
double d11 = v1.dotProduct(v1);
double d12 = v1.dotProduct(v2);
double invDenom = 1.0 / (d00 * d11 - d01 * d01);
double u = (d11 * d02 - d01 * d12) * invDenom;
double v = (d00 * d12 - d01 * d02) * invDenom;
// Check if point is in triangle
if((u >= 0) && (v >= 0) && ((u + v) <= 1))
{
return true;
}
return false;
}
Method for calculating surface normal of a triangle:
private Vector3D getNormal(Triangle triangle)
{
Vector3D v1 = new Vector3D(triangle.getV1(), triangle.getV2());
Vector3D v2 = new Vector3D(triangle.getV3(), triangle.getV2());
return v1.crossProduct(v2);
}
Example of the incorrectly drawn teapot:
What am I doing wrong? I feel like it must be some small thing. Given that the triangles draw at all, I doubt it's the pointWithinTriangle method. Backface culling also appears to work correctly, so I doubt it's that. The most likely culprit to me is the zValueOfPoint method, but I don't know enough to know what's wrong with it.

My zValueOfPoint method was not working correctly. I'm unsure why :( however, I changed to a slightly different method of calculating the value of a point in a plane, found here: http://forum.devmaster.net/t/interpolation-on-a-3d-triangle-using-normals/20610/5
To make the answer here complete, we have the equation of a plane:
A * x + B * y + C * z + D = 0
Where A, B, and C are the surface normal x/y/z values, and D is -(Ax0 + By0 + Cz0).
x0, y0, and z0 are taken from one of the vertices of the triangle. x, y, and z are the coordinates of the point where the ray intersects the plane. x and y are known values (rayOrigin.x, rayOrigin.y) but z is the depth which we need to calculate. From the above equation we derive:
z = -A / C * x - B / C * y - D
Then, copied from the above link, we do:
"Note that for every step in the x-direction, z increments by -A / C, and likewise it increments by -B / C for every step in the y-direction.
So these are the gradients we're looking for to perform linear interpolation. In the plane equation (A, B, C) is the normal vector of the plane.
It can easily be computed with a cross product.
Now that we have the gradients, let's call them dz/dx (which is -A / C) and dz/dy (which is -B / C), we can easily compute z everywhere on the triangle.
We know the z value in all three vertex positions.
Let's call the one of the first vertex z0, and it's position coordinates (x0, y0). Then a generic z value of a point (x, y) can be computed as:"
z = z0 + dz/dx * (x - x0) + dz/dy * (y - y0)
This found the Z value correctly and fixed my code. The new zValueOfPoint method is:
private double zValueOfPoint(Triangle triangle, Point2D rayOrigin)
{
Vector3D surfaceNormal = getNormal(triangle);
double A = surfaceNormal.x;
double B = surfaceNormal.y;
double C = surfaceNormal.z;
double dzdx = -A / C;
double dzdy = -B / C;
double rayZ = triangle.getV1().z * modelViewer.getModelScale() + dzdx * (rayOrigin.x - triangle.getV1().projectPoint(modelViewer).x) + dzdy * (rayOrigin.y - triangle.getV1().projectPoint(modelViewer).y);
return rayZ;
}
We can optimize this by only calculating most of it once, and then adding dz/dx to get the z value for the next pixel, or dz/dy for the pixel below (with the y-axis going down). This means that we cut down on calculations per polygon significantly.

this must be really slow
so much redundant computations per iteration/pixel just to iterate its coordinates. You should compute the 3 projected vertexes and iterate between them instead look here:
triangle/convex polygon rasterization
I dislike your zValueOfPoint function
can not find any use of x,y coordinates from the main loops in it so how it can compute the Z value correctly ?
Or it just computes the average Z value per whole triangle ? or am I missing something? (not a JAVA coder myself) in anyway it seems that this is your main problem.
if you Z-value is wrongly computed then Z-Buffer can not work properly. To test that look at the depth buffer as image after rendering if it is not shaded teapot but some incoherent or constant mess instead then it is clear ...
Z buffer implementation
That looks OK
[Hints]
You have too much times terms like x + getWidth()/2 why not compute them just once to some variable? I know modern compilers should do it anyway but the code would be also more readable and shorter... at least for me

Better way to go up/down slope based on yaw?

Alright, so I got a bit of movement code and I'm thinking I'm going to need to manually input when to go up/down a slope. All I got to work with is the slope's normal, and vector, and My current and previous position, and my yaw.
Is there a better way to rotate whether I go up or down the slope based on my yaw?
Vector3f move = new Vector3f(0,0,0);
move.x = (float)-Math.cos(Math.toRadians(yaw));
move.z = (float)-Math.sin(Math.toRadians(yaw));
System.out.println("slopeNormal.z: " + slopeNormal.z + "move.z: " + move.z);
move.normalise();
float vx = (float) (Math.sqrt(Math.pow(move.y, 2) + Math.pow(move.z, 2)) * move.x);
float vy = (float) (Math.sqrt(Math.pow(move.x, 2) + Math.pow(move.z, 2)) * move.y);
float vz = - vx * slopeNormal.x - vy * slopeNormal.y;
move.scale(movementSpeed * delta);
if(vz < 0)
move.y -= slopeVec.y * 1.5f;
if(vz > 0)
move.y += slopeVec.y * 1.5f;
Vector3f.add(pos, move, pos);
Edit: updated code.

First off, the following is incorrect:
move.x = (float)-Math.toDegrees(Math.cos(Math.toRadians(yaw)));
move.z = (float)-Math.toDegrees(Math.sin(Math.toRadians(yaw)));
Math.toDegrees converts an angle in radians to one in degrees, but the results of Math.cos and Math.sin are not angles.
Assume zero yaw is in the positive x-direction... and define vx, vy, vz = rate of motion along 3 axes, s = speed, and slope normal = nx, ny, nz where nx^2 + ny^2 + nz^2 = 1. So nx = ny = 0, nz = 1 would be flat.
First, I define x', y' = axes relative to the flat ground (motion is constrained to ground). Then (the following is not valid Java, but I'm enclosing it in code format anyway):
vx' = cos(yaw) * s
vy' = sin(yaw) * s
Then I need to rotate from x', y' coordinates to real-world coordinates. That is done using the slope normal:
vx = sqrt(vy^2 + vz^2) vx'
vy = sqrt(vx^2 + vz^2) vy'
vz = - vx' nx - vy' ny
A check on this transformation: vx^2 + vy^2 + vz^2 must equal vx'^2 + vy'^2 = s^2. I think this works out.
So to answer your question: up or down? vz > 0 is up, vz < 0 is down.

How to determine a vector using 2 Points in Android map?

I'm trying to do some advanced features with android maps and to do that I need to do some operations on vectors. Now - I read the answer from this and it gave me some hints and tips. However, there is a part which I don't understand. Please allow me to quote this:
Now that we have the ray with its start and end coordinates, the problem shifts from "is the point within the polygon" to "how often intersects the ray a polygon side". Therefor we can't just work with the polygon points as before (for the bounding box), now we need the actual sides. A side is always defined by two points.
side 1: (X1/Y1)-(X2/Y2) side 2:
(X2/Y2)-(X3/Y3) side 3:
(X3/Y3)-(X4/Y4)
So my understanding is that every side of the triangle is actually a vector. But how is it possible to substract 2 points? Let's say I got a triangle with 3 vertices: A(1,1) , B(2,2), C (1,3). So according to that, I have to do, for example, (1,1)-(2,2) in order to calculate one of the sides. The question is how to do it programatically in java/android? Below I'm attaching the code which I already developed:
/** Creating the containers for screen
* coordinates taken from geoPoints
*/
Point point1_screen = new Point();
Point point2_screen = new Point();
Point point3_screen = new Point();
/* Project them from the map to screen */
mapView.getProjection().toPixels(point1, point1_screen);
mapView.getProjection().toPixels(point2, point2_screen);
mapView.getProjection().toPixels(point3, point3_screen);
int xA = point1_screen.x;
int yA = point1_screen.y;
int xB = point2_screen.x;
int yB = point2_screen.y;
int xC = point3_screen.x;
int yC = point3_screen.y;
int[] xPointsArray = new int[3];
int[] yPointsArray = new int[3];
xPointsArray[0] = xA;
xPointsArray[1] = xB;
xPointsArray[2] = xC;
yPointsArray[0] = yA;
yPointsArray[1] = yB;
yPointsArray[2] = yC;
Arrays.sort(xPointsArray);
int xMin = xPointsArray[0];
int yMin = yPointsArray[0];
int xMax = xPointsArray[xPointsArray.length-1];
int yMax = xPointsArray[xPointsArray.length-1];
int e = (xMax - xMin) / 100; // for ray calcultions
int width = mapView.getWidth();
int height = mapView.getHeight();
if(pPoint.x < xMin || pPoint.x > xMax || pPoint.y > yMin || pPoint.y < yMax)
{
DisplayInfoMessage(pPoint.x + " < " + xMin + " AND " + pPoint.x + " > " + xMax + " || " + pPoint.y + " < " + yMin + " AND " + pPoint.y + " > " + yMax );
// DisplayInfoMessage("Minimum is: "+ yPointsArray[0] + " and the maximum is: "+ yPointsArray[xPointsArray.length-1]);
}
else
{
GeoPoint start_point = new GeoPoint(xMin - e, pPoint.y);
Point start_point_container = new Point();
mapView.getProjection().toPixels(start_point, start_point_container);
int a, b, c, tx, ty;
int d1, d2, hd;
int ix, iy;
float r;
// calculating vector for 1st line
tx = xB - xA;
ty = yB - yA;
// equation for 1st line
a = ty;
b = tx;
c = xA*a - yA*b;
// get distances from line for line 2
d1 = a*xB + b*yB + c;
d2 = a*pPoint.x + b*pPoint.y + c;
DisplayInfoMessage("You clicked inside the triangle!" + "TRIANGLE POINTS: A("+xA+","+yA+") B("+xB+","+yB+") C("+xC+","+yC+")");
}
The pPoint hold the coordinates of the point which user clicked. I hope that I explained my problem well enough. Can someone give me some help with that? Appreciated!

I'm not an Android developer, but I see that android.graphics.drawable.shapes.Shape lacks the contains() method found in java.awt.Shape. It appears you'll have to develop your own test, as suggested in the article you cited. In addition, you might want to look at crossing/winding number algorithms.
But how is it possible to subtract 2 points?
Subtraction of vectors is well defined, and easily implemented in Java. Given two points as vectors, the components of the difference represent the tangent (slope) of a line connecting the points. The example in the article implements this in the following lines:
//get tangent vector for line 1
tx = v1x2 - v1x1;
ty = v1y2 - v1y1;
The foundation for the approach shown is discussed further in Line and Segment Intersections.