# Triangle thingy

This is a triangle thingy, that’s what the file is called so I’m going with that name, i made it a couple months ago, pretty simple but i think it turned out great, click the coloured circles to move the triangle

``````float x1 = 250; float y1 = 100;  float x2 = 100; float y2 = 400;  float x3 = 400; float y3 = 400;
float pointSize = 30;
color c1 = #FF0000;  color c2 = #00FF00;  color c3 = #0000FF;
float a;  float b;  float c;
float a1;  float a2;  float a3;
float s;  float area;
void setup(){
size(500,500);
textSize(20);
}

void draw(){

background(200);

//lines
line(x1,y1,x2,y2);
line(x2,y2,x3,y3);
line(x3,y3,x1,y1);

//points
fill(c1); ellipse(x1,y1,pointSize,pointSize);
fill(c2); ellipse(x2,y2,pointSize,pointSize);
fill(c3); ellipse(x3,y3,pointSize,pointSize);

//find lengths of sides
a = (sqrt(sq(x2-x1) + sq(y2-y1))); //R-G
b = (sqrt(sq(x3-x2) + sq(y3-y2))); //G-B
c = (sqrt(sq(x1-x3) + sq(y1-y3))); //B-R

//find angles
a1 = degrees(acos((b * b + c * c - a * a) / (2 * b * c)));
a2 = degrees(acos((c * c + a * a - b * b) / (2 * c * a)));
a3 = degrees(acos((a * a + b * b - c * c) / (2 * a * b)));

//Area
s = (a+b+c)/2;
area = sqrt(s * (s-a) * (s-b) * (s-c));

//text
fill(255,0,0); text(str(int(x1))+","+str(int(y1))+"   "+str(a1)+"°",10,20);
fill(0,255,0); text(str(int(x2))+","+str(int(y2))+"   "+str(a2)+"°",10,40);
fill(0,0,255); text(str(int(x3))+","+str(int(y3))+"   "+str(a3)+"°",10,60);
fill(0); text("Area:"+area,10,80);
}

void mousePressed(){

//change the colour of the points as they're dragged

if (mouseX >= x1-(pointSize/2) & mouseX <= x1+(pointSize/2) & mouseY >= y1-(pointSize/2) & mouseY <= y1+(pointSize/2)){c1 = #C80000;}

if (mouseX >= x2-(pointSize/2) & mouseX <= x2+(pointSize/2) & mouseY >= y2-(pointSize/2) & mouseY <= y2+(pointSize/2)){c2 = #00C800;}

if (mouseX >= x3-(pointSize/2) & mouseX <= x3+(pointSize/2) & mouseY >= y3-(pointSize/2) & mouseY <= y3+(pointSize/2)){c3 = #0000C8;}
}

void mouseDragged(){

//Move the points

if (mouseX >= x1-(pointSize/2) & mouseX <= x1+(pointSize/2) & mouseY >= y1-(pointSize/2) & mouseY <= y1+(pointSize/2)){
x1 = mouseX;
y1 = mouseY;}

else if (mouseX >= x2-(pointSize/2) & mouseX <= x2+(pointSize/2) & mouseY >= y2-(pointSize/2) & mouseY <= y2+(pointSize/2)){
x2 = mouseX;
y2 = mouseY;}

else if (mouseX >= x3-(pointSize/2) & mouseX <= x3+(pointSize/2) & mouseY >= y3-(pointSize/2) & mouseY <= y3+(pointSize/2)){
x3 = mouseX;
y3 = mouseY;}
}

void mouseReleased(){
//change them to their original colour when released
c1 = #FF0000; c2 = #00FF00; c3 = #0000FF;
}
``````
6 Likes

Nice demo; thanks for the inspiration. Here’s something similar with bezier curves:

``````PVector[] pt = new PVector[4];
boolean[] inPt = new boolean[4];

float _d = 15;

void setup() {
size(600, 400);
noFill();
stroke(0);
strokeWeight(3);
pt[0] = new PVector(180, 270);
pt[1] = new PVector(290, 230);
pt[2] = new PVector(240, 230);
pt[3] = new PVector(240, 190);
}

void draw() {
background(209);
for (int i = 0; i < pt.length; i++) {
circle(pt[i].x, pt[i].y, _d);
}
bezier(pt[0].x, pt[0].y, pt[1].x, pt[1].y, pt[2].x, pt[2].y, pt[3].x, pt[3].y);
}

void mousePressed() {
for (int i = 0; i < pt.length; i++) {
if ((mouseX - pt[i].x)*(mouseX - pt[i].x) + (mouseY - pt[i].y)*(mouseY - pt[i].y) < _d*_d) {
inPt[i] = true;
} else {
inPt[i] = false;
}
}
}

void mouseDragged() {
for (int i = 0; i < pt.length; i++) {
if(inPt[i] == true){
pt[i].x = mouseX;
pt[i].y = mouseY;
circle(pt[i].x, pt[i].y, _d);
}
}
}

``````
1 Like

quick and simple port to 3D

``````

// 3D bezier with sphere dragging

// colors
final color RED   = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color BLUE  = color(0, 0, 255);

// states
final int stateMain = 0;
final int stateHelp = 1;
int state = stateHelp;

// parallel arrays
PVector[] pt         = new PVector[4]; // pos in 3D
boolean[] mouseInPt  = new boolean[4]; // mouse in?
// for screenX and screenY command
PVector[] onScreen   = new PVector[4]; // 2D pos

// sphere

// rotation
float angle;  //angle

// for dragging
boolean rightMouse=false;
boolean leftMouse=false;
float mouseXStart;

// distinguish between anchor and control point
color[] listCol = {RED, GREEN, GREEN, RED};

// --------------------------------------------------------------------------

void setup() {
size(1600, 900, P3D);

// pos in 3D
pt[0] = new PVector(-280, 270, -333);
pt[1] = new PVector(-90, -30, -10);
pt[2] = new PVector(140, 80, -300);
pt[3] = new PVector(440, 250, -222);

// for screenX and screenY command
onScreen[0]=new PVector(0, 0);
onScreen[1]=new PVector(0, 0);
onScreen[2]=new PVector(0, 0);
onScreen[3]=new PVector(0, 0);
}

void draw() {
//
if (state == stateHelp) {
drawHelpScreen();
return;//leave
}

// ----------------------------------------------------
// state == stateMain

background(209);
lights();

translate (width/2, height/3);
if (keyPressed) {
rotateY(angle+=0.012);
}

for (int i = 0; i < pt.length; i++) {
showSphere(i);
}

noStroke();
fill(BLUE);
bezier(
pt[0].x, pt[0].y, pt[0].z,
pt[1].x, pt[1].y, pt[1].z,
pt[2].x, pt[2].y, pt[2].z,
pt[3].x, pt[3].y, pt[3].z
);
//
}//func

// --------------------------------------------------------------------------
// INPUTS

void mousePressed() {
//
if (state == stateHelp) {
state = stateMain;
return;//leave
}

//----------------------------

// reset
rightMouse=false;
leftMouse=false;

// check
if (mouseButton==RIGHT) {
rightMouse=true;
mouseXStart=mouseY;
} else {
leftMouse=true;
}

// reset
for (int i = 0; i < pt.length; i++) {
mouseInPt[i] = false;
}

// search sphere
for (int i = 0; i < pt.length; i++) {
if (dist(mouseX, mouseY, onScreen[i].x, onScreen[i].y) < 2*radius) {
mouseInPt[i] = true;
break;
}//if
}//for
}//func

void mouseDragged() {
if (state == stateHelp) {
state = stateMain;
return;//leave
}

for (int i = 0; i < pt.length; i++) {
if (mouseInPt[i]) {
if (leftMouse) {
pt[i].x = mouseX;
pt[i].y = mouseY;
} else if (rightMouse) {
pt[i].z = mouseXStart-mouseY;
}
return;//leave
}//if
}
}

void keyPressed() {
if (state == stateHelp) {
key=0;//kill Esc
state = stateMain;
return;//leave
}

if (key==' ')
state = stateHelp;
}

// ------------------------------------------------------------------------------------------
// OTHER FUNCS

void drawHelpScreen() {
background(0);

// rect
stroke(255);
noFill();
float distBorder = 30;
rect (distBorder, distBorder, width-2*distBorder, height-2*distBorder);

// text
float distBorderX = 330;
fill(255);
text ("            === HELP ===", distBorderX, 230);
text ("Left mouse on sphere to move it x/y-direction", distBorderX, 300);
text ("Right mouse on sphere to move it in z-direction", distBorderX, 320);
text ("Press and hold any key to rotate", distBorderX, 340);
text ("Press Space bar to see Help Screen", distBorderX, 360);
text ("Press any key", distBorderX, 408);
}

void showSphere(int i_) {
// display ONE sphere
pushMatrix();
translate(pt[i_].x, pt[i_].y, pt[i_].z);

onScreen[i_].x = screenX( 0, 0 );
onScreen[i_].y = screenY( 0, 0 );

fill(listCol[ i_ ]);
noStroke();

popMatrix();
}
//

``````
1 Like

when i copy and paste that code i get an error message saying “Syntax Error - Incomplete statement or extra code near ‘extraneous input ‘’ expecting {‘color’, HexColorLiteral, CHAR_LITERAL, ‘abstract’, ‘assert’, ‘boolean’, ‘break’, ‘byte’, ‘char’, ‘class’, ‘continue’, ‘do’, ‘double’, ‘final’, ‘float’, ‘for’, ‘if’, ‘int’, ‘interface’, ‘long’, ‘new’, ‘private’, ‘protected’, ‘public’, ‘return’, ‘short’, ‘static’, ‘strictfp’, ‘super’, ‘switch’, ‘synchronized’, ‘this’, ‘throw’, ‘try’, ‘var’, ‘void’, ‘while’, DECIMAL_LITERAL, HEX_LITERAL, OCT_LITERAL, BINARY_LITERAL, FLOAT_LITERAL, HEX_FLOAT_LITERAL, BOOL_LITERAL, STRING_LITERAL, MULTI_STRING_LIT, ‘null’, ‘(’, ‘{’, ‘}’, ‘;’, ‘<’, ‘!’, ‘~’, ‘++’, ‘–’, ‘+’, ‘-’, ‘@’, IDENTIFIER}’?”, do i have to add anything else to get it to work?

This is really cool, i can’t quite tell what it’s supposed to do but still really cool. I’ll give it another go when i get home since i cant right click with just the trackpad

i think that you missed a } at the end

yep i did
That’s really cool i love itt