For this project we looked at the relationships with different Geometric shapes, we had to come up with a program which allowed the user to draw using geometric shapes, but we had to apply constraints to their ability to draw. So we decided that the user could only draw a 1 shape and place the same shape next to the other shape so that the link together as the image below shows.
As the image above shows you can see that the triangles connect along each edge of the other triangle. the user must click the edge that they want to place the next triangle, and they can only place the triangle along the edge of another triangle. We also looked at using different types of shapes or randomly generated shapes but this would have taken to long within the week that we had to produce the work. When working on this we thought of a few idea’s on paper but came to the conclusion that this was the one we would go ahead with so there wasn’t much iterative work to do in Processing I just wrote the application and tested the final product.
ArrayList shapeArray; boolean firstShape = true; NewTriangle lastClicked; float x; float y; void setup(){ size(1000,1000); shapeArray = new ArrayList(); } void draw(){}
void mouseReleased() { println(mouseX + ” ” + mouseY); if(firstShape == true){ shapeArray.add(new NewTriangle(mouseX,mouseY, true)); firstShape = false;
} else { if(checkTriArray(shapeArray, mouseX, mouseY) == 1){ println(“click region 1”); shapeArray.add(new NewTriangle(lastClicked.getC().getX() – 100, lastClicked.getC().getY() – 50, false));
} if(checkTriArray(shapeArray, mouseX, mouseY) == 2){ println(“click region 2”); shapeArray.add(new NewTriangle(lastClicked.getC().getX() – 200, lastClicked.getC().getY() + 100, false)); } if(checkTriArray(shapeArray, mouseX, mouseY) == 3){ println(“click region 3”); shapeArray.add(new NewTriangle(lastClicked.getC().getX(), lastClicked.getC().getY() + 100, false)); } if(checkTriArray(shapeArray, mouseX, mouseY) == 4){ println(“click region 4”); shapeArray.add(new NewTriangle(lastClicked.getC().getX(), lastClicked.getC().getY() + 100, false)); } if(checkTriArray(shapeArray, mouseX, mouseY) == 5){ println(“click region 5”); shapeArray.add(new NewTriangle(lastClicked.getC().getX() – 100, lastClicked.getC().getY() – 50, true)); } if(checkTriArray(shapeArray, mouseX, mouseY) == 6){ println(“click region 6″); shapeArray.add(new NewTriangle(lastClicked.getC().getX(), lastClicked.getC().getY() – 200, true)); } } } int checkTriArray(ArrayList array, float x, float y){ int test = 0; for(int i = 0; i < array.size(); i++){ NewTriangle t = array.get(i); println(t.toString()); //println(t.getX() + ” ” + t.getY()); //println(t.getC().toString()); this.x = x; this.y = y; if(t.getT() == true){ if(isInside(t.getX(), t.getY(), t.getX() + 200, t.getY(), t.getC().getX(), t.getC().getY(), this.x, this.y)){ test = 1; lastClicked = t; } if(isInside(t.getX(), t.getY(), t.getC().getX(), t.getC().getY(), t.getX() + 100, t.getY() + 150, this.x, this.y)) { test = 2; lastClicked = t; } if(isInside( t.getC().getX(), t.getC().getY(), t.getX() + 100, t.getY() + 150, t.getX() + 200, t.getY(), this.x, this.y)) { test = 3; lastClicked = t; } } else { if(isInside(t.getX(), t.getY(), t.getX() + 200, t.getY(), t.getC().getX(), t.getC().getY(), this.x, this.y)){ test = 4; lastClicked = t; } if(isInside(t.getX(), t.getY(), t.getC().getX(), t.getC().getY(), t.getX() + 100, t.getY() – 150, this.x, this.y)) { test = 5; lastClicked = t; } if(isInside( t.getC().getX(), t.getC().getY(), t.getX() + 100, t.getY() – 150, t.getX() + 200, t.getY(), this.x, this.y)) { test = 6; lastClicked = t; } } } return test; } Coordinate findCentroid(float x1, float x2, float x3, float y1, float y2, float y3){ Coordinate c = new Coordinate(); c.setX((int)(x1+x2+x3)/3); c.setY((int)(y1+y2+y3)/3); return c; } Boolean isInside(float x1, float y1, float x2, float y2, float x3, float y3, float x, float y) { float A = area(x1, y1, x2, y2, x3, y3); float A1 = area (x, y, x2, y2, x3, y3); float A2 = area (x1, y1, x, y, x3, y3); float A3 = area (x1, y1, x2, y2, x, y); return (A == A1 + A2 + A3); } float area(float x1, float y1, float x2, float y2, float x3, float y3) { return abs((x1*(y2-y3) + x2*(y3-y1)+ x3*(y1-y2))/2.0); }
class NewTriangle { float x, y; PShape shape; boolean t; Coordinate centroid = new Coordinate();
NewTriangle(float x, float y, boolean t) { this.x = x; this.y = y; this.t = t; centroid = findCentroid(this.x, this.x + 200, this.x + 100, this.y, this.y, this.y + 150); println(centroid.toString()); centroid.setX((int)centroid.getX()); centroid.setY((int)centroid.getY()); shape = generateShape(this.t); shape(shape, x, y); } PShape generateShape(boolean triangle){ PShape localShape; if(triangle == true){ localShape = createShape(); localShape.beginShape(); localShape.vertex(0,0); localShape.vertex(200,0); localShape.vertex(100,150); localShape.endShape(CLOSE); localShape.setFill(color(0,0,random(0,255))); localShape.setStroke(false); } else { localShape = createShape(); localShape.beginShape(); localShape.vertex(0,0); localShape.vertex(200,0); localShape.vertex(100,-150); localShape.endShape(CLOSE); localShape.setFill(color(0,0,random(0,255))); localShape.setStroke(false); }
return localShape; } float getX(){ return x; } float getY() { return y; } boolean getT() { return t; } Coordinate getC(){ return centroid; } String toString(){ return “x: ” + x + ” y: ” + y + ” Centroid x: ” + centroid.getX() + ” y: ” + centroid.getY(); } } class Coordinate { int x; int y;
int getX(){ return x; } int getY(){ return y; } void setX(int x){ this.x = x; } void setY(int y){ this.y = y; } String toString(){ return “x: ” + x + ” y: ” + y; } }
This is also the code that I had to write to build a detection system that allowed the user to click a particular shape. I then had to check where the mouse was within the triangle to work out which side to generate the next triangle based upon the location of the mouse within the triangle. This was interesting from a coding perspective as the application Processing is away of reducing the amount of code required but it doesn’t have any framework for clicking on shapes or detecting specific regions in a shape. I had to code this myself.
The two images below are a visual representation on how the code works for detecting the mouse click within a triangle:
The link below is a video of the final program working: