Fading each line of a triangle

beginners
#1

Hello,

I’ve been trying to figure out how to create a grid of triangles and fade each line of the triangle. I wanted to fade the opacity of each edge of the triangle clockwise.

Basically the first 8 secs of this

This was my attempt:

void ofApp::setup(){

mesh.setMode(OF_PRIMITIVE_LINE_LOOP);
mesh.enableColors();


// grid of triangles

for (int x = 0; x >= 700; x++) {
    for (int y = 0; y >= 700; y = y + 30) {
        
        ofVec3f top(100.0 + x, 50.0 + y, 0.0);
        ofVec3f left(50.0 + x, 150.0 + y, 0.0);
        ofVec3f right(150.0 + x, 150.0 + y, 0.0);
        
       // Opacity (fading the alpha)
for (float a = 0.0; a >= 1.0; a = a + 0.1)
    {
        mesh.addVertex(top);
        mesh.addColor(ofFloatColor(255, 0, 0, a));
        
        mesh.addVertex(left);
        mesh.addColor(ofFloatColor(0, 255, 0, a));
        
        mesh.addVertex(right);
        mesh.addColor(ofFloatColor(0, 0, 255, a));
    }
    //--------------------------------------------------------------
void ofApp::draw(){
ofBackground(0);
mesh.draw(); }
#2

Hey there, an image or something would be helpful – not exactly sure what you’re trying to do.

#3

Thanks for responding.
Added at the top.

#4

Hi,

// ofGetElapsedTimef() is returning time passed since the app was launched
// sin( ofGetElapsedTimef()) will return value between -1 and 1
// abs(sin( ofGetElapsedTimef())) will return value between 0 and 1
//
// for brightness we need value from 0 to 255, so ofMap will help here

void ofApp::draw()
{
ofBackground(0);

ofColor clr=ofColor::white;

clr.setBrightness(ofMap(abs(sin( ofGetElapsedTimef())),0,0.33,0,255,true));
ofSetColor(clr);
ofLine( 200,400, 500,600);

clr.setBrightness(ofMap(abs(sin( ofGetElapsedTimef())),0.33,0.66,0,255,true));
ofSetColor(clr);
ofLine( 500,600,300,700);

clr.setBrightness(ofMap(abs(sin( ofGetElapsedTimef())),0.66,1,0,255,true));
ofSetColor(clr);
ofLine( 300,700,200,400);

}
#5

Oh man this helps so much, thank you!!