I'm trying to generate a grid of points from its 4 corners. As this corners can be freely placed, it will look as the grid has a perspective.
I've written the following code in Processing, where corners are in clockwise order (starting at top-left)
PVector[][] setGrid(PVector[] corners, int cols, int rows) {
PVector[][] grid = new PVector[rows][cols];
for(int y = 0; y < rows; y++) {
float fY = (float)y / (rows - 1);
PVector p1 = PVector.lerp(corners[0], corners[3], fY);
PVector p2 = PVector.lerp(corners[1], corners[2], fY);
for(int x = 0; x < cols; x++) {
grid[y][x] = PVector.lerp(p1, p2, (float)x / (cols-1));
}
}
return grid;
}
This generates a grid with interpolated points, but it doesn't correspond to a perspective grid. All in-line points are equidistant, while in perspective closest points should be more separated than farthest.
I would appreciate some orientation, if possible, in Java/Processing
EDIT
To clarify my answer. I define 4 random corner points, I want to get all the points that create a perspective deformed grid. Note that because of perspective dX1 != dX2 as well as dY1 != dY2 . The code I wrote does not this effect (I know this, but I don't know how to do what I require) as points are interpolated resulting dX1 = dX2 = ... = dXi and dY1 = dY2 = ... = dYi
I've read about perspective transform, but I don't need to transform an image, I just need to get the grid points coordinates.
In your example image the perspective effect is achieved by holding the number of lines invariant along edges of different length. That's what your implementation does, so I'm honestly not seeing the problem.
Here is a sketch calling your setGrid():
PVector[] corners;
void setup(){
size(150,100);
corners = new PVector[4];
corners[0] = new PVector(35,20);
corners[1] = new PVector(15,height-30);
corners[2] = new PVector(width-10,height-10);
corners[3] = new PVector(width-30,10);
noLoop();
}
void draw(){
background(255);
PVector[][] results = setGrid(corners, 9, 9);
for(PVector[] pvs : results){
for(PVector pv : pvs){
ellipse(pv.x,pv.y,5,5);
}
}
}
PVector[][] setGrid(PVector[] corners, int cols, int rows) {
PVector[][] grid = new PVector[rows][cols];
for(int y = 0; y < rows; y++) {
float fY = (float)y / (rows - 1);
PVector p1 = PVector.lerp(corners[0], corners[3], fY);
PVector p2 = PVector.lerp(corners[1], corners[2], fY);
for(int x = 0; x < cols; x++) {
grid[y][x] = PVector.lerp(p1, p2, (float)x / (cols-1));
}
}
return grid;
}
...and the result looks almost exactly like your target image. If you are seeing something different, perhaps you are creating grids with very similar edge lengths?
If you want to project perspective on a regular trapezoid -- like a sidewalk receding into the distance -- then consider this approach instead:
https://math.stackexchange.com/questions/337056/a-controlled-trapezoid-transformation-with-perspective-projecton
I've solved it taking a geometric approach: identifying grid vanishing points from corners, and interpolating from the translated horizon line. I've created a class for this GridPerspective.
There are just 2 requirements:
Corners must be in clockwise order.
Grid sides cannot be parallel (vanishing point to infinite).
Processing code:
GridPerspective grid;
void setup() {
size(600, 600, P2D);
grid = new GridPerspective(10, 10);
}
void draw() {
background(0);
grid.draw();
}
void mouseClicked() {
grid.addCorner(new PVector(mouseX, mouseY));
}
public class GridPerspective {
int cols, rows;
PVector[] corners = new PVector[4];
int selC;
PVector[][] points;
public GridPerspective(int cols, int rows) {
this.cols = cols;
this.rows = rows;
}
public void addCorner(PVector corner) {
if(selC < 4) {
corners[selC++] = corner;
if(selC == 4) update();
}
}
public void update() {
if(corners[0] == null || corners[1] == null || corners[2] == null || corners[3] == null) return;
PVector[] vanishing = new PVector[] {
linesIntersection(corners[0], corners[3], corners[1], corners[2]),
linesIntersection(corners[0], corners[1], corners[3], corners[2])
};
PVector topHorizon = PVector.sub(vanishing[1], vanishing[0]);
PVector bottomHorizon = PVector.add(corners[3], topHorizon);
PVector[] bottomLimits = new PVector[] {
linesIntersection(corners[3], bottomHorizon, vanishing[0], corners[1]),
linesIntersection(corners[3], bottomHorizon, vanishing[1], corners[1])
};
points = new PVector[rows][cols];
for(int r = 0; r < rows; r++) {
PVector bpr = PVector.lerp(corners[3], bottomLimits[0], (float)r / (rows-1));
for(int c = 0; c < cols; c++) {
PVector bpc = PVector.lerp(corners[3], bottomLimits[1], (float)c / (cols-1));
points[r][c] = linesIntersection(bpr, vanishing[0], bpc, vanishing[1]);
}
}
}
public void draw() {
if(points != null) {
fill(255);
for(int r = 0; r < rows; r++) {
for(int c = 0; c < cols; c++) {
ellipse(points[r][c].x, points[r][c].y, 4, 4);
}
}
}
}
private PVector linesIntersection(PVector p1, PVector p2, PVector p3, PVector p4) {
float d = (p2.x-p1.x) * (p4.y - p3.y) - (p2.y-p1.y) * (p4.x - p3.x);
if(d == 0) return null;
return new PVector(p1.x+(((p3.x - p1.x) * (p4.y - p3.y) - (p3.y - p1.y) * (p4.x - p3.x)) / d)*(p2.x-p1.x), p1.y+(((p3.x - p1.x) * (p4.y - p3.y) - (p3.y - p1.y) * (p4.x - p3.x)) / d)*(p2.y-p1.y));
}
}
Related
I have this small piece of code for a prototype.
I'm trying to have it so that on mousePressed() or on mouseClicked() the colour of the line clicked on will change.
I can't for the life of me figure it out!
Any help would be much appreciated!
The code I have so far managed to write is below, it should work fine.
int value = 0;
ArrayList<Line> l = new ArrayList<Line>();
void setup() {
size(500,500);
background(57, 76, 222);
//noLoop();
stroke(255);
strokeWeight(3);
}
void draw() {
for (int i = 1; i< 20; i++) {
l.add(new Line());
for (int a=0; a< l.size(); a++){
l.get(a).display();
noLoop();
}
}
int total = l.size();
println("The total number of lines is: " + total);
}
class Line {
int ranX1, ranX2, ranY1, ranY2;
Line() {
ranX1 = int(random(50,450));
ranX2 = int(random(50,450));
ranY1 = int(random(50,450));
ranY2 = int(random(50,450));
}
void update() {
//
}
void display() {
line(ranX1,ranX2,ranY1,ranY2);
}
}
If you have a line, given by a point (O) and an direction (D), then the nearest point on the line, to a point p can be calculated as follows
X = O + D * dot(P-O, D);
The dot product of 2 vectors is equal the cosine of the angle between the 2 vectors multiplied by the magnitude (length) of both vectors.
dot( A, B ) == | A | * | B | * cos( alpha )
The dot product of V and D is equal the cosine of the angle between the line (O, D) and the vector V = P - O, multiplied by the amount (length) of V, because D is a unit vector (the lenght of D is 1.0).
Use PVector to get the direction from (ranX1, ranY1) to (ranX2, ranY2) and make the direction vector to an unit vector by .normalize(). The length of the vector is verified by .mag():
PVector D = new PVector(ranX2 - ranX1, ranY2 - ranY1);
if ( D.mag() > 0.0 )
D.normalize();
Use the above algorithm to calculate the normal distance to an endless line, where0 the points (ranX1, ranY1) and (ranX2, ranY2) are on. For this the methods .mult(), .add(), .dist() and .dot() are used:
PVector X = new PVector(ranX1, ranY1);
X.add( D.mult( D.dot( vP1 ) ) );
boolean hit = X.dist(new PVector(x, y)) < hit_dist;
Use the dot product to verify if the intersection point (X) of the line and the normal line through the an point (x, y) is in between (ranX1, ranY1) and (ranX2, ranY2). The dot product is less than 0.0 if the angle between two linens is greater 90 degrees or less than -90 degrees:
PVector vP1 = new PVector(x - ranX1, y - ranY1);
if ( D.dot( vP1 ) < 0.0 )
hit = false;
PVector vP2 = new PVector(x - ranX2, y - ranY2);
if ( D.dot( vP2 ) > 0.0 )
hit = false;
Add a method isHit to the class Line, which checks if an input position (x, y) is on the line. The acceptable accuracy to identify a click on the line can be set by hit_dist. Decrease this vaule if the line has to be hit exactly. Increase it to allow hit beside but near the line, too. Add an color attribute col and a method which can change the color:
class Line {
// [...]
color col;
// [...]
void setColor(color c) {
col = c;
}
boolean isHit(int x, int y) {
final int hit_dist = 5;
// [...]
return hit;
}
}
Use the mouse pressed event mousePressed() to travers all the lines in a loop. Change the color of each line is 2hit" by the mouse when the mouse is pressed:
void mousePressed() {
for (int i = 0; i < l.size(); ++i) {
if (l.get(i).isHit(mouseX, mouseY)) {
l.get(i).setColor(color(255, 0, 0) );
}
}
}
See the example, which implements the algorithm and does some further improvements and bug fixes to your code:
int value = 0;
ArrayList<Line> l = new ArrayList<Line>();
void setup() {
size(500,500);
for (int i = 0; i < 20; ++i) {
l.add(new Line());
}
}
void draw() {
background(57, 76, 222);
strokeWeight(3);
for (int i = 0; i < l.size(); ++i) {
l.get(i).display();
}
}
void mousePressed() {
for (int i = 0; i < l.size(); ++i) {
if (l.get(i).isHit(mouseX, mouseY)) {
l.get(i).setColor(color(255, 0, 0) );
}
}
}
class Line {
int ranX1, ranX2, ranY1, ranY2;
color col;
Line() {
col = color(255);
ranX1 = int(random(50,450));
ranX2 = int(random(50,450));
ranY1 = int(random(50,450));
ranY2 = int(random(50,450));
}
void setColor(color c) {
col = c;
}
boolean isHit(int x, int y) {
final int hit_dist = 5;
PVector D = new PVector(ranX2 - ranX1, ranY2 - ranY1);
if ( D.mag() > 0.0 )
D.normalize();
PVector vP1 = new PVector(x - ranX1, y - ranY1);
if ( D.dot( vP1 ) < 0.0 )
return false;
PVector vP2 = new PVector(x - ranX2, y - ranY2);
if ( D.dot( vP2 ) > 0.0 )
return false;
PVector X = new PVector(ranX1, ranY1);
X.add( D.mult( D.dot( vP1 ) ) );
boolean hit = X.dist(new PVector(x, y)) < hit_dist;
return hit;
}
void display() {
stroke(col);
line(ranX1, ranY1, ranX2, ranY2);
}
}
I'm writing a Raytracer in Java, I've gotten to the point where I can create objects, rays, test for intersections and then colour pixels. I've also got some basic anti aliasing done. My problem is that if a create a sphere, which should be in the centre of the world (i.e 0.0, 0.0, 0.0) and then draw the image, I end up with a picture like this.
When the red circle should be in the middle of the image.
Main method
public static void main(String[] args) {
System.out.println("Rendering...");
long start = System.nanoTime();
// Setting up the size of the image to be rendered
world = new World(1920, 1080, 1.0);
image = new Image("image.png");
sampler = new SimpleSampler(4);
projector = new OrthographicProjector();
// Main loop of program, goes through each pixel in image and assigns a colour value
for (int y = 0; y < world.viewPlane.height; y++) {
for (int x = 0; x < world.viewPlane.width; x++) {
// Render pixel colour
trace(x, y);
}
}
image.saveImage("PNG");
long end = System.nanoTime();
System.out.print("Loop Time = " + ((end - start)/1000000000.0f));
}
Trace method
public static void trace(int x, int y) {
Colour colour = new Colour();
//int colour = RayTracer.world.backgroundColour.toInteger();
for (int col = 0; col < sampler.samples; col++) {
for (int row = 0; row < sampler.samples; row++) {
Point2D point = sampler.sample(row, col, x, y);
Ray ray = projector.createRay(point);
double min = Double.MAX_VALUE;
Colour tempColour = new Colour();
for (int i = 0; i < world.worldObjects.size(); i++) {
double temp = world.worldObjects.get(i).intersect(ray);
if (temp != 0 && temp < min) {
min = temp;
tempColour = world.worldObjects.get(i).colour;
}
}
colour.add(tempColour);
}
}
colour.divide(sampler.samples*sampler.samples);
image.buffer.setRGB(x, y, colour.toInteger());
}
World.java
public class World {
public ViewPlane viewPlane;
public ArrayList<Renderable> worldObjects;
public Colour backgroundColour;
public World(int width, int height, double size) {
viewPlane = new ViewPlane(width, height, size);
backgroundColour = new Colour(0.0f, 0.0f, 0.0f);
worldObjects = new ArrayList<Renderable>();
worldObjects.add(new Sphere(new Point3D(0.0, 0.0, 0.0), 50, new Colour(1.0f, 0.0f, 0.0f)));
//worldObjects.add(new Sphere(new Point3D(-150.0, 0.0, 0.0), 50, new Colour(1.0f, 0.0f, 0.0f)));
//worldObjects.add(new Sphere(new Point3D(0.0, -540.0, 0.0), 50, new Colour(0.0f, 1.0f, 0.0f)));
}
}
SimpleSampler.java
public class SimpleSampler extends Sampler {
public SimpleSampler(int samples) {
this.samples = samples;
}
public Point2D sample(int row, int col, int x, int y) {
Point2D point = new Point2D(
x - RayTracer.world.viewPlane.width / 2 + (col + 0.5) / samples,
y - RayTracer.world.viewPlane.width / 2 + (row + 0.5) / samples);
return point;
}
}
OrthographicProjector.java
public class OrthographicProjector extends Projector{
public Ray createRay(Point2D point) {
Ray ray = new Ray();
ray.origin = new Point3D(
RayTracer.world.viewPlane.size * point.x,
RayTracer.world.viewPlane.size * point.y,
100);
ray.direction = new Vector3D(0.0, 0.0, -1.0);
return ray;
}
}
I have a feeling that somewhere along the way I've mixed an x with a y and this has rotated the image, but I haven't been able to track down the problem. If you would like to see any more of my code I would be happy to show it.
In SimpleSampler.java:
Point2D point = new Point2D(
x - RayTracer.world.viewPlane.width / 2 + (col + 0.5) / samples,
y - RayTracer.world.viewPlane.width / 2 + (row + 0.5) / samples);
You use width for both coordinates. Maybe you should use width and height.
I'm having an issue with the animation I'm making. The principal idea is that 6 equilateral triangles revolve around a central point, while also rotating about their own selves.
When I run the code, each instance of a triangle uses the previous instance as a reference point, rather than the centre. This causes a cool spiral effect, but it's not what I'm after.
Code follows:
//Declare
tri myTri1;
tri myTri2;
tri myTri3;
tri myTri4;
tri myTri5;
tri myTri6;
void setup() {
size(600, 600);
smooth();
//Initialise
myTri1 = new tri();
myTri2 = new tri();
myTri3 = new tri();
myTri4 = new tri();
myTri5 = new tri();
myTri6 = new tri();
}
void draw() {
background(0);
//Call Functions
myTri1.run();
translate(width/2,height/2);
rotate(PI/3);
translate(-width/2,-height/2);
myTri2.run();
translate(width/2,height/2);
rotate(PI/3);
translate(-width/2,-height/2);
myTri3.run();
translate(width/2,height/2);
rotate(PI/3);
translate(-width/2,-height/2);
myTri4.run();
translate(width/2,height/2);
rotate(PI/3);
translate(-width/2,-height/2);
myTri5.run();
translate(width/2,height/2);
rotate(PI/3);
translate(-width/2,-height/2);
myTri6.run();
}
Second tab:
class tri {
//Variables
float ax, ay, bx, by, cx, cy; //triangle point coordinates
float theta; //triangle angle
float pi = PI; //pi reference
//Construct
tri() {
theta = PI/6;
ax = 0;
ay = 0;
bx = -50*(sin(theta));
by = +50*(cos(theta));
cx = +50*(sin(theta));
cy = +50*(cos(theta));
}
//Functions
void run() {
translate(width/2, height/2);
revolve(); //revolve triangle about centre
spin(); //spin triangle about itself
pulse(); //move triangle in/out
display(); //show triangle
translate(-width/2, -height/2);
}
void spin() {
translate(0, by/2); //sets rotation axis to centre of triangle
rotate(millis()*-0.0005*pi);
translate(0, -by/2); //resets axis to centre of window
}
void revolve() {
translate(-2*by, 0);
ax = ax + 2*sin(millis()*0.005);
ay = ay + 4*cos(millis()*0.005);
bx = bx + 2*sin(millis()*0.005);
by = by + 4*cos(millis()*0.005);
cx = cx + 2*sin(millis()*0.005);
cy = cy + 4*cos(millis()*0.005);
translate(2*by, 0);
}
void pulse() {
ay = ay + 5*sin(millis()*0.005);
by = by + 5*sin(millis()*0.005);
cy = cy + 5*sin(millis()*0.005);
}
void display() {
fill(255);
strokeWeight(0.8);
triangle(ax, ay, bx, by, cx, cy);
}
}
If anyone can point out where I'm going wrong with this it would be awesome, and if you can suggest any optimisations RE the formation of the hexagon (instead of the mess of translations) I would be incredibly happy.
Franchesca's suggestion good. You should have an idea of where the origin is and how the coordinate space transformations you apply affect that, at least until you get a feel for it and you're in complete control.
I also warmly recommend this Processing tutorial on 2d transformations
Now, back to your code :)
First thing you can improve is getting used to for loops and arrays.
They may look scary at first, but once you get the hang of them they're quite easy.
Wherever you can think of a situation where repetition is needed, you can use a for loop to make your life easier.
In your case, generating the triangles and storing them can be done using loops and arrays.
For loop have the following syntax:
for keyword (3 elements: a start point,an end point(condition) and an increment,(separated by the ; character)
Let's say you want to move from a(0) to b(10) one step at a time:
for(int currentPos = 0 ; currentPos < 10; currentPos++){
println("step: " + currentPos);
}
If you can walk, you can also skip :)
for(int currentPos = 0 ; currentPos < 10; currentPos+=2){
println("step: " + currentPos);
}
even backwards if you want:
for(int currentPos = 10 ; currentPos > 0; currentPos--){
println("step: " + currentPos);
}
This is very useful when traversing all sort of data(triangles in a scene, vertices in a triangle, etc.)
How do you organize your data ? You place it in a list or array.
An array contains elements of the same type and has a set length.
The syntax to declare an array is like so:
ObjectType[] nameOfArray;
and you can initialize an empty array:
int[] fiveNumbers = new int[5];//new keyword then the data type and length in sq.brackets
or you can initialize the array with values:
String[] words = {"ini","mini","miny","moe"};
You access elements in an array using square brackets and the index of the object in the list you want to access. Arrays have a length property so you can easily count objects.
background(255);
String[] words = {"ini","mini","miny","moe"};
for(int i = 0 ; i < words.length; i++){
fill(map(i,0,words.length, 0,255));
text(words[i],10,10*(i+1));
}
Now back to your original question.
Here is your main code simplified using for loops and arrays:
//Declare
int numTri = 6;//number of triangles
tri[] triangles = new tri[numTri];//a list/an array of tri objects (currently empty)
float angleIncrement = TWO_PI/numTri;
float radius = 100;
void setup() {
size(600, 600);
smooth();
//Initialise
for(int i = 0 ; i < numTri; i++){
triangles[i] = new tri();//allocate/initialise each tri object into it's 'slot' in the list/array
}
}
void draw() {
background(0);
translate(width * .5, height * .5);//move everything to the centre
for(int i = 0 ; i < numTri; i++){
pushMatrix();
rotate(angleIncrement * i);//rotate from the last offset(centre)
translate(radius,0);//move on (rotated) X axis away from the centre
triangles[i].run();
popMatrix();
}
}
void drawAxes(int size){
pushStyle();
stroke(255,0,0);
line(0,0,size,0);
stroke(0,255,0);
line(0,0,0,size);
popStyle();
}
Notice I've indented the code within push/pop matrix calls.
It's not necessary but I've added that so you can get a feel for how coordinate spaces nest.
These call are very useful as they deal with the nitty gritty math part behind the scenes for you. Notice how I'm placing the symbols in a circle without using the polar to cartesian conversion formula (cos(angle) * radius, sin(angle) * radius).
You can test that with this code from your other tab:
class tri {
//Variables
float ax, ay, bx, by, cx, cy; //triangle point coordinates
float theta; //triangle angle
float pi = PI; //pi reference
//Construct
tri() {
theta = PI/6;
ax = 0;
ay = 0;
bx = -50*(sin(theta));
by = +50*(cos(theta));
cx = +50*(sin(theta));
cy = +50*(cos(theta));
}
//Functions
void run() {
pushMatrix();
revolve(); //revolve triangle about centre
// pulse(); //move triangle in/out
display(); //show triangle
popMatrix();
}
void revolve() {
translate(-2*by, 0);
float angle = millis()*0.005;
float cos = cos(angle);
float sin = sin(angle);
ax = ax + 2*sin;
ay = ay + 4*cos;
bx = bx + 2*sin;
by = by + 4*cos;
cx = cx + 2*sin;
cy = cy + 4*cos;
translate(2*by, 0);
}
void pulse() {
ay = ay + 5*sin(millis()*0.005);
by = by + 5*sin(millis()*0.005);
cy = cy + 5*sin(millis()*0.005);
}
void display() {
fill(255);
strokeWeight(0.8);
triangle(ax, ay, bx, by, cx, cy);
}
}
Also notice I've added a drawAxes function. That's just a utility to make it easier to understand in what coordinate space your drawing.
Again, going back to arrays and for loops, here's a modified version of your code:
class tri {
//Variables
float ai = TWO_PI/3;//angle increment
float r = 50;
float sr = r * 1.5;//spin radius
float vt = 5;//vertical translation(for pulse)
PVector[] verts = new PVector[3];
boolean rotateAroundCentre = true;
boolean translateAroundCentre = false;
boolean translateVertically = false;
//Construct
tri() {
for(int i = 0 ; i < 3; i++){
verts[i] = new PVector(cos(ai * i) * r,sin(ai * i) * r);
}
}
//Functions
void run() {
pushMatrix();
float angle = millis()*0.0005;
if(rotateAroundCentre) rotate(angle);
if(translateVertically) translate(sin(angle)*vt,0);
if(translateAroundCentre){
// translate(cos(angle) * sr,sin(angle) * r);
// or
rotate(angle);
translate(sr,0);
}
display(); //show triangle
popMatrix();
}
void display() {
fill(255);
strokeWeight(0.8);
triangle(verts[0].x, verts[0].y, verts[1].x, verts[1].y, verts[2].x, verts[2].y);
drawAxes(10);
}
}
Feel free to play with the boolean rotateAroundCentre,translateAroundCentre,translateVertically variables and have fun playing with coordinates and geometry :)
For example here's a version of the sketch that you can toggle the 3 options above using the 1/2/3 keys on your keyboard:
//Declare
int numTri = 6;//number of triangles
tri[] triangles = new tri[numTri];//a list/an array of tri objects (currently empty)
float angleIncrement = TWO_PI/numTri;
float radius = 100;
boolean[] options = {false,false,false};
void setup() {
size(600, 600);
smooth();
//Initialise
for(int i = 0 ; i < numTri; i++){
triangles[i] = new tri();//allocate/initialise each tri object into it's 'slot' in the list/array
}
}
void draw() {
background(0);
translate(width * .5, height * .5);//move everything to the centre
for(int i = 0 ; i < numTri; i++){
pushMatrix();
rotate(angleIncrement * i);//rotate from the last offset(centre)
translate(radius,0);//move on (rotated) X axis away from the centre
drawAxes(20);
triangles[i].run();
popMatrix();
}
}
void drawAxes(int size){
pushStyle();
stroke(255,0,0);
line(0,0,size,0);
stroke(0,255,0);
line(0,0,0,size);
popStyle();
}
void keyReleased(){
for(int i = 0 ; i < 3; i++) if(key == (49+i)) options[i] = !options[i];//quick'n'dirty option toggling
for(int i = 0; i < numTri; i++) {
triangles[i].rotateAroundCentre = options[0];
triangles[i].translateAroundCentre = options[1];
triangles[i].translateVertically = options[2];
}
}
class tri {
//Variables
float ai = TWO_PI/3;//angle increment
float r = 50;
float sr = r * 1.5;//spin radius
float vt = 5;//vertical translation(for pulse)
PVector[] verts = new PVector[3];
boolean rotateAroundCentre = false;
boolean translateAroundCentre = false;
boolean translateVertically = false;
//Construct
tri() {
for(int i = 0 ; i < 3; i++){
verts[i] = new PVector(cos(ai * i) * r,sin(ai * i) * r);
}
}
//Functions
void run() {
pushMatrix();
float angle = millis()*0.0005;
if(rotateAroundCentre) rotate(angle);
drawAxes(30);
if(translateVertically) translate(sin(angle)*vt,0);
drawAxes(40);
if(translateAroundCentre){
// translate(cos(angle) * sr,sin(angle) * r);
// or
rotate(angle);
drawAxes(40);
translate(sr,0);
}
display(); //show triangle
popMatrix();
}
void display() {
fill(255);
strokeWeight(0.8);
triangle(verts[0].x, verts[0].y, verts[1].x, verts[1].y, verts[2].x, verts[2].y);
drawAxes(10);
}
}
I am lookin for an algorithmn to get the fastest way to find all points 2D (x,y) that are in a box (a box is defined by 2 points: lowerLeft and upperRight).
Imagine we have 2 million points in a 2D space.
In that 2D space I create a box somewhere from 2 points, one is lower left and the other is upper right.
What is the fastest way to get all the points that are in the box?
Here is the java test with the worst scenario: loop each point (2 millions!) and determine if it's inside the box.
I am sure we can get really faster if the list of points is ordered first...
Do you have ideas?
public class FindPointsInBox {
public static void main(String[] args) throws Exception {
// List of 2,000,000 points (x,y)
List<Point> allPoints = new ArrayList<Point>();
for(int i=0; i<2000000; i++) {
allPoints.add(new Point(46 - (Math.random()), -74 - (Math.random())));
}
// Box defined by 2 points: lowerLeft and upperRight
List<Point> pointsInBox = new ArrayList<Point>();
Point lowerLeft = new Point(44.91293325430085, -74.25107363281245);
Point upperRight = new Point(45.3289676752705, -72.93820742187495);
Date t1 = new Date();
// TODO: What is the fastest way to find all points contained in box
for(int i=0; i<allPoints.size(); i++) {
if(isPointInBox(allPoints.get(i), lowerLeft, upperRight))
pointsInBox.add(allPoints.get(i));
}
Date t2 = new Date();
System.out.println(pointsInBox.size() + " points in box");
System.out.println(t2.getTime()-t1.getTime() + "ms");
}
private static boolean isPointInBox(Point p, Point lowerLeft, Point upperRight) {
return (
p.getX() >= lowerLeft.getX() &&
p.getX() <= upperRight.getX() &&
p.getY() >= lowerLeft.getY() &&
p.getY() <= upperRight.getY());
}
}
Improving on Mikhails answer (I can't comment yet) you could utilise quadtrees http://en.wikipedia.org/wiki/Quadtree. This is what Mikhail is talking about, I think, and works by partitioning space into a grid. If there are many points in a partition it is itself partitioned into a small grid.
When selecting points one can then compare the extents of the partitions to quickly exclude several points if their containing rectangle does not intersect with your selection rectangle.
The quadtree requires O(n log n) operations for creation on average while a selecting a bunch of points requires O(log n).
Split your space into square cells. For each cell store list of points that sit in the cell. For given rectangle first find all cells that intersect with it, then iterate through points in these cells and test which of them are in the rectangle. Here is code demonstrating this approach:
public class PointsIndex {
private final int width;
private final int height;
private final int rows;
private final int cols;
private final List<Point> [][] cells;
#SuppressWarnings("unchecked")
public PointsIndex (
int width, int height, int rows, int cols)
{
this.width = width;
this.height = height;
this.rows = rows;
this.cols = cols;
cells = (List<Point> [][])new List<?> [rows][];
for (int i = 0; i < rows; i++)
cells [i] = (List<Point> [])new List<?> [cols];
}
public void addPoint (int x, int y)
{
int r = x * rows / width;
int c = y * cols / height;
List <Point> cell = cells [r][c];
if (cell == null)
{
cell = new ArrayList<Point>();
cells [r][c] = cell;
}
cell.add (new Point (x, y));
}
public Point [] getPoints (int x, int y, int w, int h)
{
int r1 = x * rows / width;
int r2 = (x + w - 1) * rows / width;
int c1 = y * cols / height;
int c2 = (y + h - 1) * cols / height;
ArrayList<Point> result = new ArrayList<Point>();
for (int r = r1; r <= r2; r++)
for (int c = c1; c <= c2; c++)
{
List <Point> cell = cells [r][c];
if (cell != null)
{
if (r == r1 || r == r2 || c == c1 || c == c2)
{
for (Point p: cell)
if (p.x > x && p.x < x + w && p.y > y && p.y < y + h)
result.add (p);
}
else result.addAll (cell);
}
}
return result.toArray(new Point [result.size()]);
}
public static void main(String[] args) {
Random r = new Random ();
PointsIndex index = new PointsIndex(1000000, 1000000, 100, 100);
List <Point> points = new ArrayList<Point>(1000000);
for (int i = 0; i < 1000000; i++)
{
int x = r.nextInt(1000000);
int y = r.nextInt(1000000);
index.addPoint(x, y);
points.add (new Point (x, y));
}
long t;
t = System.currentTimeMillis();
Point [] choosen1 = index.getPoints(456789, 345678, 12345, 23456);
System.out.println (
"Fast method found " + choosen1.length + " points in " +
(System.currentTimeMillis() - t) + " ms");
Rectangle rect = new Rectangle (456789, 345678, 12345, 23456);
List <Point> choosen2 = new ArrayList<Point>();
t = System.currentTimeMillis();
for (Point p: points)
{
if (rect.contains(p))
choosen2.add (p);
}
System.out.println(
"Slow method found " + choosen2.size () + " points in " +
(System.currentTimeMillis() - t) + " ms");
}
}
Your solution is linear, and you have no way to do better, because you have at least to read the input data.
I'm using Processing to divide a large image into a series of smaller, rectangular nodes.
Processing stores the color value for the pixels of a PImage in a pixels array, which I am accessing to break up the image into smaller parts. For some reason, I am getting this output, when my intent was for the entire image to be displayed when the nodes are arranged in draw().
Here is my main class:
ArrayList node = new ArrayList();
PImage grid;
PVector nodeDimensions = new PVector(210, 185);
PVector gridDimensions = new PVector(2549, 3300);
String name = "gridscan.jpeg";
void setup() {
size(500, 500);
grid = loadImage(name);
grid.loadPixels();
fillPixels();
noLoop();
}
void fillPixels() {
int nodeNum = 0;
for (int startX = 0; startX < 2549 - nodeDimensions.x; startX += nodeDimensions.x) {
for (int startY = 0; startY < 3300 - nodeDimensions.y; startY += nodeDimensions.y) {
node.add(new Node());
sendPixels(new PVector(startX, startY), nodeNum);
nodeNum++;
}
}
}
void sendPixels(PVector start, int nodeNum) {
for (int x = int(start.x); x < start.x + nodeDimensions.x; x++) {
for (int y = int(start.y); y < start.x + nodeDimensions.y; y++) {
Node _node = (Node) node.get(node.size() - 1);
_node.fillPixel(new PVector(x, y), grid.pixels[int(y*gridDimensions.x+x)]);
}
}
}
void draw() {
drawNodes();
}
void drawNodes() {
int nodeNum = 0;
for (int x = 0; x < width; x += nodeDimensions.x) {
for (int y = 0; y < height; y += nodeDimensions.y) {
Node _node = (Node) node.get(nodeNum);
_node.drawMe(new PVector(x - (nodeDimensions.x/2), y - (nodeDimensions.y/2)));
nodeNum++;
}
}
}
And here is the Node class:
class Node {
color[] pixel;
Node() {
pixel = new color[int(nodeDimensions.x * nodeDimensions.y)];
}
void fillPixel(PVector pos, color pixelValue) {
if(int(pos.y * nodeDimensions.y + pos.x) < 38850) pixel[int(pos.y * nodeDimensions.y + pos.x)] = pixelValue;
}
void drawMe(PVector centerPos) {
pushMatrix();
translate(centerPos.x, centerPos.y);
for(int x = 0; x < nodeDimensions.x; x++) {
for(int y = 0; y < nodeDimensions.y; y++) {
stroke(getPixelColor(new PVector(x, y)));
point(x,y);
}
}
popMatrix();
}
color getPixelColor(PVector pos) {
return pixel[int(pos.y * nodeDimensions.x + pos.x)];
}
}
Hopefully my code makes sense. I suspect the issue is in the sendPixels() method of the main class.
I used this this page from the Processing reference as a guide for creating that function, and I'm not sure where my logic is wrong.
Any help would be appreciated, and please let me know if I can clarify something.
According to getPixelColor(), it seems that it uses rows.
So if you have a 5x5 square image then 2x2 would be 7.
To get the index you use this formula:
index = (y - 1) * width + x
Explained this way it's look pretty simple, doesn't it?
Alternatively, you may be able to use getSubimage() on the BufferedImage returned by the getImage method of PImage. There's a related example here.