Recreate Parabolic Triangle

Processing Coding Questions
1

I want to recreate this Parabolic triangle gif using Processing.

I’ve already got the “base” code figured out I think. What I need now is to cycle through my code to get the correct number of triangles/lines.

I’m using n to determine how many triangles should be drawn and as you can see, when changing n, the line positions are correct.

I just need to make a loop so that the correct number of triangles is drawn but can’t seem to find a way

I posted this on Stack OverFlow before

This is my code:

float x1, y1, x2, y2, x3, y3;
float b, a;

float a1, b1, a2, b2, a3, b3, a4, b4, a5, b5, a6, b6, a7, b7, a8, b8, a9, b9;

void setup () {
  size(600, 600);
  background(255);

  x2=50;
  y2=height-50;

  x3=width-50;
  y3=y2;

  b=x3-x2;
  a=b*sqrt(3)/2;

  x1=x2+b/2;
  y1=y2-a;

  stroke(255, 0, 153);
  line(x1, y1, x2, y2);
  stroke(0, 255, 253);
  line(x2, y2, x3, y3);
  stroke(79, 144, 252);
  line(x3, y3, x1, y1);
}
void draw() {
  float n=4;
  float div=(1/n);

  a1=lerp(x1, x2, div);
  b1=lerp(y1, y2, div);
  a2=lerp(x2, x3, div);
  b2=lerp(y2, y3, div);
  a3=lerp(x3, x1, div);
  b3=lerp(y3, y1, div);

  a4=lerp(x1, x2, div+div);
  b4=lerp(y1, y2, div+div);
  a5=lerp(x2, x3, div+div);
  b5=lerp(y2, y3, div+div);
  a6=lerp(x3, x1, div+div);
  b6=lerp(y3, y1, div+div);

  a7=lerp(x1, x2, div+div+div);
  b7=lerp(y1, y2, div+div+div);
  a8=lerp(x2, x3, div+div+div);
  b8=lerp(y2, y3, div+div+div);
  a9=lerp(x3, x1, div+div+div);
  b9=lerp(y3, y1, div+div+div);

  line(a1, b1, a2, b2);
  line(a2, b2, a3, b3);
  line(a3, b3, a1, b1);

  line(a4, b4, a5, b5);
  line(a5, b5, a6, b6);
  line(a6, b6, a4, b4);

  line(a7, b7, a8, b8);
  line(a8, b8, a9, b9);
  line(a9, b9, a7, b7);
}
2

you have answers on Stack OverFlow

you could write a function and call it in a for-loop

OR even a recursive function which can call itself up to certain depth

First Sketch

first use a simple triangle function


float x1, y1, x2, y2, x3, y3;
float b, a;

float a1, b1, a2, b2, a3, b3, a4, b4, a5, b5, a6, b6, a7, b7, a8, b8, a9, b9;

void setup () {
  size(600, 600);
  background(255);

  x2=50;
  y2=height-50;

  x3=width-50;
  y3=y2;

  b=x3-x2;
  a=b*sqrt(3)/2;

  x1=x2+b/2;
  y1=y2-a;


  triangleMy(x1, y1, 
    x2, y2, 
    x3, y3);
}

void draw() {

  float n=4;
  float div=(1/n);

  a1=lerp(x1, x2, div);
  b1=lerp(y1, y2, div);
  a2=lerp(x2, x3, div);
  b2=lerp(y2, y3, div);
  a3=lerp(x3, x1, div);
  b3=lerp(y3, y1, div);

  a4=lerp(x1, x2, div+div);
  b4=lerp(y1, y2, div+div);
  a5=lerp(x2, x3, div+div);
  b5=lerp(y2, y3, div+div);
  a6=lerp(x3, x1, div+div);
  b6=lerp(y3, y1, div+div);

  a7=lerp(x1, x2, div+div+div);
  b7=lerp(y1, y2, div+div+div);
  a8=lerp(x2, x3, div+div+div);
  b8=lerp(y2, y3, div+div+div);
  a9=lerp(x3, x1, div+div+div);
  b9=lerp(y3, y1, div+div+div);

  //-----

  triangleMy(a1, b1, a2, b2, 
    a3, b3);

  triangleMy(a4, b4, a5, b5, 
    a6, b6);

  triangleMy(a7, b7, a8, b8, 
    a9, b9);
}

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

void triangleMy(float x1, float y1, 
  float x2, float y2, 
  float x3, float y3
  ) {
  //
  stroke(255, 0, 153);
  line(x1, y1, x2, y2);
  stroke(0, 255, 253);
  line(x2, y2, x3, y3);
  stroke(79, 144, 252);
  line(x3, y3, x1, y1);
}

//

Second Sketch

second: here is a recursive function just to give you an expression.

It is obviously wrong

void setup () {
  size(600, 600);
  background(255);

  float x1, y1, x2, y2, x3, y3;

  x2=50;
  y2=height-50;

  x3=width-50;
  y3=y2;

  float  b=x3-x2;
  float  a=b*sqrt(3)/2;

  x1=x2+b/2;
  y1=y2-a;

  drawTriangleRecursive(x1, y1, 
    x2, y2, 
    x3, y3, 
    0.0f, 
    15);

  noLoop();
  println("done");
}

void draw() {
  //empty
}

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

void drawTriangleRecursive(float x1, float y1, 
  float x2, float y2, 
  float x3, float y3, 
  float n, 
  int depth) {

  float div=(1/(n));

  if (depth<=0) {
    return;
  }

  float  a1=lerp(x1, x2, div);
  float  b1=lerp(y1, y2, div);
  float  a2=lerp(x2, x3, div);
  float  b2=lerp(y2, y3, div);
  float  a3=lerp(x3, x1, div);
  float  b3=lerp(y3, y1, div);

  triangleMy(a1, b1, 
    a2, b2, 
    a3, b3);

  depth=depth-1;
  n=n+1;
  drawTriangleRecursive(x1, y1, 
    x2, y2, 
    x3, y3, 
    n, 
    depth);
}

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

void triangleMy(float x1, float y1, 
  float x2, float y2, 
  float x3, float y3
  ) {
  //
  stroke(255, 0, 153);
  line(x1, y1, x2, y2);
  stroke(0, 255, 253);
  line(x2, y2, x3, y3);
  stroke(79, 144, 252);
  line(x3, y3, x1, y1);
}

//
3

The lerp() reference has an example with a for() loop:
https://processing.org/reference/lerp_.htm

This is achievable and I will not provide code for this.

Start simple and build on that.

In my effort to do this:

  • one for() loop
  • lerp x1 and y1 along one line
  • lerp x2 and y2 along other line
  • join each point for each step with a line.

End result:
image

This can easily be adapted to more complex code.

‘’:)‘’