SketchPad

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

Sketch 2015-09-08

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(30);
    gif.fadeInOut(1, 2, ofColor::black);
    gif.enableTextOverlay();
    pattern1.setup(&gif);
    masker.setup(1);
    masker.toggleOverlay();
    img1.setup("foil-large.png");
    img2.setup("face-full.png", 2.0, TEXTURE_OFFSET__TOP__LEFT_TO_CENTER);
    img2.incrementTextureOffsetY(0.27);
    
    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    pattern1.update();
    masker.beginLayer(0);
    {
        img2.incrementTextureOffsetY(-0.004);
        img2.incrementTextureScale(-0.15);
        img2.draw();
    }
    masker.endLayer(0);

    masker.beginMask(0);
    {
        pattern1.draw();
    }
    masker.endMask(0);
}

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

void Pattern1::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    numRoads = 2;
    masker.setup(numRoads + 1);
    rectWidth = gif->width / 2;
    halfRectWidth = rectWidth * 0.5;
    
    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, 5, 1.3);
        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, 0.7, 2);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road2s.push_back(road);
    }
}

void Pattern1::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);
        ofRect(gif->halfWidth - halfRectWidth - 1, 0, rectWidth + 2, gif->height);
    }
    masker.endMask(numRoads);
}

void Pattern1::draw() {
    ofPushMatrix();
    masker.drawLayer(numRoads);
    gif->rotateAroundCenter(180);
    ofTranslate(-rectWidth, 0);
    masker.drawLayer(numRoads);
    ofTranslate(rectWidth*2, 0);
    masker.drawLayer(numRoads);
    ofPopMatrix();
}
    

Up and down

Daily sketch

Sketch 2015-09-07

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(40);
    gif.fadeInOut(1, 2, ofColor::white);
    gif.enableTextOverlay();
    numRoads = 2;
    masker.setup(numRoads + 1);
    rectWidth = gif.width / 3;
    halfRectWidth = rectWidth * 0.5;
    
    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, 5, 1.3);
        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, 0.7, 2);
        road.setTextureScale(scale);
        road.setTextureOffsetY(ofRandom(2));
        road2s.push_back(road);
    }
    
    ofSetWindowShape(1200, 1200);
    masker.toggleOverlay();
}

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);
        ofRect(gif.halfWidth - halfRectWidth - 1, 0, rectWidth + 2, gif.height);
    }
    masker.endMask(numRoads);
}

void ofApp::draw(){
    gif.begin();
    {
        ofPushMatrix();
        masker.drawLayer(numRoads);
        gif.rotateAroundCenter(180);
        ofTranslate(-rectWidth, 0);
        masker.drawLayer(numRoads);
        ofTranslate(rectWidth*2, 0);
        masker.drawLayer(numRoads);
        ofPopMatrix();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Face-saving.

Daily sketch

Sketch 2015-09-06

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(54);
    masker.setup(2);
    img1.setup("foil1.png");
    img2.setup("glass3.png");
    img3.setup("foil1.png");
    img4.setup("glass1-inverted.png");
    img5.setup("glass1-inverted.png");

    masker.toggleOverlay();
    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    if(ofGetFrameNum() % 18 == 0) {
        img2.setTextureOffset(ofRandom(2), ofRandom(2));
        img2.setTextureScale(3);
    }
    if(ofGetFrameNum() % 6 == 0) {
        img1.setTexturePosition(ofRandom(2), ofRandom(2));
        img1.setTextureScale(2);
        img3.setTexturePosition(ofRandom(2), ofRandom(2));
        img3.setTextureScale(2);
        img4.setTexturePosition(ofRandom(2), ofRandom(2));
        img4.setTextureScale(ofRandom(1.0, 6.0));
        img5.setTexturePosition(ofRandom(2), ofRandom(2));
        img5.setTextureScale(ofRandom(1.0, 6.0));
    }
    
    masker.beginLayer(0);
    {
        img1.incrementTextureOffsetX(0.01);
        img1.incrementTextureScale(0.05);
        ofSetColor(ofColor(106, 68, 71));
        img1.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        img4.incrementTextureOffsetY(0.04);
        img4.incrementTextureScale(0.84);
        ofBackground(ofColor::white);
        ofSetColor(ofColor(ofColor::white, 200));
        img4.draw();
    }
    masker.endMask(0);

    masker.beginLayer(1);
    {
        img3.incrementTextureOffsetX(-0.01);
        img3.incrementTextureScale(-0.033);
        ofSetColor(ofColor(106, 68, 71));
        img3.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        img5.incrementTextureOffsetY(-0.01);
        img5.incrementTextureScale(0.25);
        ofBackground(ofColor::white);
        ofSetColor(ofColor(ofColor::white, 240));
        img5.draw();
    }
    masker.endMask(1);
}

void ofApp::draw(){
    gif.begin();
    ofPushStyle();
    {
        img2.incrementTextureScale(-0.1);
        img2.draw();
        ofSetColor(ofColor::white);
        masker.draw();
    }
    ofPopStyle();
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

Blockage.

Daily sketch

Sketch 2015-09-05

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(45);
    masker.setup(2);
    img1.setup("pcb-bw.png", 2.0);
    img2.setup("glass3.png", 1.0);
    img3.setup("foil1.png", 2.0);
    img4.setup("glass1-inverted.png", 1.0);

    masker.toggleOverlay();
    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    if(ofGetFrameNum() % 9 == 0) {
        img1.setTextureOffset(ofRandom(2), ofRandom(2));
        img1.setTextureScale(ofRandom(0.5, 1.5));
        img2.setTextureOffset(ofRandom(2), ofRandom(2));
        img2.setTextureScale(ofRandom(0.5, 1.5));
    }
    if(ofGetFrameNum() % 3 == 0) {
        masker.beginLayer(0);
        {
            img3.setTexturePosition(ofRandom(2), ofRandom(2));
            img3.setTextureScale(ofRandom(1.0, 6.0));
            ofSetColor(ofColor::red);
            img3.draw();
        }
        masker.endLayer(0);
        
        masker.beginMask(0);
        {
            img4.setTexturePosition(ofRandom(2), ofRandom(2));
            img4.setTextureScale(ofRandom(1.0, 6.0));
            ofBackground(ofColor::white);
            if(ofRandom(1) > 0.25) {
                ofSetColor(ofColor(ofColor::white, 120));
                img4.draw();
            }
        }
        masker.endMask(0);
    } else {
        img1.incrementTextureScale(0.06);
        masker.beginLayer(1);
        {
            img1.draw();
        }
        masker.endLayer(1);
        
        masker.beginMask(1);
        {
            img1.draw();
        }
        masker.endMask(1);
    }
}

void ofApp::draw(){
    gif.begin();
    ofPushStyle();
    {
        img2.incrementTextureScale(-0.048);
        img2.draw();
        ofSetColor(ofColor::white);
        masker.draw();
    }
    ofPopStyle();
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

This doesn't make any sense.

Daily sketch

Sketch 2015-09-04

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(50);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    pattern1.setup(&gif);
    pattern2.setup(&gif);
    pattern3.setup(&gif);
    masker.setup(2);
    masker.toggleOverlay();
    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    pattern1.update();
    pattern2.update();
    pattern3.update();
    
    masker.beginLayer(0);
    {
        pattern2.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        gif.rotateAroundCenter(180);
        pattern1.draw();
    }
    masker.endMask(0);

    masker.beginLayer(1);
    {
        pattern3.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        ofEnableSmoothing();
        gif.rotateAroundCenter(ofGetFrameNum());
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        ofTriangle(250, 200, 0, 700, 500, 700);
    }
    masker.endMask(1);
}

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

void Pattern1::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    numLayers = 5;
    numRects = gif->width * 0.5;
    masker.setup(numLayers + 1);
    
    img.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, 16, -3);
        img.setTextureScale(scale);
        img.setTextureOffsetY(ofRandom(2));
        textures.push_back(img);
    }
    
    img.setup("pcb2.png", 1.0, TEXTURE_OFFSET__MIDDLE__LEFT_TO_CENTER);
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, 2, 1);
        img.setTextureScale(scale);
        img.setTextureOffsetY(ofRandom(2));
        masks.push_back(img);
    }
    
    for(int i = 0; i < numRects; i++) {
        rectAlphaMultipliers.push_back(ofRandom(0.1, 0.5));
    }
    rectWidth = gif->width / numRects;
}

void Pattern1::update() {
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            textures.at(i).incrementTextureOffsetY(ofMap(i, 0, numLayers-1, -0.001, 0.002));
            textures.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            masks.at(i).incrementTextureOffsetY(ofMap(i, 0, numLayers-1, -0.001, 0.009));
            masks.at(i).draw();
        }
        masker.endMask(i);
    }
    
    masker.beginLayer(numLayers);
    {
        masker.drawLayers(0, numLayers-1);
    }
    masker.endLayer(numLayers);
    
    masker.beginMask(numLayers);
    {
        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(numLayers);
}

void Pattern1::draw() {
    ofBackground(ofColor::white);
    masker.draw();
    for(int i = 0; i < 3; i++) {
        masker.drawLayer(numLayers);
    }
    masker.drawOverlay();
}

void Pattern2::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    numLayers = 3;
    numRects = gif->width * 0.5;
    masker.setup(numLayers);
    
    img.setup("pcb2.png", 1.0, TEXTURE_OFFSET__MIDDLE__LEFT_TO_CENTER);
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, 16, 5);
        img.setTextureScale(scale);
        img.setTextureOffsetY(ofRandom(2));
        textures.push_back(img);
    }
    
    img.setup("road.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, 4, 1);
        img.setTextureScale(scale);
        img.setTextureOffsetY(ofRandom(2));
        masks.push_back(img);
    }
    
    for(int i = 0; i < numRects; i++) {
        rectAlphaMultipliers.push_back(ofRandom(0.1, 0.5));
    }
    rectWidth = gif->width / numRects;
}

void Pattern2::update() {
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            ofSetColor(ofColor::white);
            textures.at(i).incrementTextureOffsetY(ofMap(i, 0, numLayers-1, -0.002, 0.002));
            textures.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofSetColor(ofColor::white);
            masks.at(i).incrementTextureOffsetY(ofMap(i, 0, numLayers-1, -0.002, 0.002));
            masks.at(i).draw();
        }
        masker.endMask(i);
    }
}

void Pattern2::draw() {
    ofBackground(ofColor::white);
    masker.draw();
}

void Pattern3::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    layerIncrement = 0.005;
    maskIncrement = 0.0002;
    
    numLayers = 32;
    numMasksPerLayer = 6;
    masker.setup(numLayers);
    
    layer.setup("glass3.png");
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, 4, 2.5);
        layer.setTextureScale(scale);
        layer.setTextureOffset(i % 2 == 0 ? TEXTURE_OFFSET__MIDDLE__LEFT_TO_CENTER : TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
        layer.setTextureOffsetY(ofRandom(2));
        layers.push_back(layer);
        
        maskLoader.clear();
        scale = ofMap(i, 0, numLayers-1, 6, 0.33);
        mask.setup("tissue.png", scale, TEXTURE_OFFSET__MIDDLE__LEFT_TO_CENTER);
        for(int j = 0; j < numMasksPerLayer; j++) {
            mask.setTextureOffsetY(ofRandom(2));
            maskLoader.push_back(mask);
        }
        masks.push_back(maskLoader);
    }
}

void Pattern3::update() {
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            ofSetColor(ofColor(ofColor::red));
            increment = ofMap(i, 0, numLayers-1, layerIncrement, -layerIncrement);
            layers.at(i).incrementTextureOffsetY(increment);
            layers.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofSetColor(ofColor::white);
            ofBackground(ofColor::white);
            for(int j = 0; j < numMasksPerLayer; j++) {
                increment = (j+1) * ofMap(i, 0, numLayers-1, maskIncrement, -maskIncrement);
                masks.at(i).at(j).incrementTextureOffsetY(increment);
                masks.at(i).at(j).draw();
            }
        }
        masker.endMask(i);
    }
}

void Pattern3::draw() {
    ofSetColor(ofColor(ofColor::red));
    layers.at(0).draw();
    masker.draw();
}
    

Mixing 2015-08-27, 2015-08-28 and 2015-08-15

Daily sketch

Sketch 2015-09-03

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(170, 220);
    gif.fadeInOut(6, 4, ofColor::white, 0);
    card1.setup("card-1.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card2.setup("glass-2.png", 1.0, TEXTURE_OFFSET_MIDDLE_RIGHT);
    card3.setup("card-mask.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("card-1.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);
    ofSetWindowShape(1200, 1000);
    masker.toggleOverlay();
}

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.004);
        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.001);
        card4.draw();
    }
    masker.endMask(3);
}

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

A sheer drop.

Daily sketch

Sketch 2015-09-02

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(30, 80);
    gif.fadeInOut(5, 3, ofColor::black);

    numLayers = 2;
    masker.setup(numLayers, ISOLATE_LAYERS);
    masker.toggleOverlay();
    
    img1.setup("pcb-bw.png");
    img2.setup("test.png");
    
    numRects = 200;
    for(int i = 0; i < numRects; i++) {
        rectAlphaMultipliers.push_back(ofRandom(0.1, 0.3));
    }
    rectHeight = (gif.height / numRects) + 1;
    
    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    masker.beginLayer(0);
    {
        ofBackground(ofColor::black);
        for(int i = 0; i < numRects; i++) {
            alpha = sin(ofGetFrameNum() * rectAlphaMultipliers.at(i));
            alpha = ofMap(alpha, -1, 1, -100, 255);
            if(alpha < 0) alpha = 0;
            ofSetColor(ofColor(ofColor::white, alpha));
            ofRect(0, i * rectHeight, gif.width, rectHeight);
        }
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        ofBackground(ofColor::black);
        img1.incrementTextureOffsetY(-0.2);
        img1.draw();
    }
    masker.endMask(0);

    masker.beginLayer(1);
    {
        img1.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        gif.rotateAroundCenter(90);
        masker.drawLayer(0, false);
    }
    masker.endMask(1);
}

void ofApp::draw(){
    gif.begin();
    {
        ofEnableAlphaBlending();
        ofBackground(ofColor::black);
        img2.draw();
        masker.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

It's only a test

Daily sketch