SketchPad

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

Sketch 2015-09-01

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(16, 54);
    gif.fadeInOut(2, 1, ofColor::white);
    gif.enableTextOverlay();
    
    pattern1.setup(&gif);
    pattern2.setup(&gif);

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

void ofApp::update(){
    pattern1.update();
    pattern2.update();
}

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

void Pattern1::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    layerIncrement = 0.01;
    maskIncrement = 0.0004;
    
    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 Pattern1::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 Pattern1::draw() {
    ofSetColor(ofColor(ofColor::red));
    layers.at(0).draw();
    masker.draw();
}

void Pattern2::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    numRects = 7;
    numLayers = 1;
    masker.setup(numLayers, ISOLATE_LAYERS);
    masker.toggleOverlay();
    
    img1.setup("pcb2.png", 1.0, TEXTURE_OFFSET__TOP_TO_MIDDLE__RIGHT_TO_CENTER);
    
    for(int i = 0; i < numRects; i++) {
        rectAlphaMultipliers.push_back(ofRandom(0.05, 0.3));
    }
    rectWidth = (gif->width / numRects) + 1;
}

void Pattern2::update() {
    masker.beginLayer(0);
    {
        ofBackground(ofColor::black);
        img1.incrementTextureOffsetY(0.04);
        img1.draw(0, gif->halfHeight);
        img1.draw(0, -gif->halfHeight, TEXTURE_FLIP_HORIZONTAL);
    }
    masker.endLayer(0);
    
    masker.beginMask(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(i * rectWidth, 0, rectWidth, gif->height);
        }
    }
    masker.endMask(0);
}

void Pattern2::draw() {
    ofEnableAlphaBlending();
    masker.draw();
}
    

Mixing 2015-08-25 with 2015-08-15

Daily sketch

Sketch 2015-08-31

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(280, 330);
    gif.fadeInOut(2, 3, ofColor::white);
    
    pattern1.setup(&gif);
    pattern2.setup(&gif);

    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    pattern1.update();
    pattern2.update();
}

void ofApp::draw(){
    gif.begin();
    {
        ofEnableAlphaBlending();
        pattern1.draw();
        pattern2.draw();
    }
    gif.endCaptureDraw();
}

void Pattern1::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    masker.setup(1, ISOLATE_LAYERS);
    masker.toggleOverlay();
    
    img1.setup("pcb-bw.png", 2.0);
    img2.setup("glass3.png", 0.2);
}

void Pattern1::update() {
    masker.beginLayer();
    {
        img1.draw();
    }
    masker.endLayer();
    
    masker.beginMask();
    {
        img1.draw();
    }
    masker.endMask();
}

void Pattern1::draw() {
    ofPushMatrix();
    ofEnableAlphaBlending();
    img1.incrementTextureScale(0.06);
    img2.incrementTextureScale(0.06);
    
    ofSetColor(ofColor::white, ceil(ofRandom(6)) * 13);
    img2.draw();
    
    masker.draw();
    if(ofRandom(1) > 0.75) {
        ofSetColor(ofColor::white, 255);
        gif->rotateAroundCenter(90 * floor(ofRandom(4)));
        
        for(int i = 0; i < ofRandom(2, 10); i++) {
            masker.draw();
        }
    } else if(ofRandom(1) > 0.75) {
        img1.setTexturePosition(ofRandom(2), ofRandom(2));
        img1.setTextureScale(ofRandom(0.2, 2));
        img2.setTextureScale(ofRandom(1, 3));
        gif->rotateAroundCenter(90 * floor(ofRandom(4)));
        ofSetColor(ofColor::white, ofRandom(10, 20));
        img1.draw();
    }
    ofPopMatrix();
}

void Pattern2::setup(ofxGifEncoderTemplate *_gif) {
    gif = _gif;
    layerIncrement = 0.01;
    maskIncrement = 0.0005;
    
    numLayers = 20;
    masker.setup(numLayers);
    
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, 0.25, 1);

        img.setup("rust-tall2.png");
        img.setTextureScale(scale);
        img.setTextureOffset(i % 2 == 0 ? TEXTURE_OFFSET_TOP_LEFT : TEXTURE_OFFSET_TOP_RIGHT);
        img.setTextureOffsetY(ofRandom(2));
        layers.push_back(img);
        
        scale = ofMap(i, 0, numLayers-1, 0.5, 1.3);
        img.setup("circle-feather.png", scale, TEXTURE_OFFSET_MIDDLE_CENTER);
        img.setTextureOffsetY(ofRandom(2));
        masks.push_back(img);
    }
}

void Pattern2::update() {
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            gif->rotateAroundCenter(i * 90);
            ofSetColor(ofColor(ofColor::white, 160));
            increment = ofMap(i, 0, numLayers-1, layerIncrement, -layerIncrement);
            layers.at(i).incrementTextureScale(i % 2 == 0 ? increment : -increment * 8);
            layers.at(i).incrementTextureOffsetX((i % 2 == 0 ? increment : -increment) * ofRandom(-2, 27));
            layers.at(i).incrementTextureOffsetY((i % 2 == 0 ? -increment : increment) * ofRandom(-2, 27));
            layers.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofSetColor(ofColor::white);
            ofBackground(ofColor::white);
            increment = ofMap(i, 0, numLayers-1, maskIncrement, -maskIncrement);
            masks.at(i).incrementTextureOffsetY(increment);
            i % 2 == 0 ? masks.at(i).draw() : masker.drawLayer(i - 1, false);
        }
        masker.endMask(i);
    }
}

void Pattern2::draw() {
    masker.drawLayer(4);
    masker.drawLayer(9);
    masker.drawLayer(12);
    masker.drawLayer(13);
    masker.drawLayer(16);
}
    

The murky underneath.

Daily sketch

Sketch 2015-08-30

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(10, 50);

    masker.setup(1, ISOLATE_LAYERS);
    masker.toggleOverlay();

    img2.setup("glass3.png", 0.2);
    img1.setup("pcb-bw.png", 2.0);

    ofSetWindowShape(1200, 1200);
}

void ofApp::update(){
    masker.beginLayer();
    {
        img1.draw();
    }
    masker.endLayer();
    
    masker.beginMask();
    {
        img1.draw();
    }
    masker.endMask();
}

void ofApp::draw(){
    gif.begin();
    {
        ofEnableAlphaBlending();
        img2.incrementTextureScale(0.006);

        masker.draw();
        if(ofRandom(1) > 0.75) {
            ofSetColor(ofColor::white, 255);
            gif.rotateAroundCenter(90 * floor(ofRandom(4)));

            for(int i = 0; i < ofRandom(2, 10); i++) {
                masker.draw();
            }
        } else if(ofRandom(1) > 0.75) {
            img1.setTexturePosition(ofRandom(2), ofRandom(2));
            img1.setTextureScale(ofRandom(0.2, 2));
            img2.setTextureScale(ofRandom(1, 3));
            gif.rotateAroundCenter(90 * floor(ofRandom(4)));
            ofSetColor(ofColor::white, ofRandom(10, 20));
            img1.draw();
        }
        ofSetColor(ofColor::white, ceil(ofRandom(6)) * 6);
        img2.draw();
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Mask yourself.

Daily sketch

Sketch 2015-08-29

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

void ofApp::update(){
    pattern1.update();
    pattern2.update();

    masker.beginLayer();
    {
        pattern2.draw();
    }
    masker.endLayer();

    masker.beginMask();
    {
        gif.rotateAroundCenter(180);
        pattern1.draw();
    }
    masker.endMask();
}

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

Masking 2015-08-27 with 2015-08-28

Daily sketch

Sketch 2015-08-28

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(50);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numLayers = 12;
    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;
    
    ofSetWindowShape(1200, 1200);
    masker.toggleOverlay();
}

void ofApp::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 ofApp::draw(){
    gif.begin();
    {
        ofBackground(ofColor::white);
        masker.draw();
        for(int i = 0; i < 3; i++) {
            masker.drawLayer(numLayers);
        }
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

Just copying.

Daily sketch

Sketch 2015-08-27

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(50, 100);
    gif.fadeInOut(3, 6, ofColor::white);
    gif.enableTextOverlay();
    numLayers = 12;
    numRects = gif.width * 0.5;
    masker.setup(numLayers + 2);
    
    img.setup("pcb2.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("road.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;
    
    ofSetWindowShape(1200, 1200);
    masker.toggleOverlay();
}

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

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

Stop investigating texture

Daily sketch

Sketch 2015-08-26

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setup(50);
    gif.fadeInOut(2, 3, ofColor::darkGray);
    gif.enableTextOverlay();
    numLayers = 2;
    numRects = gif.width * 0.5;
    masker.setup(numLayers + 1);
    
    img.setup("pcb2.png", 1.0, TEXTURE_OFFSET__MIDDLE__RIGHT_TO_CENTER);
    for(int i = 0; i < numLayers; i++) {
        scale = ofMap(i, 0, numLayers-1, -3, 16);
        img.setTextureScale(scale);
        img.setTextureOffsetY(ofRandom(2));
        textures.push_back(img);
    }
    
    img.setup("road.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;
    
    ofSetWindowShape(1200, 1200);
    masker.toggleOverlay();
}

void ofApp::update(){
    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(i);
        {
            textures.at(i).incrementTextureOffsetY(ofMap(i, 0, numLayers-1, -0.002, 0.002));
            textures.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            masks.at(i).incrementTextureOffsetY(ofMap(i, 0, numLayers-1, -0.002, 0.002));
            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 ofApp::draw(){
    gif.begin();
    {
        masker.drawLayer(numLayers);
    }
    gif.endCaptureDraw();
    masker.drawOverlay();
}
    

hat 2b 2012b

Daily sketch