# Triangle thingy

**URL:** https://discourse.processing.org/t/triangle-thingy/43956
**Category:** Gallery
**Created:** [February 20, 2024, 11:45am UTC](https://discourse.processing.org/t/triangle-thingy/43956 "2024-02-20T11:45:58Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![cattclawzz](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@cattclawzz](https://discourse.processing.org/u/cattclawzz)
#### Post date: [February 20, 2024, 11:45am UTC](https://discourse.processing.org/t/triangle-thingy/43956/1 "2024-02-20T11:45:58Z")

</div>

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

```auto
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;
}

```

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [February 21, 2024, 12:42am UTC](https://discourse.processing.org/t/triangle-thingy/43956/2 "2024-02-21T00:42:28Z")

</div>

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

```auto
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);
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 22, 2024, 6:21pm UTC](https://discourse.processing.org/t/triangle-thingy/43956/3 "2024-02-22T18:21:16Z")

</div>

quick and simple port to 3D

```auto

// 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
float radius = 15; //radius

// 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();

  sphere(radius);

  popMatrix();
}
//

```

---

<div class="post-metadata">

### Author: ![cattclawzz](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@cattclawzz](https://discourse.processing.org/u/cattclawzz)
#### Post date: [February 23, 2024, 9:48am UTC](https://discourse.processing.org/t/triangle-thingy/43956/4 "2024-02-23T09:48:15Z")

</div>

> [@svan](#):
>
> ```auto
> 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);
> }
> 
> ```

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?

---

<div class="post-metadata">

### Author: ![cattclawzz](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@cattclawzz](https://discourse.processing.org/u/cattclawzz)
#### Post date: [February 23, 2024, 9:53am UTC](https://discourse.processing.org/t/triangle-thingy/43956/5 "2024-02-23T09:53:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 23, 2024, 12:26pm UTC](https://discourse.processing.org/t/triangle-thingy/43956/6 "2024-02-23T12:26:16Z")

</div>

i think that you missed a } at the end

---

<div class="post-metadata">

### Author: ![cattclawzz](https://avatars.discourse-cdn.com/v4/letter/c/a9adbd/32.png) [@cattclawzz](https://discourse.processing.org/u/cattclawzz)
#### Post date: [February 23, 2024, 1:15pm UTC](https://discourse.processing.org/t/triangle-thingy/43956/7 "2024-02-23T13:15:59Z")

</div>

yep i did  
That’s really cool i love itt