SketchPad

Some web space to sketch, doodle and make notes. Made using these tools. See more of my work here.

Sketch 2015-08-11

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 50, 100);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numTissues = 16;
    numRoads = 8;
    masker.setup(numRoads);

    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 3, 1.0);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        roads.push_back(road);

        tissuesLoader.clear();
        scale = ofMap(i, 0, numRoads-1, 8, 0.5);
        tissue.setup("tissue.png", scale, TEXTURE_OFFSET_MIDDLE_CENTER);
        tissue.incrementTextureOffsetX(-0.5);
        tissue.setTextureOffsetY(ofRandom(2));
        for(int j = 0; j < numTissues; j++) {
            tissuesLoader.push_back(tissue);
        }
        tissues.push_back(tissuesLoader);
    }
}

void ofApp::update(){
    for(int i = 0; i < numRoads; i++) {
        masker.beginLayer(i);
        {
            float others = ofMap(i, 0, numRoads-1, 100, 255);
            ofSetColor(ofColor(255, others, others, others));
            roads.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, 0.008, -0.002));
            roads.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofSetColor(ofColor::white);
            ofBackground(ofColor::white);
            for(int j = 0; j < tissues.size(); j++) {
                tissues.at(i).at(j).incrementTextureOffsetY((j+1) * ofMap(i, 0, numRoads-1, 0.0032, -0.0032));
                tissues.at(i).at(j).draw();
            }
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        masker.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Consumption.

Daily sketch

Sketch 2015-08-10

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 50, 100);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numRoads = 2;
    numRects = gif.width * 0.5;
    masker.setup(numRoads + 1);
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, -3, 16);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road1s.push_back(road);
    }
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__LEFT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 2, 1);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road2s.push_back(road);
    }

    for(int i = 0; i < numRects; i++) {
        rectAlphaMultipliers.push_back(ofRandom(0.1, 0.5));
    }
    rectWidth = gif.width / numRects;
}

void ofApp::update(){
    for(int i = 0; i < numRoads; i++) {
        masker.beginLayer(i);
        {
            road1s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road1s.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            road2s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road2s.at(i).draw();
        }
        masker.endMask(i);
    }

    masker.beginLayer(numRoads);
    {
        masker.drawLayers(0, numRoads-1);
    }
    masker.endLayer(numRoads);

    masker.beginMask(numRoads);
    {
        ofBackground(ofColor::black);
        for(int i = 0; i < numRects; i++) {
            float alpha = sin(ofGetFrameNum() * rectAlphaMultipliers.at(i));
            alpha = ofMap(alpha, -1, 1, 0, 255);
            ofSetColor(ofColor(ofColor::white, alpha));
            ofRect(i * rectWidth, 0, rectWidth, gif.height);
        }
    }
    masker.endMask(numRoads);
}

void ofApp::draw(){
    gif.begin();
    {
        masker.drawLayer(numRoads);
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Line drawings.

Daily sketch

Sketch 2015-08-09

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 50, 100);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numRoads = 4;
    masker.setup(numRoads + 1);
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 0.125, 10);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road1s.push_back(road);
    }
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__LEFT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 10, 0.125);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road2s.push_back(road);
    }
}

void ofApp::update(){
    for(int i = 0; i < numRoads; i++) {
        masker.beginLayer(i);
        {
            road1s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road1s.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            road2s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road2s.at(i).draw();
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        masker.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

In sharper focus.

Daily sketch

Sketch 2015-08-08

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 50, 100);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numRoads = 2;
    numRects = 6;
    masker.setup(numRoads + 1);
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 1, 6);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road1s.push_back(road);
    }
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 6, 1);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road2s.push_back(road);
    }

    for(int i = 0; i < numRects; i++) {
        rectAlphaMultipliers.push_back(ofRandom(0.1, 0.5));
    }
    rectWidth = gif.width / numRects;
}

void ofApp::update(){
    for(int i = 0; i < numRoads; i++) {
        masker.beginLayer(i);
        {
            road1s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road1s.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            road2s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road2s.at(i).draw();
        }
        masker.endMask(i);
    }

    masker.beginLayer(numRoads);
    {
        masker.drawLayers(0, numRoads-1);
    }
    masker.endLayer(numRoads);

    masker.beginMask(numRoads);
    {
        ofBackground(ofColor::black);
        for(int i = 0; i < numRects; i++) {
            float alpha = sin(ofGetFrameNum() * rectAlphaMultipliers.at(i));
            alpha = ofMap(alpha, -1, 1, 0, 255);
            ofSetColor(ofColor(ofColor::white, alpha));
            ofRect(i * rectWidth, 0, rectWidth, gif.height);
        }
    }
    masker.endMask(numRoads);
}

void ofApp::draw(){
    gif.begin();
    {
        masker.drawLayer(numRoads);
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Blurring over time.

Daily sketch

Sketch 2015-08-07

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 47);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numRoads = 2;
    masker.setup(numRoads);
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 1, 6);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road1s.push_back(road);
    }
    
    road.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 6, 1);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road2s.push_back(road);
    }
}

void ofApp::update(){
    for(int i = 0; i < numRoads; i++) {
        masker.beginLayer(i);
        {
            road1s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road1s.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            road2s.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            road2s.at(i).draw();
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        masker.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Both directions at once.

Daily sketch

Sketch 2015-08-06

        
void ofApp::setup(){
    ofSetWindowShape(1000, 1000);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 496, 576, 500, 500);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();

    //Anim 1
    numTissues = 16;
    numRoads = 4;
    masker1.setup(gif.size(), numRoads, ISOLATE_LAYERS);
    road.setup("road.png", gif.size(), 1.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    road.incrementTextureOffsetX(0.5);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 2, 0.5);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        roads.push_back(road);

        tissuesLoader.clear();
        scale = ofMap(i, 0, numRoads-1, 8, 0.5);
        tissue.setup("tissue.png", gif.size(), scale, TEXTURE_OFFSET_MIDDLE_CENTER);
        tissue.incrementTextureOffsetX(-0.5);
        tissue.setTextureOffsetY(ofRandom(2));
        for(int j = 0; j < numTissues; j++) {
            tissuesLoader.push_back(tissue);
        }
        tissues.push_back(tissuesLoader);
    }

    //Anim 2
    numLayers = 6;
    masker2.setup(gif.size(), numLayers, ISOLATE_LAYERS);
    masker2.toggleOverlay();
    wbw.setup("wbw.png", gif.size(), 1.0);
    for(int i = 0; i < numLayers; i++) {
        wbw.setTextureOffset(i);
        wbws.push_back(wbw);
    }
    bwb.setup("bwb.png", gif.size(), 2.0);
    for(int i = 0; i < numLayers; i++) {
        bwb.setTextureOffset(8-i);
        bwbs.push_back(bwb);
    }
}

void ofApp::update(){
    //Anim 1
    for(int i = 0; i < numRoads; i++) {
        masker1.beginLayer(i);
        {
            ofSetColor(i % 2 == 0 ? ofColor::red : ofColor::white);
            roads.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            roads.at(i).draw();
        }
        masker1.endLayer(i);
        
        masker1.beginMask(i);
        {
            ofSetColor(ofColor::white);
            ofBackground(ofColor::white);
            for(int j = 0; j < tissues.size(); j++) {
                tissues.at(i).at(j).incrementTextureOffsetY((j+1) * 0.0006);
                tissues.at(i).at(j).draw();
            }
        }
        masker1.endMask(i);
    }
    
    //Anim 2
    for(int i = 0; i < numLayers; i++) {
        wbws.at(i).incrementTextureOffset(-0.01, i % 2 == 0 ? -0.01 : 0.01);
        bwbs.at(i).incrementTextureOffset(i % 2 == 0 ? 0.01 : 0, i % 2 == 0 ? -0.01 : 0.01);
        
        masker2.beginLayer(i);
        {
            if(i % 2 == 0) {
                ofSetColor(ofColor:: red);
                for(int y = i * 2; y < gif.height; y+=10) {
                    ofLine(0, y, gif.width, y);
                }
            } else {
                wbws.at(i).draw();
            }
        }
        masker2.endLayer(i);
        
        masker2.beginMask(i);
        {
            bwbs.at(i).draw();
        }
        masker2.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        masker1.draw();
        masker2.draw();
    }
    gif.endCaptureDraw();
    masker1.drawOverlay();
    masker2.drawOverlay();
}

    

More of a remix.

Daily sketch

Sketch 2015-08-05

        
void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 35, 85);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numTissues = 16;
    numRoads = 4;
    masker.setup(numRoads);

    road.setup("road.png", 1.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    road.incrementTextureOffsetX(0.5);
    for(int i = 0; i < numRoads; i++) {
        scale = ofMap(i, 0, numRoads-1, 2, 0.5);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        roads.push_back(road);

        tissuesLoader.clear();
        scale = ofMap(i, 0, numRoads-1, 8, 0.5);
        tissue.setup("tissue.png", scale, TEXTURE_OFFSET_MIDDLE_CENTER);
        tissue.incrementTextureOffsetX(-0.5);
        tissue.setTextureOffsetY(ofRandom(2));
        for(int j = 0; j < numTissues; j++) {
            tissuesLoader.push_back(tissue);
        }
        tissues.push_back(tissuesLoader);
    }
}

void ofApp::update(){
    for(int i = 0; i < numRoads; i++) {
        masker.beginLayer(i);
        {
            ofSetColor(i % 2 == 0 ? ofColor::red : ofColor::white);
            roads.at(i).incrementTextureOffsetY(ofMap(i, 0, numRoads-1, -0.002, 0.002));
            roads.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofSetColor(ofColor::white);
            ofBackground(ofColor::white);
            for(int j = 0; j < tissues.size(); j++) {
                tissues.at(i).at(j).incrementTextureOffsetY((j+1) * 0.0006);
                tissues.at(i).at(j).draw();
            }
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        masker.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}

    

Layers.

Daily sketch