SketchPad

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

Sketch 2015-07-28

        void ofApp::setup(){
    increment = 0.01;
    numLayers = 3;
    filename = "leaf-transp2.png";

    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 12, 60);

    masker.setup(numLayers);
    plane.setup(filename);
    for(int i = 0; i < numLayers; i++) {
        layers.push_back(plane);
        masks.push_back(plane);
    }
    reset();
}

void ofApp::reset() {
    offsetIncrements.clear();
    scaleIncrements.clear();

    for(int i = 0; i < numLayers; i++) {
        layers.at(i).setTextureScale(ofRandom(0.1, 1.5));
        layers.at(i).setTexturePosition(ofRandom(2), ofRandom(2));
        masks.at(i).setTextureScale(ofRandom(0.1, 1.5));
        masks.at(i).setTexturePosition(ofRandom(2), ofRandom(2));
        offsetIncrements.push_back(ofVec2f(ofRandom(-increment, increment), ofRandom(-increment, increment)));
        scaleIncrements.push_back(ofRandom(-increment*20, increment*20));
    }
}

void ofApp::update(){
    if(ofGetFrameNum() % 12 == 0) {
        reset();
    }
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            if(ofGetFrameNum() % 3 == 0 && i == 0) {
                ofBackground(ofColor(ofColor::white, 64));
            }
            if(ofGetFrameNum() % 12 == 0) {
                ofBackground(ofColor(ofColor::white, 128));
            }
            layers.at(i).incrementTextureOffset(offsetIncrements.at(i));
            layers.at(i).incrementTextureScale(scaleIncrements.at(i));
            layers.at(i).draw();
        }
        masker.endLayer(i);

        masker.beginMask(i);
        {
            ofBackground(ofColor::white);
            masks.at(i).incrementTextureOffset(-offsetIncrements.at(i));
            masks.at(i).incrementTextureScale(-scaleIncrements.at(i));
            masks.at(i).draw();
        }
        masker.endMask(i);
    }
}

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

Easing back and forth

Daily sketch

Sketch 2015-07-27

        void ofApp::setup(){
    increment = 0.01;
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 116, 156);
    gif.fadeInOut(8, 2, ofColor::white, 1);
    masker.setup(3);
    transp1.setup("foil-large-transp.png");
    transp1.setTexturePositionY(0.5);
    transp2.setup("road-transp.png");
    transp2.setTexturePositionY(0.5);
    transp3.setup("road-transp.png");
    transp3.setTexturePositionY(0.5);
    transp4.setup("foil-large-transp.png");
    transp4.setTexturePositionY(0.5);
    transp5.setup("foil-large-transp.png");
    transp5.setTexturePositionY(0.5);
    transp6.setup("road-transp.png");
    transp6.setTexturePositionY(0.5);
}

void ofApp::update(){
    masker.beginLayer(0);
    {
        transp1.incrementTextureOffsetY(-increment);
        transp1.incrementTextureScale(-increment);
        transp1.draw();
    }
    masker.endLayer(0);

    masker.beginMask(0);
    {
        transp2.incrementTextureOffsetY(-increment);
        transp2.incrementTextureScale(-increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp2.draw();
    }
    masker.endMask(0);
    
    masker.beginLayer(1);
    {
        transp3.incrementTextureOffsetY(increment);
        transp3.incrementTextureScale(increment);
        transp3.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        transp4.incrementTextureOffsetY(increment);
        transp4.incrementTextureScale(increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp4.draw();
    }
    masker.endMask(1);
    
    masker.beginLayer(2);
    {
        transp5.incrementTextureOffsetX(increment);
        transp5.incrementTextureScale(-increment);
        transp5.draw();
    }
    masker.endLayer(2);
    
    masker.beginMask(2);
    {
        transp6.incrementTextureOffsetX(-increment);
        transp6.incrementTextureScale(increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp6.draw();
    }
    masker.endMask(2);
}

void ofApp::draw(){
    gif.begin();
    {
        ofBackground(ofColor::white);
        masker.draw();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

Texture explosion

Daily sketch

Sketch 2015-07-26

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 60, 100);
    gif.fadeInOut(6, 4, ofColor::white, 0);
    card1.setup("card-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card2.setup("card-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card3.setup("card-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card4.setup("card-mask.png", 0.75, TEXTURE_OFFSET_MIDDLE_LEFT);
    glass1.setup("glass-1.png", 0.4, TEXTURE_OFFSET_TOP_LEFT);
    glass2.setup("glass-2.png", 150.0, TEXTURE_OFFSET_BOTTOM_LEFT);
    glass3.setup("glass-2.png", 110.0, TEXTURE_OFFSET_BOTTOM_RIGHT);
    glass4.setup("glass-2.png", 120.0, TEXTURE_OFFSET_TOP_LEFT);
    masker.setup(4, ISOLATE_LAYERS);
    card4.incrementTextureOffset(-0.1, -0.5);
}

void ofApp::update(){
    masker.beginLayer(0);
    {
        ofSetColor(ofColor::red);
        card1.incrementTextureOffsetX(0.003);
        card1.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        glass2.incrementTextureOffsetX(0.005);
        glass2.incrementTextureScale(0.1);
        glass2.draw();
    }
    masker.endMask(0);

    masker.beginLayer(1);
    {
        ofSetColor(ofColor::red);
        card2.incrementTextureOffsetX(0.002);
        card2.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        glass3.incrementTextureOffsetX(0.002);
        glass3.incrementTextureScale(0.05);
        glass3.draw();
    }
    masker.endMask(1);

    masker.beginLayer(2);
    {
        ofSetColor(ofColor::red);
        card3.incrementTextureOffsetX(0.005);
        card3.draw();
    }
    masker.endLayer(2);
    
    masker.beginMask(2);
    {
        glass4.incrementTextureOffsetX(0.008);
        glass4.incrementTextureScale(0.14);
        glass4.draw();
    }
    masker.endMask(2);

    masker.beginLayer(3);
    {
        glass1.incrementTextureOffset(-0.0025, 0.004);
        glass1.incrementTextureScale(0.014);
        glass1.draw(0, -gif.halfHeight);
        glass1.draw(0, gif.halfHeight, TEXTURE_FLIP_HORIZONTAL);
    }
    masker.endLayer(3);
    
    masker.beginMask(3);
    {
        card4.incrementTextureScale(0.0075);
        card4.incrementTextureOffsetX(0.004);
        card4.draw();
    }
    masker.endMask(3);
}

void ofApp::draw(){
    gif.begin();
    {
        gif.rotateAroundCenter(90);
        card1.draw();
        masker.draw();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

In sequence.

Daily sketch

Sketch 2015-07-25

        void ofApp::setup(){
    increment = 0.0025;
    numLayers = 3;
    filename = "foil-large-transp.png";

    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 8, 56);

    masker.setup(numLayers);
    plane.setup(filename);
    for(int i = 0; i < numLayers; i++) {
        layers.push_back(plane);
        masks.push_back(plane);
    }
    reset();
}

void ofApp::reset() {
    offsetIncrements.clear();
    scaleIncrements.clear();

    for(int i = 0; i < numLayers; i++) {
        layers.at(i).setTextureScale(ofRandom(4.5, 5.5));
        layers.at(i).setTexturePosition(ofRandom(2), ofRandom(2));
        masks.at(i).setTextureScale(ofRandom(4.5, 5.5));
        masks.at(i).setTexturePosition(ofRandom(2), ofRandom(2));
        offsetIncrements.push_back(ofVec2f(ofRandom(-increment, increment), ofRandom(-increment, increment)));
        scaleIncrements.push_back(ofRandom(-increment*6, increment*6));
    }
}

void ofApp::update(){
    if(ofGetFrameNum() % 8 == 0) {
        reset();
    }
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            layers.at(i).incrementTextureOffset(offsetIncrements.at(i));
            layers.at(i).incrementTextureScale(scaleIncrements.at(i));
            layers.at(i).draw();
        }
        masker.endLayer(i);

        masker.beginMask(i);
        {
            ofBackground(ofColor::white);
            masks.at(i).incrementTextureOffset(-offsetIncrements.at(i));
            masks.at(i).incrementTextureScale(-scaleIncrements.at(i));
            masks.at(i).draw();
        }
        masker.endMask(i);
    }
}

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

Revealing a metallic surface

Daily sketch

Sketch 2015-07-24

        void ofApp::setup(){
    increment = 0.02;
    numLayers = 3;
    filename = "condensation-transp2.png";

    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 240, 280);
    gif.fadeInOut(8, 2, ofColor::white, 1);

    masker.setup(3);
    plane.setup(filename);
    plane.setTexturePositionY(0.5);
    for(int i = 0; i < numLayers; i++) {
        layers.push_back(plane);
        masks.push_back(plane);
    }
}

void ofApp::update(){
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            if(i == 0) {
                layers.at(i).incrementTextureOffsetY(-increment);
                layers.at(i).incrementTextureScale(-increment);
            }
            if(i == 1) {
                layers.at(i).incrementTextureOffsetY(increment);
                layers.at(i).incrementTextureScale(increment);
            }
            if(i == 2) {
                layers.at(i).incrementTextureOffsetX(increment);
                layers.at(i).incrementTextureScale(-increment);
            }
            layers.at(i).draw();
        }
        masker.endLayer(i);

        masker.beginMask(i);
        {
            ofBackground(ofColor::white);
            ofSetColor(ofColor::white);
            if(i == 0) {
                masks.at(i).incrementTextureOffsetY(-increment);
                masks.at(i).incrementTextureScale(-increment*0.5);
            }
            if(i == 1) {
                masks.at(i).incrementTextureOffsetY(increment);
                masks.at(i).incrementTextureScale(increment*0.5);
            }
            if(i == 2) {
                masks.at(i).incrementTextureOffsetX(-increment);
                masks.at(i).incrementTextureScale(increment*0.5);
            }
            masks.at(i).draw();
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        ofBackground(ofColor::white);
        masker.draw();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

Based on the same technique from the 13th

Daily sketch

Sketch 2015-07-23

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    numLayers = 2;
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 100, 180, 500, 500, ISOLATE_DRAWING);
    gif.fadeInOut(2, 4, 4);
    masker.setup(500, 500, numLayers, ISOLATE_LAYERS);
    masker.toggleOverlay();
    foil.setup("foil.png", 500, 500, 6.0);
    wbw.setup("wbw.png", 500, 500, 0.5);
    for(int i = 0; i < numLayers; i++) {
        wbw.setTextureOffset(i);
        wbws.push_back(wbw);
    }
    mask.setup("foil.png", 500, 500, 2.0);
    for(int i = 0; i < numLayers; i++) {
        mask.setTextureOffset(8-i);
        masks.push_back(mask);
    }
}

void ofApp::update(){
    for(int i = 0; i < numLayers; i++) {
        wbws.at(i).incrementTextureOffset(-0.01, i % 2 == 0 ? -0.01 : 0.01);
        masks.at(i).incrementTextureOffset(i % 2 == 0 ? 0.005 : 0, i % 2 == 0 ? -0.005 : 0.01);
        
        masker.beginLayer(i);
        {
            if(i % 2 == 0) {
                ofSetColor(ofColor::powderBlue);
                for(int y = i * 2; y < gif.height; y+=4) {
                    ofLine(0, y, gif.width, y);
                }
            } else {
                wbws.at(i).draw();
            }
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            masks.at(i).draw();
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        foil.incrementTextureOffset(0.0015, 0.0015);
        foil.draw();
        masker.draw();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

Floating

Daily sketch

Sketch 2015-07-22

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    numLayers = 6;
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 80, 500, 500, ISOLATE_DRAWING);
    gif.fadeInOut(2, 4, 4);
    masker.setup(500, 500, numLayers, ISOLATE_LAYERS);
    masker.toggleOverlay();
    glass.setup("glass3.png", 500, 500, 2.0);
    wbw.setup("wbw.png", 500, 500, 0.5);
    for(int i = 0; i < numLayers; i++) {
        wbw.setTextureOffset(i);
        wbws.push_back(wbw);
    }
    bwb.setup("bwb.png", 500, 500, 0.25);
    for(int i = 0; i < numLayers; i++) {
        bwb.setTextureOffset(8-i);
        bwbs.push_back(bwb);
    }
}

void ofApp::update(){
    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);
        
        masker.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();
            }
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            bwbs.at(i).draw();
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        glass.incrementTextureOffsetY(0.01);
        glass.draw();
        masker.draw();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

An endless process

Daily sketch