Strange behavior of an Image based class / simple slideshow

I’m doing a simple slideshow that mixes (with random alphas) three instances of a image-based class. The class shows a random image from a folder and then starts doing a fade-in until reaches the alpha value of the object. Once it reaches this point goes again down. When the alphai reaches 0 it calls another image and start the process again.

This works with only one instance of the class ( set by #define NIMAGES 1). If I want three or more images (appearing and disappearing with fades at different times) the script just won’t do this well. When an object changes the file somehow it triggers the same operation in the other layers (before fading out completely) provoking strange jumps and sudden appearances. The other thing is that I’m centering the image but just now is printing them in the 0,0 corner.

I’m really clueless about this. Thanks A LOT for any help.

The code:

main.cpp

#include "ofMain.h"
#include "ofApp.h"


//========================================================================
int main( ){
	
   // ofGLFWWindowSettings settings;
   // settings.multiMonitorFullScreen = true;
   // settings.windowMode = OF_FULLSCREEN;
   // ofCreateWindow(settings);
    
    //ofSetupOpenGL(7560,1920,OF_WINDOW);			// <-------- setup the GL context
    ofSetupOpenGL(2048,1152,OF_WINDOW);
    //ofSetupOpenGL(2520,640,OF_WINDOW);
    
	// this kicks off the running of my app
	// can be OF_WINDOW or OF_FULLSCREEN
	// pass in width and height too:
	ofRunApp(new ofApp());

}

ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    
    vector<string> files;
    string path = "";
    ofDirectory dir(path);
    //only show png files
    dir.allowExt("jpg");
    //populate the directory object
    dir.listDir();

    //add all paths to files vector 
    for(int i = 0; i < dir.size(); i++){
        files.push_back(dir.getPath(i));
        ofLogNotice(dir.getPath(i));
       // ofLogNotice(files[i]);
    }
    ofRandomize(files);
    ofLogNotice("**********");
    
    //go through and print out all the vectors
    for(int i = 0; i < files.size(); i++){
      //  ofLogNotice(files[i]);
    }
    
    for(int i=0; i<NIMAGES; i++){
        imageLayers[i].setup();
    }
    
}

//--------------------------------------------------------------
void ofApp::update(){
    
    for(int i=0; i<NIMAGES; i++){
        imageLayers[i].update();
    }
    
}

//--------------------------------------------------------------
void ofApp::draw(){
    
    for(int i=0; i<NIMAGES; i++){
        imageLayers[i].draw();
    }
    
}

//--------------------------------------------------------------
void ofApp::keyPressed(int key){

    for(int i=0; i<NIMAGES; i++){
        imageLayers[i].setup();
    }
}

//--------------------------------------------------------------
void ofApp::keyReleased(int key){

}

//--------------------------------------------------------------
void ofApp::mouseMoved(int x, int y ){

}

//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mouseReleased(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mouseEntered(int x, int y){

}

//--------------------------------------------------------------
void ofApp::mouseExited(int x, int y){

}

//--------------------------------------------------------------
void ofApp::windowResized(int w, int h){

}

//--------------------------------------------------------------
void ofApp::gotMessage(ofMessage msg){

}

//--------------------------------------------------------------
void ofApp::dragEvent(ofDragInfo dragInfo){ 

}

ofApp.h

#pragma once

#include "ofMain.h"
#include "Wimage.h"

#define NIMAGES 1

class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();

		void keyPressed(int key);
		void keyReleased(int key);
		void mouseMoved(int x, int y );
		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
		void mouseEntered(int x, int y);
		void mouseExited(int x, int y);
		void windowResized(int w, int h);
		void dragEvent(ofDragInfo dragInfo);
		void gotMessage(ofMessage msg);

    float x=0;
    
    Wimage wImage;
    
    Wimage imageLayers[NIMAGES];
    
    
		
};

Wimage.cpp

#include "Wimage.h"

Wimage::Wimage(){

}

void Wimage::setup(){
    
    int wWidth = ofGetWidth();   // get window size
    int wHeight =  ofGetHeight();
    
    newImage();
    
    x= wWidth/2-pic.getWidth()/2;
    y= wHeight/2-pic.getHeight()/2;
    
    w = pic.getWidth();
    
    alpha = ofRandom(50, 200);       // alpha
    alphai = 0;
    
}

void Wimage::update(){
    
    if (fadeout==0) {
        alphai=alphai+1;
        if (alphai>alpha) {
            alphai=alpha; fadeout=1;
        }
    } else {  alphai=alphai-1;
        if (alphai<0) {
            alphai=0; fadeout=0; newImage();
        }
    }
}

void Wimage::draw(){

    pic.draw(x,y);
    ofSetColor(255,255,255,alphai);
    
}

void Wimage::newImage() {
    
    string path = "";
    ofDirectory dir(path);
    dir.allowExt("jpg");
    dir.listDir();
    alphai=0;
    pic.load(dir.getPath(ofRandom(dir.size())));

}


Wimage.h

#ifndef Wimage_hpp
#define Wimage_hpp

#include <stdio.h>
#include "ofMain.h" // we need to include this to have a reference to the openFrameworks framework

class Wimage {
    
public: // place public functions or variables declarations here
    
    // methods, equivalent to specific functions of your class objects
    void setup();   // setup method, use this to setup your object's initial state
    void update();  // update method, used to refresh your objects properties
    void draw();    // draw method, this where you'll do the object's drawing
    
    void newImage();  // new image for layer
    
    
    ofImage pic;   // image
    
    // variables
    float x;        // position
    float y;
    float w;        // width
    float h;        // height
    float ratio;    // aspect ratio 
    

    float alpha;    // starting alpha value
    float alphai;   // alpha variable for fade in-outs
    int fadeout=0;  // flag for fade
    
    ofColor color;  // color using ofColor type
    
    Wimage();  // constructor - used to initialize an object, if no properties are passed the program sets them to the default value


private: // place private functions or variables declarations here

};

#endif /* wImage_hpp */

Hi!

void Wimage::draw(){
    ofSetColor(255,255,255,alphai);
    pic.draw(x,y, 500, 500);
}

ofSetColor should be called before the draw() function.
I edited the update() function, so it calls setup(), instead of newImage().
I tested it with different sized pictures, so setup() will reset the x and y (and call newImage()).

void Wimage::update(){
    if (fadeout==0) {
        alphai++;
        if (alphai>alpha) {
            alphai=alpha;
            fadeout=1;
        }
    } else {
        alphai--;
        if (alphai<0) {
            alphai=0;
            fadeout=0;
            setup();
        }
    }
}

And your code had the window-size set too big for my screen, so the first pictures were positioned incorrectly, this solved it:

ofSetWindowShape(1536, 864);
    
for(int i=0; i<NIMAGES; i++){
   imageLayers[i].setup();
}

But I have no idea why your x and y are (0,0) …

1 Like

Thanks, really helpful!