How to "build" a triangle shape in the source code and paste a copy of it at sketch position (x,y)

Hello everyone,

I am looking for a way to "build" a triangle shape (isosceles triangle) where I can specify the start point a (a1,a2), the length of the vertical direction towards the hypotenuse, and the length of the hypotenuse.

I then want to paste multiple triangles from that master shape into the sketch at positions I specify just with a point and the rotation of the triangle. For example 4 triangles in the middle of each side with the hypotenuse facing towards the middle of the sketch.

position1(  0 , height/2 ) with 90° rotation
position2( width/2 , 0 ) with 0° rotation
position3( width , height/2 ) with 180° rotation
position4( width/2 , height ) with 270° rotation

Any help is strongly appreciated.

Thanks a lot.

Answers

  • Here's what I got so far. It's a version where I manually put down the triangles. I marked all positions I want triangles in with lines first and added one triangle to start with. But it all is very non-responsive towards changes I want to do later on maybe.

    //VARS
    
    void setup() {
      size(1920, 1080);        // HD
      //size(3840, 2160);      // U-HD
      //size(2048; 1080);      // 2K 16:9
      //size(4096; 2160);      // 4K 16:9
      background(20);
      stroke(200);
      strokeWeight(1);
      noLoop();
    }
    
    void draw(){
    
      int hori = width/20; //horizontal length of triangle
      int vert = height/20;
      int hypo = height/30; //length of half the hypotenuse
    
      int offset_x;
      int offset_y;
    
    
      triangle(0, height/3, hori, height/3-hypo, hori, height/3+hypo);
    
      line(0, height/3, width/20, height/3);
      line(0, height*2/3, width/20, height*2/3);
      line(width*19/20, height/3, width, height/3);
      line(width*19/20, height*2/3, width, height*2/3);
    
      line(width/3, 0, width/3, height/20);
      line(width*2/3, 0, width*2/3, height/20);
      line(width/3, height*19/20, width/3, height);
      line(width*2/3, height*19/20, width*2/3, height);
    }
    
  • Answer ✓
    void setup() {
      size(600, 400);          // A sane screen size.
      //size(1920, 1080);      // HD
      //size(3840, 2160);      // U-HD
      //size(2048; 1080);      // 2K 16:9
      //size(4096; 2160);      // 4K 16:9
      stroke(200);
      strokeWeight(1);
    }
    
    void draw() {
      background(20);
      tri(0, height/3, 0);
      tri(0, height*2/3, 0);
      tri(width, height/3, 180);
      tri(width, height*2/3, 180);
      tri(width/3, 0, 90);
      tri(width*2/3, 0, 90);
      tri(width/3, height, 270);
      tri(width*2/3, height, 270);
    }
    
    void tri( float atX, float atY, int degreesRot ) {
      int hori = width/20;
      int vert = height/40;
      pushMatrix();
      translate(atX, atY);
      rotate(radians(degreesRot));
      triangle(0, 0, hori, -vert, hori, vert);
      popMatrix();
    }
    
  • edited February 2018

    Thanks again, TfGuy44.

    For the sake of learning, are there other possible ways to achieve that? I was looking into pshapes and... I think it was vertex(?) but wasn't sure how to approach the problem with those two.

    As for your solution, let me try to follow what your code does:

    line 26: puts the current matrix in the stack, aka everything that has been drawn so far is gone, I got an empty sketch

    line 27: Does translate(x,y) move the point of origin of the coordinate system to the new coordinates?

    line 28: rotate the empty sketch

    line 29: put a triangle down at ( 0, 0, hori, -vert, hori, vert)

    line 30: puts the old sketch back with the newly triangle, is it put on top or underneath?

  • line 26: puts the current matrix in the stack, aka everything that has been drawn so far is gone, I got an empty sketch.

    pushMatrix() merely saves current transformations (coord. system): :-B
    https://Processing.org/reference/pushMatrix_.html

    For "emptying" the canvas, call background() or clear(): ;)

    1. https://processing.org/reference/background_.html
    2. https://processing.org/reference/clear_.html
  • If I want to make the background transparent, would

    background(0,0,0,0);

    work?

Sign In or Register to comment.