openFrameworksを使って、こんな感じでSyphonで映像出力する時計を作った
その作り方を記す
画面はこんな感じ
空のプロジェクトを生成
openFrameworksでofxGuiとofxSyphonを適用してプロジェクトを生成する
プロジェクト名はclockSyphonとした
詳しくは下記参考リンクを参照
するとopenFrameworks/apps/myApps配下にclockSyphonプロジェクト一式が生成される
適当なフリーフォントをダウンロードして先ほど生成したプロジェクトの
openFrameworks/apps/myApps/clockSyphon/bin/data配下に置く
フリーフォントはLatoがおすすめ
コーディング
コーディングする
まだまだ荒削りだが晒す
main.cpp
int main( ){
//Use ofGLFWWindowSettings for more options like multi-monitor fullscreen
ofGLWindowSettings settings;
//解像度を16:9に変更
settings.setSize(960, 540);
settings.windowMode = OF_WINDOW; //can also be OF_FULLSCREEN
auto window = ofCreateWindow(settings);
ofRunApp(window, make_shared<ofApp>());
ofRunMainLoop();
}
ofApp.cpp
// https://yoppa.org/ma2_10/1739.html マウスドラッグ、マウスボタンプレス
// https://forum.openframeworks.cc/t/ofxcolorpicker-missing-argument-list/35497 GUI ColorPicker
// https://www.ei.tohoku.ac.jp/xkozima/lab/ofTutorial4.html 文字の縁どり
#include "ofApp.h"
//--------------------------------------------------------------
void ofApp::setup(){
ofSetFrameRate(24);
output.setName("Main");
//バックグランドを透明色に設定
ofBackground(0, 0);
// https://forum.openframeworks.cc/t/set-window-title/6470/3 ウィンドウにタイトルを表示
ofSetWindowTitle("clockSyphon");
// Fonts
ofTrueTypeFont::setGlobalDpi(72);
fontText.load("Lato-Regular.ttf", 50); // フォントのデータを指定する
fontText.setLineHeight(24); // 行間を指定する
fontText.setLetterSpacing(1.0); // 文字間を指定する
// GUI
gui.setup();
gui.add(slider.setup("slider", 50, 0, 255));
gui.add(color.set("color", ofColor(255, 255, 0)));
}
//--------------------------------------------------------------
void ofApp::update(){
//現在時刻の取得
int s = ofGetSeconds();
int m = ofGetMinutes();
int h = ofGetHours();
int d = ofGetDay();
int month = ofGetMonth();
int y = ofGetYear();
//文字で表示する
ofSetColor(255, 255, 255);
dateTime = ofToString(y, 0) + "/" + ofToString(month, 0) + "/" + ofToString(d, 0) + " " + ofToString(h, 0) + ":" + paddingNumberToString(m) + ":" + paddingNumberToString(s);
}
//--------------------------------------------------------------
void ofApp::draw(){
ofSetColor(50, 50, 50);
for (int y = -3; y < 3; y++) {
for (int x = -3; x < 3; x++) {
fontText.drawString(dateTime,
px + x, py + y );
}
}
ofSetColor(color);
fontText.drawString(dateTime, px, py);
//ここで送信している
output.publishScreen();
gui.draw();
}
//--------------------------------------------------------------
void ofApp::exit(){
}
//--------------------------------------------------------------
void ofApp::keyPressed(int key){
}
//--------------------------------------------------------------
void ofApp::keyReleased(int key){
}
//--------------------------------------------------------------
void ofApp::mouseMoved(int x, int y ){
}
//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){
px = x;
py = y;
}
//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
px = x;
py = y;
}
//--------------------------------------------------------------
void ofApp::mouseReleased(int x, int y, int button){
}
//--------------------------------------------------------------
void ofApp::mouseScrolled(int x, int y, float scrollX, float scrollY){
}
//--------------------------------------------------------------
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){
}
string ofApp::paddingNumberToString(int i){
switch (i) {
case 0:
return "00";
case 1:
return "01";
case 2:
return "02";
case 3:
return "03";
case 4:
return "04";
case 5:
return "05";
case 6:
return "06";
case 7:
return "07";
case 8:
return "08";
case 9:
return "09";
default:
return ofToString(i, 0);
}
}
ofApp.h
#pragma once
#include "ofMain.h"
#include "ofxSyphon.h"
#include "ofxGui.h"
class ofApp : public ofBaseApp{
public:
void setup() override;
void update() override;
void draw() override;
void exit() override;
void keyPressed(int key) override;
void keyReleased(int key) override;
void mouseMoved(int x, int y ) override;
void mouseDragged(int x, int y, int button) override;
void mousePressed(int x, int y, int button) override;
void mouseReleased(int x, int y, int button) override;
void mouseScrolled(int x, int y, float scrollX, float scrollY) override;
void mouseEntered(int x, int y) override;
void mouseExited(int x, int y) override;
void windowResized(int w, int h) override;
void dragEvent(ofDragInfo dragInfo) override;
void gotMessage(ofMessage msg) override;
string paddingNumberToString(int i);
ofxSyphonServer output;
ofTrueTypeFont fontText;
string dateTime;
int px = 100;
int py = 100;
ofxIntSlider slider;
ofParameter<ofColor> color; //カラーピッカー
ofxPanel gui;
};
アプリをビルド&実行
アプリをビルド&実行する
VDMXでSyphon映像を受信する
右クリックでAdd clips from Built-in Sources->syphon->oFアプリを選択
これ非常に重要！
表示したSyphonレイヤーのComposition ModeをOpenGL- Overに変更する
参考リンク
マウスドラッグ、マウスボタンプレス
ofxGUI ColorPicker
文字の縁どり
openFrameworksとSyphon
ソースコード
MadMapperで映す
Syphon > VDXM5をクリックする
Modul8で映す
Syphonをクリックする
