SketchPad

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

Sketch 2015-08-04

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

    tissue.setup("tissue.png", 2.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    tissue.incrementTextureOffsetX(-0.5);
    for(int i = 0; i < numTissues; i++) {
        tissues.push_back(tissue);
    }

    road.setup("road.png", 0.5, TEXTURE_OFFSET_MIDDLE_CENTER);
    road.incrementTextureOffsetX(0.5);
    for(int i = 0; i < numRoads; i++) {
        roads.push_back(road);
    }
    roads.at(1).incrementTextureOffsetY(0.5);
    roads.at(1).setTextureScale(0.75);
}

void ofApp::update(){
    masker.beginLayer(0);
    {
        ofSetColor(ofColor(ofColor::white, 255));
        roads.at(0).incrementTextureOffsetY(0.0048);
        roads.at(0).draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        ofBackground(ofColor::black);
        for(int i = 0; i < tissues.size(); i++) {
            tissues.at(i).incrementTextureOffsetY((i+1) * 0.001);
            tissues.at(i).draw();
        }
        ofSetColor(ofColor(ofColor::black, 128));
        ofRect(200, 0, 100, gif.height);
    }
    masker.endMask(0);
    
    masker.beginLayer(1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        masker.drawMask(0);
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        ofRect(120, 0, 30, gif.height);
        ofRect(350, 0, 30, gif.height);
    }
    masker.endMask(1);

    masker.beginLayer(2);
    {
        ofSetColor(ofColor(ofColor::white, 255));
        roads.at(2).incrementTextureOffsetY(-0.0012);
        roads.at(2).draw();
    }
    masker.endLayer(2);
    
    masker.beginMask(2);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        ofRect(0, 0, 120, gif.height);
        ofRect(380, 0, 120, gif.height);
    }
    masker.endMask(2);
}

void ofApp::draw(){
    gif.begin();
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::red);
        roads.at(1).incrementTextureOffsetY(-0.006);
        roads.at(1).draw();
        masker.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

No such thing as progress.

Daily sketch

Sketch 2015-08-03

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 80, 500, 500);
    masker.setup(500, 500, 3);
    masker.toggleOverlay();
    foil.setup("foil1.png", 500, 500, 6.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    glass.setup("glass1-inverted.png", 500, 500, 4.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    numFramesSince = 0;
}

void ofApp::update(){
    foil.incrementTextureOffsetY(0.05);
    alpha = ofMap(sin(ofGetFrameNum() * 0.25), -1, 1, 128, 200);
    
    masker.beginLayer(0);
    {
        gif.rotateAroundCenter(90);
        ofSetColor(ofColor(ofColor::white, ofGetFrameNum() % 3 == 0 ? alpha : 0));
        foil.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        ofBackground(ofColor::white);
    }
    masker.endMask(0);
    
    masker.beginLayer(1);
    {
        ofBackground(ofColor::red);
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        gif.rotateAroundCenter(90);
        if(ofRandom(1) > 0.93 && numFramesSince > 8) {
            ofSetColor(ofColor(ofColor::white, 255 - alpha));
            glass.setTextureOffset(ofRandom(2), ofRandom(2));
            glass.draw();
            numFramesSince = 0;
        } else {
            numFramesSince++;
            ofSetColor(ofColor(ofColor::black, 96));
            ofRect(0, 0, gif.width, gif.height);
        }
        
        gif.rotateAroundCenter(-90);
        ofSetColor(ofColor(ofColor::black, 255));
        ofRect(50, 200, 170, 90);
    }
    masker.endMask(1);

    masker.beginLayer(2);
    {
        ofSetColor(ofColor(ofColor::white, 128));
        ofRect(50, 200, 170, 90);
        gif.rotateAroundCenter(180);
        ofSetColor(ofColor(ofColor::white, alpha));
        foil.draw();
    }
    masker.endLayer(2);
    
    masker.beginMask(2);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor(ofColor::white, 255));
        ofRect(50, 200, 170, 90);
    }
    masker.endMask(2);
}

void ofApp::draw(){
    gif.begin();
    ofPushStyle();
    {
        ofEnableAlphaBlending();
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        masker.draw();
    }
    ofPopStyle();
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Gifs can't handle color complexity.

Daily sketch

Sketch 2015-08-02

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), -1, 500, 500);
    masker.setup(500, 500, 2);
    masker.toggleOverlay();
    foil.setup("foil1.png", 500, 500, 2.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    glass.setup("glass1-inverted.png", 500, 500, 1.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    numTraps = 0;
}

void ofApp::update(){
    masker.beginLayer(0);
    {
        foil.setTexturePosition(ofRandom(2), ofRandom(2));
        foil.setTextureScale(ofRandom(1.0, 6.0));
        ofSetColor(ofColor::red);
        foil.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        glass.setTexturePosition(ofRandom(2), ofRandom(2));
        glass.setTextureScale(ofRandom(1.0, 6.0));
        ofBackground(ofColor::white);
        if(ofRandom(1) > 0.25) {
            ofSetColor(ofColor(ofColor::white, 120));
            glass.draw();
        }
    }
    masker.endMask(0);

    masker.beginLayer(1);
    {
        ofSetColor(ofColor::white);
        foil.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        gif.rotateAroundCenter(35);
        ofRect(50, 200, 170, 90);
    }
    masker.endMask(1);
}

void ofApp::draw(){
    gif.begin();
    ofPushStyle();
    {
        if(ofGetFrameNum() == 0) ofBackground(ofColor::black);
        ofEnableAlphaBlending();
        ofSetColor(ofColor(ofColor::black, 32));
        ofRect(0, 0, gif.width, gif.height);
        
        ofSetColor(ofColor::white);
        float choice = ofRandom(1);
        if(choice > 0.75) {
            masker.drawLayers(0, 1);
        } else if(choice > 0.72) {
            numTraps++;
            ofSetColor(ofColor(ofColor::black, 32));
            ofRect(0, 0, gif.width, gif.height);
            ofSetColor(ofColor::white);
            masker.drawMask(1);
            gif.endCaptureDraw();
            gif.begin();
            ofSetColor(ofColor(ofColor::black, 32));
            ofRect(0, 0, gif.width, gif.height);
            ofSetColor(ofColor::white);
            masker.drawMask(1);
            gif.endCaptureDraw();
            gif.begin();
            ofSetColor(ofColor(ofColor::black, 32));
            ofRect(0, 0, gif.width, gif.height);
            ofSetColor(ofColor::white);
            masker.drawMask(1);
            gif.endCaptureDraw();
            gif.begin();
            ofSetColor(ofColor(ofColor::black, 32));
            ofRect(0, 0, gif.width, gif.height);
            ofSetColor(ofColor::white);
            masker.drawMask(1);
        } else {
            masker.drawLayer(1);
        }
    }
    ofPopStyle();
    gif.endCaptureDraw();
    masker.drawOverlay();
    if(numTraps == 2) {
        gif.render();
    }
}
    

It's a direction.

Daily sketch

Sketch 2015-08-01

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 63, 500, 500, ISOLATE_DRAWING);
    masker.setup(500, 500, 3, ISOLATE_LAYERS);
    masker.toggleOverlay();
    mask.setup("face-mask.png", 500, 500, 0.0625, TEXTURE_OFFSET_MIDDLE_LEFT);
    glass.setup("glass3.png", 500, 500);
    shapeSystem.setup();
    for(int i = 0; i < 105; i++) {
        shape.setupHollowSquare(40, 100);
        shape.setBlur(2);
        shape.rotateX(ofRandom(360));
        shape.setPosition(
            ofRandom(-60, gif.width + 60),
            ofRandom(-60, gif.width + 60));
        shape.setColor(ofColor(ofColor::red, ofRandom(5, 250)));
        shapes.push_back(shape);
    }
    for(int i = 0; i < shapes.size(); i++) {
        shapeSystem.add(shapes.at(i));
    }
}

void ofApp::update(){
    mask.incrementTextureOffsetY(0.03183098861838);
    glass.incrementTextureOffsetY(-0.03183098861838);
    glass.setTextureScale(ofMap(sin(ofGetFrameNum() * 0.1), -1, 1, 4, 1));
    mask.setTextureScale(ofMap(sin(ofGetFrameNum() * 0.1), -1, 1, 0.5, 1.2));
    for(int i = 0; i < shapes.size(); i++) {
        shapes.at(i).incrementRotateZ(i % 2 == 0 ? -5.71428571428571 : 5.71428571428571);
    }
    masker.beginLayer(0);
    {
        ofBackground(ofColor::black);
        shapeSystem.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        ofBackground(ofColor::black);
        mask.draw();
    }
    masker.endMask(0);
    
    masker.beginLayer(1);
    {
        ofSetColor(ofColor::red);
        glass.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        masker.drawLayer(0, false);
    }
    masker.endMask(1);
    
    masker.beginLayer(2);
    {
        ofBackground(ofColor::white);
        masker.drawLayer(1);
        masker.drawLayer(0);
    }
    masker.endLayer(2);
}

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

Taking turns

Daily sketch

Sketch 2015-07-31

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 15, 57);
    gif.fadeInOut(6, 4, ofColor::white, 0);
    card1.setup("glass-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card2.setup("glass-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card3.setup("glass-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card4.setup("card-mask.png", 0.75, TEXTURE_OFFSET_MIDDLE_LEFT);
    glass1.setup("card-1.png", 0.4, TEXTURE_OFFSET_TOP_LEFT);
    glass2.setup("card-2.png", 150.0, TEXTURE_OFFSET_BOTTOM_LEFT);
    glass3.setup("card-2.png", 110.0, TEXTURE_OFFSET_BOTTOM_RIGHT);
    glass4.setup("card-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();
}
    

Pretty much an inverse reaction

Daily sketch

Sketch 2015-07-30

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 160, 220, 500, 500, ISOLATE_DRAWING);
    gif.fadeInOut(2, 4, ofColor::white, 4);
    masker.setup(500, 500, 1, ISOLATE_LAYERS);
    masker.toggleOverlay();
    foil1.setup("foil.png", 500, 500, 2.0);
    foil1.setTextureOffset(8);
    foil2.setup("foil.png", 500, 500, 6.0);
    foil2.setTextureOffset(TEXTURE_OFFSET_BOTTOM_RIGHT);
    
    glass.setup("glass.png", 0.1);
    for(int i = 0; i < 60; i++) {
        glass.setTextureOffset(ofRandom(2), ofRandom(2));
        glasses.push_back(glass);
    }
    shapeSystem.setup();
    
    shapeSize = gif.width / 3;
    thickness = 90;
    halfShapeSize = shapeSize * 0.5;
    
    for(int i = 0; i < gif.width; i += shapeSize) {
        for(int j = 0; j < gif.height; j += shapeSize) {
            shape.setupHollowArc(30, thickness, shapeSize, 180);
            shape.setColor(ofColor::white);
            shape.setBlur(25);
            shape.setPosition(ofVec3f(i + halfShapeSize, j + halfShapeSize, 0));
            shape.rotateZ(ofRandom(360));
            shapes.push_back(shape);
        }
    }
    
    for(int i = 0; i < shapes.size(); i++) {
        shapeSystem.add(shapes.at(i));
    }
}

void ofApp::update(){
    for(int i = 0; i < shapes.size(); i++) {
        i % 2 == 0 ?
        shapes.at(i).incrementRotateZ(12) :
        shapes.at(i).incrementRotateZ(-12);
    }
    
    foil1.incrementTextureOffsetY(-0.01);
    
    masker.beginLayer(0);
    {
        ofSetColor(ofColor(ofColor::white, 255));
        foil1.draw();
        ofSetColor(ofColor(ofColor::white, 40));
        for(int i = 0; i < glasses.size(); i++) {
            glasses.at(i).incrementTextureOffsetY(0.002 * (i + 1));
            glasses.at(i).draw();
        }
    }
    masker.endLayer(0);

    masker.beginMask(0);
    {
        ofSetColor(ofColor::black, 16);
        ofRect(0, 0, gif.width, gif.height);
        
        ofEnableAlphaBlending();
        
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor::white);
        }
        shapeSystem.draw();
        
        gif.rotateAroundCenter(90);
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor(ofColor::black, 120));
        }
        shapeSystem.draw();
        
        gif.rotateAroundCenter(90);
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor(ofColor::black, 90));
        }
        shapeSystem.draw();
        
        gif.rotateAroundCenter(90);
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor(ofColor::black, 60));
        }
        shapeSystem.draw();
        
        ofDisableAlphaBlending();
    }
    masker.endMask(0);
}

void ofApp::draw(){
    gif.begin();
    {
        ofEnableAlphaBlending();
        //ofBackground(ofColor::white);
        ofSetColor(ofColor(ofColor::white, 40));
        foil2.incrementTextureOffset(0.0025, 0.003);
        foil2.draw();
        masker.draw();
        ofDisableAlphaBlending();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

Ironworks

Daily sketch

Sketch 2015-07-29

        void ofApp::setup(){
    increment = 0.005;
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 210, 250);
    gif.fadeInOut(8, 2, ofColor::white, 1);
    masker.setup(6);
    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);
    {
        ofSetColor(ofColor::red);
        //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);
    {
        ofSetColor(ofColor::green);
        transp3.incrementTextureOffsetX(increment);
        transp3.incrementTextureScale(increment);
        transp3.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        transp4.incrementTextureOffsetX(increment);
        transp4.incrementTextureScale(increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp4.draw();
    }
    masker.endMask(1);
    
    masker.beginLayer(2);
    {
        transp5.incrementTextureOffset(increment * 8, increment);
        transp5.incrementTextureScale(-increment);
        transp5.draw();
    }
    masker.endLayer(2);
    
    masker.beginMask(2);
    {
        transp6.incrementTextureOffset(-increment * 8, -increment);
        transp6.incrementTextureScale(increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp6.draw();
    }
    masker.endMask(2);
    
    masker.beginLayer(3);
    {
        ofSetColor(ofColor::red);
        //transp1.incrementTextureOffsetY(-increment);
        transp1.incrementTextureScale(-increment);
        transp1.draw();
    }
    masker.endLayer(3);
    
    masker.beginMask(3);
    {
        //transp2.incrementTextureOffsetY(-increment);
        transp2.incrementTextureScale(-increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp2.draw();
    }
    masker.endMask(3);
    
    masker.beginLayer(4);
    {
        ofSetColor(ofColor::green);
        transp3.incrementTextureOffsetX(increment);
        transp3.incrementTextureScale(increment);
        transp3.draw();
    }
    masker.endLayer(4);
    
    masker.beginMask(4);
    {
        transp4.incrementTextureOffsetX(increment);
        transp4.incrementTextureScale(increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp4.draw();
    }
    masker.endMask(4);
    
    masker.beginLayer(5);
    {
        transp5.incrementTextureOffset(increment * 8, increment);
        transp5.incrementTextureScale(-increment);
        transp5.draw();
    }
    masker.endLayer(5);
    
    masker.beginMask(5);
    {
        transp6.incrementTextureOffset(-increment * 8, -increment);
        transp6.incrementTextureScale(increment*0.5);
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        transp6.draw();
    }
    masker.endMask(5);
}

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

Layer wipes

Daily sketch