SketchPad

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

Sketch 2015-06-16

        void ofApp::setupAnim() {
    numImages = 50;
    imageSpacing = height / numImages;
    
    image.setup("surface.png");
    image.setTextureScale(0.4);
    for(int i = 0; i < numImages; i++) {
        image.setTextureOffsetX(ofRandom(500));
        images.push_back(image);
        imgColors.push_back(ofColor(255, ofRandom(150), ofRandom(50), ofRandom(100)));
    }
    
    offset = ofRandom(5000);
}

void ofApp::updateAnim(){
    for(int i = 0; i < images.size(); i++) {
        noise = ofNoise(i, ofGetFrameNum() * 0.06 + offset);
        images.at(i).setPlaneHeight(noise * imageSpacing * 24);
        images.at(i).incrementTextureOffsetX(i % 2 == 0 ? 0.06 : -0.06);
    }
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    ofEnableAlphaBlending();
    for(int i = 0; i < images.size(); i++) {
        ofSetColor(imgColors.at(i));
        images.at(i).draw(0, halfImageSpacing + imageSpacing * i);
    }
    ofDisableAlphaBlending();
    
    if(ofGetFrameNum() == 100) {
        renderGif();
    }
}

Scalable textures, resizables planes...

Daily sketch

Sketch 2015-06-15

        void ofApp::setupAnim() {
    masker.setup(width, height);
    layer1 = masker.newLayer();
    layer2 = masker.newLayer();
    
    image1.setup("foil.png");
    image2.setup("foil.png");
    
    image1.setOffsetX(0);
    image1.setOffsetY(0);
    image2.setOffsetX(1);
    image2.setOffsetY(1);
    
    pos = 0;
    size = width * 0.2;
}

void ofApp::updateAnim(){
    pos+=10;
    if(pos > height * 2) {
        pos = 0;
    }
    
    masker.beginLayer(layer1);
    {
        image1.incrementOffsetX(0.01);
        image1.incrementOffsetY(0.01);
        image1.draw();
    }
    masker.endLayer(layer1);
    
    masker.beginMask(layer1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        for(int x = 0; x < size; x++) {
            if(x % 2 == 0) {
                ofRect(x * size, height - pos, size, height);
            }
        }
    }
    masker.endMask(layer1);

    masker.beginLayer(layer2);
    {
        image2.incrementOffsetX(-0.01);
        image2.incrementOffsetY(-0.01);
        image2.draw();
    }
    masker.endLayer(layer2);
    
    masker.beginMask(layer2);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        for(int x = 0; x < size; x++) {
            if(x % 2 != 0) {
                ofRect(x * size, pos - height, size, height);
            }
        }
    }
    masker.endMask(layer2);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    masker.draw();
    masker.drawOverlay();
    
    if(ofGetFrameNum() == 100) {
        renderGif();
    }
}

Masking and texture planes are getting much easier

Daily sketch

Sketch 2015-06-14

        void ofApp::setupAnim() {
    masker.setup(width, height);
    masker.setOverlayThumbSize(70);
    layer1 = masker.newLayer();
    layer2 = masker.newLayer();
    masker.toggleOverlay();
    
    ofDisableArbTex();
    offset = ofRandom(3);
    setupImage("foil.png", &img1, &tex1);
    setupImage("glass.png", &img2, &tex2);

    plane.set(width, height);
    plane.setPosition(halfWidth, halfHeight, 0);
    plane.setResolution(2, 2);
    
    glitch = false;
    alpha = 255;
    fadeIn = true;
    fadeOut = false;
}

void ofApp::setupImage(string file, ofImage *img, ofTexture *tex) {
    img->loadImage(file);
    *tex = img->getTextureReference();
    tex->setTextureWrap(GL_MIRRORED_REPEAT, GL_MIRRORED_REPEAT);
}

void ofApp::drawLayer(ofTexture *tex) {
    plane.mapTexCoords(tx0, ty0, tx1, ty1);
    plane.mapTexCoords(tx1, ty1, tx0, ty0);
    tex->bind();
    plane.draw();
    tex->unbind();
}

void ofApp::updateAnim(){
    masker.beginLayer(layer1);
    {
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        tx0 = ofGetFrameNum() * 0.005;
        ty0 = 0;
        tx1 = tx0 - 0.015625;
        ty1 = ty0 - 0.125;
        drawLayer(&tex1);
    }
    masker.endLayer(layer1);
    
    masker.beginMask(layer1);
    {
        ofBackground(ofColor::white);
        ofSetColor(ofColor::black);
        for(int x = 10; x < width; x+=80) {
            for(int y = 10; y < height; y+=80) {
                ofRect(x, y, 60, 60);
            }
        }
    }
    masker.endMask(layer1);

    masker.beginLayer(layer2);
    {
        ofSetColor(ofColor::white);
        tx0 = 0;
        ty0 = ofGetFrameNum() * 0.01;
        tx1 = tx0 - 2;
        ty1 = ty0 - 0.5;
        drawLayer(&tex2);
    }
    masker.endLayer(layer2);
    
    masker.beginMask(layer2);
    {
        masker.drawLayer(layer1);
        ofSetColor(ofColor::white);
        for(int x = 10; x < width; x+=80) {
            for(int y = 10; y < height; y+=80) {
                ofRect(x, y, 60, 60);
            }
        }
    }
    masker.endMask(layer2);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    
    if(glitch) {
        masker.draw();
        if(ofRandom(1) > 0.4) {
            glitch = !glitch;
        }
    } else {
        masker.drawLayer(layer2);
        if(ofRandom(1) > 0.9) {
            glitch = !glitch;
        }
    }

    masker.drawOverlay();
    
    if(fadeIn) {
        alpha -= 40;
        if(alpha <= 0) fadeIn = false;
    }
    
    if(fadeOut) {
        alpha += 40;
        if(alpha >= 355) {
            renderGif();
        }
    }
    
    ofSetColor(ofColor::black, alpha);
    ofRect(0, 0, width, height);
    
    if(ofGetFrameNum() == 50) {
        fadeOut = true;
    }
}

So much clearer... created a thumbnail overlay for the layer masking addon

Daily sketch

Sketch 2015-06-13

        void ofApp::setupAnim() {
    masker.setup(width, height);
    layer1 = masker.newLayer();
    layer2 = masker.newLayer();
    
    ofDisableArbTex();
    offset = ofRandom(3);
    setupImage("foil.png", &img1, &tex1);
    setupImage("glass.png", &img2, &tex2);

    plane.set(width, height);
    plane.setPosition(halfWidth, halfHeight, 0);
    plane.setResolution(2, 2);
    
    glitch = false;
    alpha = 255;
    fadeIn = true;
    fadeOut = false;
}

void ofApp::setupImage(string file, ofImage *img, ofTexture *tex) {
    img->loadImage(file);
    *tex = img->getTextureReference();
    tex->setTextureWrap(GL_MIRRORED_REPEAT, GL_MIRRORED_REPEAT);
}

void ofApp::drawLayer(ofTexture *tex) {
    plane.mapTexCoords(tx0, ty0, tx1, ty1);
    plane.mapTexCoords(tx1, ty1, tx0, ty0);
    tex->bind();
    plane.draw();
    tex->unbind();
}

void ofApp::updateAnim(){
    masker.beginLayer(layer1);
    {
        ofBackground(ofColor::white);
        ofSetColor(ofColor::white);
        tx0 = ofGetFrameNum() * 0.005;
        ty0 = 0;
        tx1 = tx0 - 0.015625;
        ty1 = ty0 - 0.125;
        drawLayer(&tex1);
    }
    masker.endLayer(layer1);
    
    masker.beginMask(layer1);
    {
        ofBackground(ofColor::white);
        ofSetColor(ofColor::black);
        for(int x = 10; x < width; x+=80) {
            for(int y = 10; y < height; y+=80) {
                ofRect(x, y, 60, 60);
            }
        }
    }
    masker.endMask(layer1);

    masker.beginLayer(layer2);
    {
        ofSetColor(ofColor::white);
        tx0 = 0;
        ty0 = ofGetFrameNum() * 0.01;
        tx1 = tx0 - 2;
        ty1 = ty0 - 0.5;
        drawLayer(&tex2);
    }
    masker.endLayer(layer2);
    
    masker.beginMask(layer2);
    {
        masker.drawLayer(layer1);
        ofSetColor(ofColor::white);
        for(int x = 10; x < width; x+=80) {
            for(int y = 10; y < height; y+=80) {
                ofRect(x, y, 60, 60);
            }
        }
    }
    masker.endMask(layer2);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    
    if(glitch) {
        masker.draw();
        if(ofRandom(1) > 0.4) {
            glitch = !glitch;
        }
    } else {
        masker.drawLayer(layer2);
        if(ofRandom(1) > 0.9) {
            glitch = !glitch;
        }
    }
    
    if(fadeIn) {
        alpha -= 40;
        if(alpha <= 0) fadeIn = false;
    }
    
    if(fadeOut) {
        alpha += 40;
        if(alpha >= 355) {
            renderGif();
        }
    }
    
    ofSetColor(ofColor::black, alpha);
    ofRect(0, 0, width, height);
    
    if(ofGetFrameNum() == 70) {
        fadeOut = true;
    }
}

What on earth is going on with these masks?

Daily sketch

Sketch 2015-06-12

        void ofApp::setupAnim() {
    shapeSystem.setup();
    shape1.setupGradientSquare(halfWidth*0.15, halfWidth*0.85);
    shape2.setupGradientSquare(halfWidth*0.15, halfWidth*0.85);
    shape3.setupGradientSquare(halfWidth*0.15, halfWidth*0.85);
    shape4.setupGradientSquare(halfWidth*0.15, halfWidth*0.85);

    shape1.setPosition(halfWidth*0.5, halfHeight*0.5);
    shapeSystem.add(shape1);
    
    shape2.setPosition(halfWidth*0.5+halfWidth, halfHeight*0.5);
    shapeSystem.add(shape2);
    
    shape3.setPosition(halfWidth*0.5, halfHeight*0.5+halfHeight);
    shapeSystem.add(shape3);
    
    shape4.setPosition(halfWidth*0.5+halfHeight, halfHeight*0.5+halfHeight);
    shapeSystem.add(shape4);
    
    masker.setup(width, height);
    layer1 = masker.newLayer();
    layer2 = masker.newLayer();
    
    ofDisableArbTex();
    offset = ofRandom(3);
    setupImage("foil.png", &img1, &tex1);
    setupImage("glass.png", &img2, &tex2);

    plane.set(width, height);
    plane.setPosition(halfWidth, halfHeight, 0);
    plane.setResolution(2, 2);
}

void ofApp::setupImage(string file, ofImage *img, ofTexture *tex) {
    img->loadImage(file);
    *tex = img->getTextureReference();
    tex->setTextureWrap(GL_MIRRORED_REPEAT, GL_MIRRORED_REPEAT);
}

void ofApp::drawLayer(ofTexture *tex) {
    plane.mapTexCoords(tx0, ty0, tx1, ty1);
    plane.mapTexCoords(tx1, ty1, tx0, ty0);
    tex->bind();
    plane.draw();
    tex->unbind();
}

void ofApp::updateAnim(){
    masker.beginLayer(layer1);
    if(ofRandom(1) > 0.4) ofBackground(ofColor::black);
    ofSetColor(ofColor::white);
    tx0 = -ofGetFrameNum() * 0.00006 + offset + ofRandom(-0.09, 0.09);
    ty0 = ofGetFrameNum() * 0.005;
    tx1 = tx0 - 1;
    ty1 = ty0 - 0.25;
    drawLayer(&tex1);
    masker.endLayer(layer1);
    
    masker.beginMask(layer1);
    ofBackground(ofColor::black);
    if(ofGetFrameNum() == 0 || ofRandom(1) > 0.2) {
        ofSetColor(ofColor::white, 32);
        for(int i = 0; i < 30; i++) {
            ofTriangle(ofRandom(-width, width*2), ofRandom(-height, height*2),
                       ofRandom(-width, width*2), ofRandom(-height, height*2),
                       ofRandom(-width, width*2), ofRandom(-height, height*2));
        }
    } else if(ofRandom(1) > 0.15) {
        offset = ofRandom(3);
    }
    masker.endMask(layer1);
    
    masker.beginMask(layer2);
    if(ofRandom(1) > 0.4) ofBackground(ofColor::black);
    ofSetColor(ofColor::white);
    
    tx0 = ofGetFrameNum() * 0.00006 + offset;
    tx1 = tx0 - 1;
    
    ofTranslate(-halfWidth, -halfHeight, 0);
    drawLayer(&tex1);
    masker.drawLayer(layer1);
    
    ofTranslate(width, 0, 0);
    drawLayer(&tex1);
    masker.drawLayer(layer1);
    
    ofTranslate(0, height, 0);
    drawLayer(&tex1);
    masker.drawLayer(layer1);
    
    ofTranslate(-width, 0, 0);
    drawLayer(&tex1);
    masker.drawLayer(layer1);
    
    ofTranslate(halfWidth, -halfHeight, 0);
    shapeSystem.draw();
    masker.endMask(layer2);

    masker.beginLayer(layer2);
    ofSetColor(ofColor::white, 32);
    tx0 = ofGetFrameNum() * 0.005;
    ty0 = -ofGetFrameNum() * 0.00006 + offset + ofRandom(-0.09, 0.09);
    tx1 = tx0 - 0.25;
    ty1 = ty0 - 1;
    drawLayer(&tex2);
    masker.endLayer(layer2);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    
    masker.draw();
    
    if(ofGetFrameNum() == 72) {
        renderGif();
    }
}

The texture from a few days ago, but with a new masking technique

Daily sketch

Sketch 2015-06-11

        void ofApp::setupAnim() {
    fontSize = 64;
    loadFonts();
    quarterHeight = halfHeight * 0.5;
}

void ofApp::updateAnim(){
    if(ofGetFrameNum() % 3 == 0) {
        random_shuffle(fonts.begin(), fonts.end());
    }
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white);

    ofSetRectMode(OF_RECTMODE_CENTER);
    fonts.at(0).drawStringCentered("THREE", halfWidth, quarterHeight);
    fonts.at(1).drawStringCentered("DAYS", halfWidth, halfHeight + quarterHeight);
    ofSetRectMode(OF_RECTMODE_CORNER);

    if(ofGetFrameNum() == 60) {
        renderGif();
    }
}

Three days...

Daily sketch

Sketch 2015-06-10

        void ofApp::setupAnim() {
    fontSize = 64;
    loadFonts();
    quarterHeight = halfHeight * 0.5;
}

void ofApp::updateAnim(){
    if(ofGetFrameNum() % 3 == 0) {
        random_shuffle(fonts.begin(), fonts.end());
    }
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white);

    ofSetRectMode(OF_RECTMODE_CENTER);
    fonts.at(0).drawStringCentered("OFF", halfWidth, quarterHeight);
    fonts.at(1).drawStringCentered("FOR", halfWidth, halfHeight + quarterHeight);
    ofSetRectMode(OF_RECTMODE_CORNER);

    if(ofGetFrameNum() == 60) {
        renderGif();
    }
}

...off for...

Daily sketch