# Recreate Parabolic Triangle

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

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

//

``````

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:

This can easily be adapted to more complex code.

‘’:)’’