Three examples
First example
similar code as above:
// Equilateral Vertices (v1.01) * GoToLoop (2015-Jan-13)
void setup() {
size(400, 400);
}
void draw() {
background(88); // gray
strokeWeight(2); // little thicker lines
stroke(0); // black
fill(255, 255, 15); // yellow
// simple big triangle
triangleSimple( width/2, height/2,
width * 0.4, height * 0.73);
// red line
stroke(#FF0000); // red
line(0, height/2,
width, height/2);
}
// ---------------------------------------------
void triangleSimple(
float x, float y,
float w, float h) {
// equilateral triangle (actually w and h should have the same value?)
// 2 parallel arrays we fill the x and the y for our 3 corners in:
float[] xArray = new float[3];
float[] yArray = new float[3];
// start angle
float currentAngle = -HALF_PI; // this tells the angle (start angle)
// when you want to rotate (e.g.) the triangle, please make
// currentAngle a parameter and give it different values.
// See example function below.
// go from diameter to radius (r is for radius)
float wr = w * 0.5;
float hr = h * 0.5;
//This is the formula for a circle.
//Since the triangle is equilateral, all
//corners have the same distance from the
//center x,y.
//Thus all 3 corners lie on a circle.
//Thus we can use cos and sin to calculate the corners as
//part of an invisible circle (cos and sin are normally used to
//calculate the circle).
// 3 corners make the arrays:
for (int i = 0; i < 3; i++) {
//This is the formula for a circle.
xArray[i] = x + wr*cos(currentAngle);
yArray[i] = y + hr*sin(currentAngle);
// the angle for the next corner is 1/3 of a full circle (360 degrees)
// away, so we add 1/3 of 360 degree.
currentAngle = currentAngle + radians (360 / 3);
}//for
// we use our 2 parallel arrays we filled the x and the y for our 3 corners in
// to draw a triangle:
triangle(xArray[0], yArray[0],
xArray[1], yArray[1],
xArray[2], yArray[2]);
} // func
//
Second example
this comes with the mouse
// new 5
// triangle from two points - NEW
// https : // discourse.processing.org/t/can-someone-good-with-trigonometry-help-me-out-with-a-small-sketch/9127
// Demonstrator for getting a point C orthogonal
// to the center of a line between points A and B.
// Thanks to amnon.
final color BLACK = color(0);
final color WHITE = color(255);
final color RED = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color BLUE = color(0, 0, 255);
final float radiusTriangle1 = 220; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
float angle; // = 1.3;
// for the triangle
PVector centerPV; // center RED
PVector pointingTowardsMousePV; // pointing towards mouse - Green
PVector thirdCornerPV; // BLUE
// for the mouse
PVector mousePV;
void setup() {
size(600, 600);
background(WHITE);
// point centerPV
centerPV = new PVector(width/2, height/2);
mousePV = new PVector();
pointingTowardsMousePV = new PVector();
}// setup()
void draw() {
background(WHITE);
// get angle (in radians) from centerPV to mouse
mousePV.set (mouseX, mouseY);
angle=angleBetweenPV_PV( centerPV, mousePV );
fill(0);
text(degrees(angle) + " degrees from center (RED) to mouse (GREEN).",
18, 18);
// calc 2nd corner
//pointingTowardsMousePV.set(
// cos(angle)*radiusTriangle1+centerPV.x,
// sin(angle)*radiusTriangle1+centerPV.y);
// almost the same as (but fixed length)
pointingTowardsMousePV.set(mouseX, mouseY);
// calc 3rd corner (Blue)
// the core: get side point C (100 is the height above the base line)
thirdCornerPV = getSidePoint(centerPV, pointingTowardsMousePV, 100); // -100 would make the triangle go to the other side
// draw triangle
trianglePV(centerPV, pointingTowardsMousePV, thirdCornerPV);
// highlight its corners
ellipsePV(centerPV, RED);
ellipsePV(pointingTowardsMousePV, GREEN);
ellipsePV(thirdCornerPV, BLUE);
//
} // draw()
// ----------------------------------------------------------------
float angleBetweenPV_PV(PVector a, PVector mousePV) {
// calc angle
// https : // forum.processing.org/two/discussion/10474/find-angle-between-2-points
PVector d = new PVector();
// calc angle
pushMatrix();
translate(a.x, a.y);
// delta
d.x = mousePV.x - a.x;
d.y = mousePV.y - a.y;
// angle
float angle1 = atan2(d.y, d.x);
popMatrix();
return angle1;
}
void trianglePV(PVector pv1, PVector pv2, PVector pv3) {
fill(144); // gray
stroke(BLACK);
triangle( pv1.x, pv1.y,
pv2.x, pv2.y,
pv3.x, pv3.y );
}
void ellipsePV(PVector pv, color col) {
fill(col);
ellipse(pv.x, pv.y, 10, 10);
}
PVector getSidePoint(PVector A, PVector B,
int distFromLine) {
// the core function of the demonstrator
// thanks to amnon
// difference between A & B
PVector difference = PVector.sub(B, A);
difference.normalize();
difference.mult(distFromLine);
PVector sidePoint = new PVector(-difference.y, difference.x);
// center between A & B
PVector center = getCenter(A, B);
// from relative pos to absolute pos
sidePoint.add(center);
return sidePoint;
}
// ---------------------------------------------------
// help functions
void connectedPoints(PVector A, PVector B, color myColorStroke) {
// show 2 points A and B and connect them
stroke(myColorStroke);
line(A.x, A.y, B.x, B.y);
ellipse(A.x, A.y, 10, 10);
ellipse(B.x, B.y, 10, 10);
}
PVector getCenter(PVector A, PVector B) {
// returns center point
return PVector.lerp(A, B, 0.5); // 0.5 defines center
}
Third example
here the angle at the blue point (the 2nd point, named xArray[1], yArray[1]) is set (from 0 to 360 degrees).
Since the next (3rd) point is calculated with cos and sin with a fixed radius, the triangle is defined.
// * parts by GoToLoop (2015-Jan-13)
int angle_i;
void setup() {
size(1400, 800);
}
void draw() {
background(88); // gray
strokeWeight(2); // little thicker lines
// red line
stroke(#FF0000); // red
line(0, height/2,
width, height/2);
stroke(0); // black
// simple big triangle
triangleSimple( width/2, height/2,
width * 0.4, height * 0.73);
}
// ---------------------------------------------
void triangleSimple(
float x, float y,
float w, float h) {
// equilateral triangle (actually w and h should have the same value?)
// 2 parallel arrays we fill the x and the y for our 3 corners in:
float[] xArray = new float[3];
float[] yArray = new float[3];
// start angle
float currentAngle = radians(angle_i); // this tells the angle
fill(0);
text(angle_i, 19, 19);
angle_i++;
angle_i=angle_i % 360;
// go from diameter to radius (r is for radius)
float wr = w * 0.5;
float hr = h * 0.5;
xArray[0] = x;
yArray[0] = y;
xArray[1] = xArray[0] + 200;
yArray[1] = yArray[0];
xArray[2] = xArray[1] + wr*cos(currentAngle);
yArray[2] = yArray[1] + hr*sin(currentAngle);
//------
// we use our 2 parallel arrays (we filled the x and the y in) for our 3 corners
// to draw a triangle:
fill(255, 255, 15); // yellow
triangle(xArray[0], yArray[0],
xArray[1], yArray[1],
xArray[2], yArray[2]);
// blue point
fill(0, 0, 255);
ellipse(xArray[1], yArray[1], 17, 17);
} // func
//
Warm regards,
Chrisir