[work 60] Handwriting like – stripe –

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

	// 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 "HandWriting.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:
    std::shared_ptr<HandWriting> hw;
    std::vector<std::vector<ofVec2f>> points;
    int objIdx;
    int pointIdx;
    
    ofFbo fbo;
};

#include "ofApp.h"


ofApp::ofApp(){
    
}

ofApp::~ofApp(){
    
}

//--------------------------------------------------------------
void ofApp::setup(){
    double fps = 30;
    
    
    ofSetFrameRate(fps);
    ofBackground(255);
    ofSetBackgroundAuto(true);
    ofSetVerticalSync(true);
    
    fbo.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA, 4);
    fbo.begin();
    ofClear(0);
    fbo.end();
    
    hw = make_shared<HandWriting>();
    
    std::vector<ofVec2f> p;
    ofVec2f leftTop = ofVec2f(290, 10);
    float size = 175;
    ofRectangle r = ofRectangle(leftTop.x, leftTop.y, size, size);
    
    for (int i = 0; i < 4; i++) {
        for (int j = 0; j < 4; j++) {
            p.clear();
            ofRectangle tempRect = r;
            tempRect.scaleFromCenter(0.8);
            hw->getRect(p, tempRect);
            points.push_back(p);
            if ((int)ofRandom(0, 2) == 0) {
                int interval = (int)(tempRect.getWidth() / ofRandom(5, 15));
                for (int offset = interval; offset < tempRect.getWidth(); offset += interval) {
                    ofVec2f s = ofVec2f(tempRect.getLeft(), tempRect.getTop() + offset);
                    ofVec2f e = ofVec2f(tempRect.getRight(), tempRect.getTop() + offset);
                    
                    p.clear();
                    hw->getLine(p, s, e);
                    points.push_back(p);
                }
            } else {
                int interval = (int)(tempRect.getHeight() / ofRandom(5, 15));
                for (int offset = interval; offset < tempRect.getHeight(); offset += interval) {
                    ofVec2f s = ofVec2f(tempRect.getLeft() + offset, tempRect.getTop());
                    ofVec2f e = ofVec2f(tempRect.getLeft() + offset, tempRect.getBottom());
                    
                    p.clear();
                    hw->getLine(p, s, e);
                    points.push_back(p);
                }
            }
            r.y += size;
        }
        r.x += size;
        r.y = leftTop.y;
    }
    
    objIdx = 0;
    pointIdx = 0;
}

//--------------------------------------------------------------
void ofApp::update(){
    if (objIdx < points.size()) {
        for (int i = 0; i < 20; i++) {
            if (pointIdx < points.at(objIdx).size() - 1) {
                fbo.begin();
                ofNoFill();
                ofSetColor(0, 0, 0, 200);
                ofSetLineWidth(2);
                ofVec2f s = points.at(objIdx).at(pointIdx);
                ofVec2f e = points.at(objIdx).at(pointIdx + 1);
                ofDrawLine(s, e);
                fbo.end();
                
                pointIdx++;
            } else {
                objIdx++;
                pointIdx = 0;
                break;
            }
        }
    }
}

//--------------------------------------------------------------
void ofApp::draw(){
    fbo.draw(0, 0);
}

#ifndef HandWriting_hpp
#define HandWriting_hpp

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

class HandWriting {
public:
    HandWriting();
    ~HandWriting();
    void getLine(std::vector<ofVec2f> &points, ofVec2f start, ofVec2f end);
    void getRect(std::vector<ofVec2f> &points, ofRectangle rect);
private:
    void getRectSide(std::vector<ofVec2f> &points, ofVec2f start, ofVec2f end);
};
#endif /* HandWriting_hpp */

#include "HandWriting.hpp"


HandWriting::HandWriting()
{
    
}


HandWriting::~HandWriting()
{
    
}


void HandWriting::getLine(std::vector<ofVec2f> &points, ofVec2f start, ofVec2f end)
{
    float length = (end - start).length();
    float drawLen = 0;
    ofVec2f dir = end - start;
    ofVec2f point = start;
    dir.normalize();
    ofVec2f vert = dir;
    vert.rotate(90);
    
    float tx = ofRandom(10000);
    
    while(drawLen < length) {
        float offset = ofMap(ofSignedNoise(tx), -1, 1, -3, 3);
        tx += 0.01;
        points.push_back(point + vert * offset);
        
        point = point + dir;
        drawLen = (point - start).length();
    }
}


void HandWriting::getRect(std::vector<ofVec2f> &points, ofRectangle rect)
{
    getRectSide(points, rect.getTopLeft(), rect.getTopRight());
    getRectSide(points, points.back(), rect.getBottomRight());
    getRectSide(points, points.back(), rect.getBottomLeft());
    getRectSide(points, points.back(), rect.getTopLeft());
}


void HandWriting::getRectSide(std::vector<ofVec2f> &points, ofVec2f start, ofVec2f end)
{
    std::vector<ofVec2f> buff;
    getLine(buff, start, end);
    
    for (ofVec2f p : buff) {
        points.push_back(p);
    }
}

Link to the reference page

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

Development environment

• openframeworks 0.10.1
• c++
• macOS
• Xcode