[work 36] Mosaic – Tiled –

Movie

Source code

about

• タイル状のモザイク画
• 輝度が明るいほど小さい四角、暗いほど大きい四角で表現する

file

• 上部にあるファイル名が表示されているボタンを押すと、表示されるファイルが切り替わります
• 別ウィンドウ表示したい時や行番号などが無いRawMode表示したい時は、コード内右上のボタンを押してください（ボタンはマウスオーバーすると表示されます）

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

//================================
int main( ){

    // 4K:4096x2160
    // 2K:2048x1080
    // FullHD:1920x1080
    // HD:1440x1080
    // HD720p:1280x720
    // DVD:720x480
    // setup the GL context
//    ofSetupOpenGL(1280,720, OF_WINDOW);
    ofSetupOpenGL(1024,1024, 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());

}

#pragma once

#include "ofMain.h"

#include "Square.hpp"


class ofApp : public ofBaseApp{
public:
    ofApp();
    ~ofApp();
    
    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);
    
private:
    unique_ptr<Square> mosaic;
};

#include "ofApp.h"


ofApp::ofApp(){
    
}

ofApp::~ofApp(){
    
}

//--------------------------------------------------------------
void ofApp::setup(){
    double fps = 30;
    
    
    ofSetFrameRate(fps);
    ofBackground(255);
    ofSetBackgroundAuto(true);
    ofSetVerticalSync(true);
    
    ofImage img;
    img.load("tokyotower.jpg");
//    img.setImageType(OF_IMAGE_GRAYSCALE);
    
    mosaic = make_unique<Square>(img, 20, 8);
    mosaic->setup();
}

//--------------------------------------------------------------
void ofApp::update(){
    mosaic->update();
}

//--------------------------------------------------------------
void ofApp::draw(){
    mosaic->display();
}

#ifndef Mosaic_hpp
#define Mosaic_hpp

#include <stdio.h>
#include "ofMain.h"

class Mosaic {
public:
    Mosaic(ofImage &img, float c, int f);
    ~Mosaic();
    void setup();
    virtual void update();
    virtual void display();
    
protected:
    int factor;
    float cellSize;
    int cols, rows;
    std::vector<ofColor> colors;
    std::vector<int> toneIdxes;
    
private:
    ofImage orgImg;
    ofPixels pixs;
};
#endif /* Mosaic_hpp */

#include "Mosaic.hpp"


Mosaic::Mosaic(ofImage &img, float c, int f)
{
    orgImg = img;
    cellSize = c;
    factor = f;
}


Mosaic::~Mosaic()
{
    
}


void Mosaic::setup()
{
    pixs = orgImg.getPixels();
    pixs.resize(ofGetWidth(), ofGetHeight());
    
    cols = (int)(ofGetWidth() / cellSize);
    rows = (int)(ofGetHeight() / cellSize);
    
    for (int row = 0; row < rows; row++) {
        for (int col = 0; col < cols; col++) {
            int sum_r = 0;
            int sum_g = 0;
            int sum_b = 0;
            for (int j = 0; j < cellSize; j++) {
                for (int i = 0; i < cellSize; i++) {
                    ofColor c;
                    int x = col * cellSize + i;
                    int y = row * cellSize + j;
                    c = pixs.getColor(x, y);
                    sum_r += c.r;
                    sum_g += c.g;
                    sum_b += c.b;
                }
            }
            
            int ave_r = sum_r / (cellSize * cellSize);
            int ave_g = sum_g / (cellSize * cellSize);
            int ave_b = sum_b / (cellSize * cellSize);
            
            int tone_r = (factor - 1) * ave_r / 255 * (255 / (factor - 1));
            int tone_g = (factor - 1) * ave_g / 255 * (255 / (factor - 1));
            int tone_b = (factor - 1) * ave_b / 255 * (255 / (factor - 1));
            ofColor tone = ofColor(tone_r, tone_g, tone_b);
            colors.push_back(tone);
            
            int index = (factor - 1) * (int)tone.getBrightness() / 255; // 0(dark) <-> (factor - 1)(bright)
            toneIdxes.push_back(index);
        }
    }
}


void Mosaic::update()
{
    
}


void Mosaic::display()
{
    for (int row = 0; row < rows; row++) {
        for (int col = 0; col < cols; col++) {
            int idx = cols * row + col;
            ofVec2f corner = ofVec2f(col * cellSize, row * cellSize);
            ofPushMatrix();
            ofSetRectMode(OF_RECTMODE_CORNER);
            ofTranslate(corner);
            ofFill();
            ofSetColor(colors[idx]);
            ofDrawRectangle(0, 0, cellSize, cellSize);
            ofPopMatrix();
        }
    }
}

#ifndef Square_hpp
#define Square_hpp

#include <stdio.h>
#include "ofMain.h"
#include "Mosaic.hpp"


class Square : public Mosaic {
public:
    Square(ofImage &img, float c, int f);
    ~Square();
    void setup();
    void update();
    void display();
    
private:
    int step;
};
#endif /* Square_hpp */

#include "Square.hpp"


Square::Square(ofImage &img, float c, int f) : Mosaic(img, c, f)
{
    
}


Square::~Square()
{
    
}


void Square::setup()
{
    Mosaic::setup();
    
    step = 0;
}


void Square::update()
{
    int temp = step;
    step = temp % factor;
    if (ofGetFrameNum() % (int)ofGetTargetFrameRate() == 0) {
        step++;
    }
}


void Square::display()
{
    int index = 0;
    for (int row = 0; row < rows; row++) {
        for (int col = 0; col < cols; col++) {
            ofPushMatrix();
            ofTranslate(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
            ofSetColor(colors[index]);
            for (int i = 0; (i < step) && (i < factor - toneIdxes[index]); i++) {
                int size = (i + 1) * 2;
                ofNoFill();
                ofSetRectMode(OF_RECTMODE_CENTER);
                ofDrawRectangle(0, 0, size, size);
            }
            ofPopMatrix();
            index++;
        }
    }
}

Link to the reference page

ソースコードで使用したAPIの中から要点になりそうなものをいくつか選んでリストアップしました。

Development environment

• openframeworks 0.10.1
• c++
• macOS
• Xcode