please format code with </> button * homework policy * asking questions
Please if anyone can help me, i only know how to draw a triangle using
triangle(x1, y1, x2, y2, x3, y3);
how would one draw a triangle using angle (for example an isosceles triangle with an angle between the two equal sides and that point is also at a specific angle?)
i cannot figure this out because i have to give this shape a colour otherwise i wouldve used lines to draw this .
i have to give this shape a colour
I can’t help you with the angles, but I want to make certain that you know that triangle() using 3 points creates a filled shape. For example this gives a black filled triangle.
size(400, 400);
fill(0);
triangle(120, 300, 232, 80, 344, 300);
thank you, but i really needed to find out how to draw a triangle with given angles
i’m not sure i follow what you mean do you just want this?
*i haven’t used embed for a while so i can’t remember if it shows the code so here’s a link to the sketch
if you just mean you want equilateral shapes from angles you can do something like
*again i can’t remember if it shows the code so here’s a link to the sketch
edit: also triangle() will do all of this for you so really there isn’t a reason to do it… maybe this is homework? idk it is what it is.
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
Hi @Tay ,
Can you give an example of the parameters you would give to the drawing function you want to make?
Do you want to give an initial point and 3 angles corresponding to the inside angles between the edges of the triangle?
Like:
triangleWithAngles(new PVector(50, 50), PI / 3, PI / 5, PI);
This doesn’t work because you need the sum of those angles to be exactly 180 degrees so as soon as you choose the first two, you can infer the last one.
Also do you want to give the length of the edges? There’s the same issue because the length of the edges might not close the triangle if you gave the wrong angles. (an isosceles triangle has two edges of the same length for example)
Just for fun I made a little tool to visualize that, feel free to test it and look at the code 
// https://discourse.processing.org/t/triangle-using-angles/32994
// Joseph HENRY
import java.util.Map;
final float angleDisplayRadius = 25;
final float arrowHeadAngle = PI / 5;
final float arrowSize = 10;
boolean mouseDragged = false;
void triangleWithAngles(PVector origin, float a, float b, float c, float ab, float bc, float ca) {
float[] angles = {a, b, c};
float[] edges = {ab, bc, ca};
pushMatrix();
translate(origin.x, origin.y);
beginShape();
vertex(0, 0);
float x = 0;
float y = 0;
float angle = 0;
for (int i = 0; i < 3; i++) {
float nextAngle = angle + (PI - angles[i]);
float textAngle = angle - angles[i] / 2.0;
fill(0);
textAlign(CENTER, CENTER);
textSize(15);
text(char(65 + i), x + cos(textAngle) * 15, y + sin(textAngle) * 15);
noFill();
stroke(#7FCBA1);
strokeWeight(2);
arc(x, y, angleDisplayRadius * 2, angleDisplayRadius * 2, nextAngle, angle + PI);
float angleTextRadius = angleDisplayRadius + 20;
fill(#7FCBA1);
text(round(degrees(angles[i])) + "°", x + cos(textAngle - PI) * angleTextRadius, y + sin(textAngle - PI) * angleTextRadius);
float cosAngle = cos(nextAngle);
float sinAngle = sin(nextAngle);
float arrowX = x + cosAngle * angleDisplayRadius;
float arrowY = y + sinAngle * angleDisplayRadius;
float baseArrowAngle = nextAngle + HALF_PI;
line(arrowX,
arrowY,
arrowX + cos(baseArrowAngle - arrowHeadAngle) * arrowSize,
arrowY + sin(baseArrowAngle - arrowHeadAngle) * arrowSize);
line(arrowX,
arrowY,
arrowX + cos(baseArrowAngle + arrowHeadAngle) * arrowSize,
arrowY + sin(baseArrowAngle + arrowHeadAngle) * arrowSize);
x += cosAngle * edges[i];
y += sinAngle * edges[i];
angle = nextAngle;
vertex(x, y);
stroke(0);
}
noFill();
strokeWeight(2);
endShape();
popMatrix();
}
class Slider {
static final float HANDLE_DIAMETER = 24;
PVector origin;
float w, min, max;
float value = 0;
boolean degree;
boolean dragged = false;
color highlightColor;
Slider(PVector origin, float w, float min, float max, float defaultValue, boolean degree, color highlightColor) {
this.origin = origin;
this.w = w;
this.min = min;
this.max = max;
this.value = defaultValue;
this.degree = degree;
this.highlightColor = highlightColor;
}
void display(String label, boolean mouseDragged) {
if (dragged) {
value = map(constrain(mouseX, origin.x, origin.x + w), origin.x, origin.x + w, min, max);
}
pushMatrix();
translate(origin.x, origin.y);
stroke(#AFAFAF);
strokeWeight(8);
strokeCap(ROUND);
line(0, 0, w, 0);
noStroke();
float handleX = map(value, min, max, 0, w);
float handleDiam = HANDLE_DIAMETER;
if (mousePressed && mouseDragged && isMouseInsideHandle(handleX)) dragged = true;
if (dragged || isMouseInsideHandle(handleX)) {
fill(highlightColor);
if (dragged) {
handleDiam += 5;
}
} else {
fill(#898989);
}
circle(handleX, 0, handleDiam);
textAlign(CENTER, BOTTOM);
String formattedValue = str(round(value));
if (degree) formattedValue = round(degrees(value)) + "°";
text(formattedValue, handleX, -16);
textAlign(LEFT, CENTER);
fill(#AFAFAF);
text(label, w + 20, -2);
popMatrix();
}
boolean isMouseInsideHandle(float handleX) {
return dist(mouseX, mouseY, origin.x + handleX, origin.y) < HANDLE_DIAMETER / 1.5;
}
void releaseMouse() {
dragged = false;
}
}
Map<String, Slider> sliders;
void setup() {
size(800, 500);
sliders = new HashMap();
String[] sliderAngles = {"angleA", "angleB", "angleC"};
for (int i = 0; i < 3; i++) {
sliders.put(sliderAngles[i], new Slider(new PVector(30, 50 + i * 50), 150, 0, TWO_PI, PI / 3, true, color(#7FCBA1)));
}
String[] edgeLengths = {"AB", "BC", "CA"};
for (int i = 0; i < 3; i++) {
sliders.put(edgeLengths[i], new Slider(new PVector(30, 250 + i * 50), 150, 0, 500, 200, false, color(#8CC2C9)));
}
}
void draw() {
background(255);
if (mousePressed == false) {
mouseDragged = false;
}
triangleWithAngles(new PVector(600, 150),
sliders.get("angleA").value,
sliders.get("angleB").value,
sliders.get("angleC").value,
sliders.get("AB").value,
sliders.get("BC").value,
sliders.get("CA").value);
for (Map.Entry<String, Slider> entry : sliders.entrySet()) {
entry.getValue().display(entry.getKey(), mouseDragged);
}
}
void mouseDragged() {
mouseDragged = true;
}
void mouseReleased() {
for (Map.Entry<String, Slider> entry : sliders.entrySet()) {
entry.getValue().releaseMouse();
}
}
thank you!! this is amazing!!! i needed those angles inside how to draw like that, thank you so much!
Look at arc to draw a circle part symbolizing the inner angle
It would help
What exactly do you want to achieve?
Turtle draws Triangle
here is a simple example based on TURTLE technology
(see Turtle graphics - Wikipedia)
which uses an INNER angle of an triangle.
The sum of INNER angles of a triangle is 180 degree.
Here we have 40 + 40 + 100 degree.
(isosceles triangle with 2 sides that are of same length)
Warm regards,
Chrisir
// Triangle
// with Turtle commands
final color GREEN = color (0, 255, 0);
// Triangle
int lineSeg=140; //length of line segment (for the two sides of equal length)
int angleAlpha=40; // two angles on base line
// Turtle properties
boolean penUp = false; // penup false means drawing
color colorTurtle = color(255, 0, 0); // stroke color
//--------------------------------------------------------------------------
void setup() {
size(500, 500);
background(#FFFFFF);
}//func
void draw () {
background(#FFFFFF);
// help text
fill(0);
text("Triangle\n", 17, 17); // optional
// bring Turtle to start position
translate(width/2, height/2);
rotate (-HALF_PI); // optional
// Turtle commands
tRight(30); // initial angle (optional)
drawTriangle();
// show Turtle
drawTurtle(); // optional
}//func
// -----------------------------------------------------------------------
void drawTriangle() {
// Triangle
// with Turtle commands
// first line of Triangle: (base line); it's like this: /
// calc length
float lengthBaseline = 2*lineSeg*cos(radians(angleAlpha)); // cf. https://www.redcrab-software.com/en/Calculator/Isosceles-Triangle
tLine(lengthBaseline); // draw line
// 2nd line of Triangle \
tMakeInnerAngleOfTriangleRight(angleAlpha); // rotate turtle in a way that the triangle has an inner angle of "angleAlpha"
drawTurtle(); // optional
tLine(lineSeg);
drawTurtle(); // optional
// 3rd line of Triangle /
tMakeInnerAngleOfTriangleRight(100); // top angle
tLine(lineSeg);
tMakeInnerAngleOfTriangleRight(angleAlpha); // back on base line
}
// -----------------------------------------------------------------------
// Input functions
void keyPressed() {
//
}//func
// -----------------------------------------------------------------------
// Other functions
void tMakeInnerAngleOfTriangleRight( float a ) {
tRight( 180 );
tRight( - a );
}
// ------------------------------------------------------------------------------
// Show the Turtle itself functions
void drawTurtle() {
// show the Turtle itself as a triangle
noFill();
stroke(GREEN);
strokeWeight(2);
ellipse(-2, 0, 2, 2);
line(0, -5, 7, 0);
line(0, 5, 7, 0);
//reset
strokeWeight(1);
stroke(colorTurtle);
}//func
void showTurtleItselfOLD() {
noFill();
stroke(GREEN);
strokeWeight(2);
ellipse(0, 0, 8, 8);
strokeWeight(1);//reset
}
// ------------------------------------------------------------------------------
// Turtle functions - public
void tLine(float x) {
// Depending on penUp
// we move or draw
if (penUp) {
tStep(x); // move only
} else {
tLineDraw(x); // draw and move
}
}
void tRight( float a ) {
rotate(radians(a));
}
void tLeft( float a ) {
rotate(-radians(a));
}
void tPenUp() {
penUp = true;
}
void tPenDown() {
penUp = false;
}
// ------------------------------------------------------------------------------
// Turtle functions - private
void tLineDraw(float x) {
// draw and move (pen is down, penUp=false)
stroke(colorTurtle);
line(0, 0,
x, 0);
translate(x, 0);
}
void tStep(float x) {
// just move (if pen is up, penUp=true)
translate(x, 0);
}
// --------------------------------------------------------------------------
deserves love just for the use of turtle 