Simple way to create this diagram using pythagoras theorem

Processing Coding Questions
1

pythagoras
int a;
int c;
int b = sqrt(aa+cc);

2

Hi,

Welcome to the community! :wink:

Please read the guidelines on how to post on this forum : https://discourse.processing.org/faq
If you just provide an image and some lines of code without description, it’s going to be hard for people to help you :slight_smile:

First of all, this diagram is not only specific to the Pythagorean theorem, it’s just the area of the square of the longest side is equal to the sum of the areas of the two other squares.

You need to identify the functions that are going to help you displaying the diagram in the reference :

After you checked those links and try your own solution, this is mine (you can drag each points of the triangle) :

Click to expand! 
Triangle triangle;

float time = 0;

void setup() {
  size(500, 500);

  triangle = new Triangle(width/2, height/2 - 100, width/2, height/2, width/2 + 100, height/2);
}

void draw() {
  background(255);

  triangle.display();
}

void mouseDragged() {
  triangle.mouseDragged();
}

class Triangle {
  // The size of the handles
  int handleSize = 15;
  // The points of the triangle
  PVector a, b, c;

  Triangle(float x1, float y1, float x2, float y2, float x3, float y3) {
    this.a = new PVector(x1, y1);
    this.b = new PVector(x2, y2);
    this.c = new PVector(x3, y3);
  }

  void display() {
    // Draw the triangle
    noFill();
    stroke(0);
    strokeWeight(2);
    triangle(a.x, a.y, b.x, b.y, c.x, c.y);

    // a side
    fill(255, 0, 0);
    pushMatrix();
    translate(a.x, a.y);
    rotate(PVector.sub(b, a).heading());
    square(0, 0, a.dist(b));
    popMatrix();

    // b side
    fill(0, 255, 0);
    pushMatrix();
    translate(b.x, b.y);
    rotate(PVector.sub(c, b).heading());
    square(0, 0, b.dist(c));
    popMatrix();

    // c side
    fill(0, 0, 255);
    pushMatrix();
    translate(c.x, c.y);
    rotate(PVector.sub(a, c).heading());
    square(0, 0, c.dist(a));
    popMatrix();

    // Draw the handles
    fill(255);
    strokeWeight(1);
    ellipse(a.x, a.y, handleSize, handleSize);
    ellipse(b.x, b.y, handleSize, handleSize);
    ellipse(c.x, c.y, handleSize, handleSize);
  }
  
  void movePoint(PVector p){
    if (dist(mouseX, mouseY, p.x, p.y) < handleSize) {
      p.add(mouseX - pmouseX, mouseY - pmouseY);
    }
  }

  void mouseDragged() {
    movePoint(a);
    movePoint(b);
    movePoint(c);
  }
}

Capture d’écran de 2020-06-05 12-35-49

3

Thank you, very helpful. And sorry for not following the guidelines.

1 Like