SketchPad

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

Sketch 2015-07-21

        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_CENTER);
    glass.setup("glass3.png", 500, 500);
    shapeSystem.setup();
    for(int i = 0; i < 30; i++) {
        shape.setupGradientArc(60, ofRandom(10, 190), ofRandom(200, 400), ofRandom(180));
        shape.rotateZ(ofRandom(360));
        shape.setPosition(
            ofRandom(-60, gif.width + 60),
            ofRandom(-60, gif.width + 60));
        shape.setColor(ofColor(ofColor::white, 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, 2, 4));
    mask.setTextureScale(ofMap(sin(ofGetFrameNum() * 0.1), -1, 1, 0.25, 1));
    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);
        mask.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        ofBackground(ofColor::black);
        shapeSystem.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();
}
    

A shape system with gradient arcs

Daily sketch

Sketch 2015-07-20

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 100, 500, 500, ISOLATE_DRAWING);
    masker.setup(500, 500, 3, ISOLATE_LAYERS);
    masker.toggleOverlay();
    mask.setup("face-mask.png", 500, 500, 1.5, TEXTURE_OFFSET_MIDDLE_CENTER);
    glass.setup("glass3.png", 500, 500, 2.0);
    shapeSystem.setup();
    numPerDimension.x = 2;
    numPerDimension.y = numPerDimension.x * 2;
    spacing.x = gif.width / numPerDimension.x;
    halfSpacing.x = spacing.x * 0.5;
    spacing.y = gif.height / numPerDimension.y;
    halfSpacing.y = spacing.y * 0.5;
    for(int x = 0; x < numPerDimension.x; x++) {
        for(int y = 0; y < numPerDimension.y; y++) {
            shape.setupFilledSquare(halfSpacing.x);
            shape.setPosition(
                x * spacing.x + halfSpacing.x*0.5 + (y % 2 == 0 ? halfSpacing.x : 0),
                y * spacing.y + halfSpacing.y);
            shapes.push_back(shape);
        }
    }
    for(int i = 0; i < shapes.size(); i++) {
        shapeSystem.add(shapes.at(i));
    }
}

void ofApp::update(){
    mask.incrementTextureOffsetY(0.02);
    glass.incrementTextureOffsetY(0.08);
    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();
    {
        ofBackground(ofColor::white);
        masker.draw();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

A torn checkerboard

Daily sketch

Sketch 2015-07-19

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 60, 140, 500, 500, ISOLATE_DRAWING);
    masker.setup(500, 500, 2, ISOLATE_LAYERS);
    masker.toggleOverlay();
    
    leaf1.setup("leaf1-desaturated.png", 500, 500, 2.0);
    leaf2.setup("leaf2-desaturated.png", 500, 500, 2.0);
    glass1.setup("glass1.png", 500, 500);
    glass2.setup("glass2.png", 500, 500);
    direction = 0;
}

void ofApp::update(){
    leaf2.incrementTextureOffsetX(-0.1);
    if(ofGetFrameNum() == 0 || ofGetFrameNum() % 2 == 0) {
        glass1.setTexturePosition(ofRandom(2), ofRandom(2));
        glass1.setTextureScale(ofRandom(6, 10));
    }
    if(ofGetFrameNum() == 0 || ofGetFrameNum() % 2 == 1) {
        glass2.setTexturePosition(ofRandom(2), ofRandom(2));
        glass2.setTextureScale(ofRandom(0.5, 2));
    }

    masker.beginLayer(0);
    {
        ofSetColor(ofColor::red);
        leaf2.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        glass1.draw();
    }
    masker.endMask(0);
    
    masker.beginLayer(1);
    {
        masker.drawLayer(0);
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        glass2.draw();
    }
    masker.endMask(1);
}

void ofApp::draw(){
    gif.begin();
    {
        if(ofGetFrameNum() % 20 == 0) {
            leaf1.setTexturePosition(ofRandom(2), ofRandom(2));
            ofSetColor(ofColor(ofColor::white, 255));
            framesSinceLastAppearance = 0;
            direction++;
            if(direction > 1) {
                direction = 0;
            }
        } else {
            float alpha;
            if(framesSinceLastAppearance < 3) {
                alpha = 255;
            } else {
                alpha = 255 - framesSinceLastAppearance * 60;
            }
            if(alpha < 0) alpha = 0;
            if(direction == 0) {
                leaf1.incrementTextureOffsetX(0.06);
            }
            if(direction == 1) {
                leaf1.incrementTextureOffsetY(-0.03);
            }

            ofSetColor(ofColor(ofColor::white, alpha));
            framesSinceLastAppearance++;
        }
        leaf1.draw();
        masker.drawLayer(1);
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

There's blood on your hands

Daily sketch

Sketch 2015-07-18

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 30, 75, 500, 500, ISOLATE_DRAWING);
    masker.setup(500, 500, 1, ISOLATE_LAYERS);
    masker.toggleOverlay();

    glass1.setup("glass.png", 500, 500, 2.0);
    glass2.setup("glass.png", 500, 500, 2.0);
    framesBeforeRefresh = 15;
}

void ofApp::update(){
    if(ofGetFrameNum() % framesBeforeRefresh == 0) {
        refresh = true;
        int offsetIndex = floor(ofGetFrameNum() / framesBeforeRefresh);
        offsetIndex = ((offsetIndex % 3) + 0) * 2;
        glass1.setTextureOffset(offsetIndex);
        glass2.setTextureOffset(offsetIndex);
        glass1.setTextureScale(3.0);
        glass2.setTextureScale(3.0);
    } else {
        refresh = false;
        glass1.incrementTextureScale(-0.05);
        glass2.incrementTextureScale(0.05);
    }
    
    masker.beginLayer(0);
    {
        glass1.draw();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        glass2.draw();
    }
    masker.endMask(0);
}

void ofApp::draw(){
    gif.begin();
    {
        ofEnableAlphaBlending();
        if(refresh) {
            ofSetColor(ofColor::red);
            ofRect(0, 0, gif.width, gif.height);
        }
        masker.draw();
        ofDisableAlphaBlending();
    }
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

"...a conscious, purposeful, and personal subject confronting an unconscious, purposeless, and impersonal universe..." (Richard Tarnas)

Daily sketch

Sketch 2015-07-17

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setupPaused(ofGetTimestampString("out/%Y-%m-%d"), 50, 150, 500, 500);
    masker.setup(500, 500, 5, ISOLATE_LAYERS);
    masker.toggleOverlay();

    face.setup("face.png", 500, 500, 1.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    wall.setup("foil4.png", 500, 500, 1.0);
    wallMask.setup("card-invert-wall.png", 500, 500, 1.0);
    for(int i = 0; i < 4; i++) {
        walls.push_back(wall);
        wallMasks.push_back(wallMask);
    }
}

void ofApp::update(){
    float sine = sin(ofGetFrameNum() * 0.05);
    alpha = ofMap(sine, -1, 1, 20, 220);
    
    for(int i = 0; i < 4; i++) {
        masker.beginLayer(i);
        {
            gif.rotateAroundCenter(i * 90);
            walls.at(i).incrementTextureOffsetY(-0.02);
            walls.at(i).setTextureScale(ofMap(sine, -1, 1, 1.0, 4.0));
            ofSetColor(i % 2 == 0 ? ofColor(ofColor::red, alpha) : ofColor(ofColor::white, alpha));
            walls.at(i).draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofSetColor(ofColor::white);
            gif.rotateAroundCenter(i * 90);
            wallMasks.at(i).setTextureScale(ofMap(sine, -1, 1, 0.5, 0.5));
            wallMasks.at(i).incrementTextureOffsetY(-0.05);
            wallMasks.at(i).draw();
            if(i == 0) {
                ofSetColor(ofColor::black);
                ofRect(0, gif.halfHeight, gif.width, gif.halfHeight);
            }
        }
        masker.endMask(i);
    }
    
    masker.beginLayer(4);
    {
        ofSetColor(ofColor(ofColor::red, alpha));
        walls.at(0).draw();
    }
    masker.endLayer(4);
    
    masker.beginMask(4);
    {
        wallMasks.at(0).draw();
        ofSetColor(ofColor::black);
        ofRect(0, 0, gif.width, gif.halfHeight);
    }
    masker.endMask(4);
}

void ofApp::draw(){
    gif.begin();
    ofPushStyle();
    {
        ofEnableAlphaBlending();
        if(ofGetFrameNum() == 0) {
            ofBackground(ofColor::black);
        }
        if(ofRandom(1) > ofMap(alpha, 0, 255, 0.7, 1)) {
            ofSetColor(ofColor(ofColor::white, 255-alpha));
            face.setTextureOffset(TEXTURE_OFFSET_MIDDLE_CENTER);
            face.incrementTextureOffset(ofRandom(-0.05, 0.05), ofRandom(-0.5, 0.5));
            face.draw();
        } else {
            ofSetColor(ofColor(ofColor::black, alpha));
            ofRect(0, 0, gif.width, gif.height);
        }
        masker.draw();
        ofDisableAlphaBlending();
    }
    ofPopStyle();
    gif.endAndCaptureFrame();
    gif.draw();
    masker.drawOverlay();
}
    

That weird illusion thing again with 'impossible' walls.

Daily sketch

Sketch 2015-07-16

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 64, 500, 500);
    masker.setup(500, 500, 1);
    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);
}

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

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

Forced to stay awake

Daily sketch

Sketch 2015-07-15

        void ofApp::setup(){
    ofSetWindowShape(1000, 800);
    gif.setup(ofGetTimestampString("out/%Y-%m-%d"), 120, 500, 500);
    gif.fadeInOut(2, 4, ofColor::white);
    numLayers = 7;
    masker.setup(500, 500, numLayers + 1);
    masker.toggleOverlay();
    setupTransparencies();
    setupCardboards();
    setupIncrements();
    glass.setup("glass1.png", 500, 500, 2.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    circle.setup("circle-feather3.png", 500, 500, 1.0, TEXTURE_OFFSET_MIDDLE_CENTER);
}

void ofApp::setupTransparencies() {
    image.setup("card-invert.png", 500, 500, 1.5, TEXTURE_OFFSET_MIDDLE_LEFT);
    transparencies.push_back(image);
    image.setup("card-invert.png", 500, 500, 0.75, TEXTURE_OFFSET_BOTTOM_RIGHT);
    transparencies.push_back(image);
    image.setup("card-invert.png", 500, 500, 1.25, TEXTURE_OFFSET_TOP_CENTER);
    transparencies.push_back(image);
    image.setup("card-invert.png", 500, 500, 1.5, TEXTURE_OFFSET_BOTTOM_LEFT);
    transparencies.push_back(image);
    image.setup("card-invert.png", 500, 500, 0.75, TEXTURE_OFFSET_TOP_RIGHT);
    transparencies.push_back(image);
    image.setup("card-invert.png", 500, 500, 1.25, TEXTURE_OFFSET_MIDDLE_CENTER);
    transparencies.push_back(image);
}

void ofApp::setupCardboards() {
    image.setup("cardboard.png", 500, 500, 2.0, TEXTURE_OFFSET_MIDDLE_LEFT);
    cardboards.push_back(image);
    image.setup("cardboard.png", 500, 500, 2.0, TEXTURE_OFFSET_BOTTOM_RIGHT);
    cardboards.push_back(image);
    image.setup("cardboard.png", 500, 500, 2.0, TEXTURE_OFFSET_TOP_CENTER);
    cardboards.push_back(image);
    image.setup("cardboard.png", 500, 500, 2.0, TEXTURE_OFFSET_BOTTOM_LEFT);
    cardboards.push_back(image);
    image.setup("cardboard.png", 500, 500, 2.0, TEXTURE_OFFSET_TOP_RIGHT);
    cardboards.push_back(image);
    image.setup("cardboard.png", 500, 500, 2.0, TEXTURE_OFFSET_MIDDLE_CENTER);
    cardboards.push_back(image);
}

void ofApp::setupIncrements() {
    incrementMultiplier = 0.0125;
    for(int i = 1; i <= numLayers / 2; i++) {
        increments.push_back(-incrementMultiplier * i);
        increments.push_back(incrementMultiplier * i);
    }
}

void ofApp::update(){
    glass.setTexturePosition(ofRandom(2), ofRandom(2));
    glass.setTextureScale(ofRandom(1.0, 6.0));
    masker.beginLayer(0);
    {
        ofSetColor(ofColor::red);
        glass.draw();
        ofSetColor(ofColor::white);
    }
    masker.endLayer(0);

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

    for(int i = 1; i < numLayers; i++) {
        masker.beginLayer(i);
        ofPushStyle();
        {
            ofSetColor(ofColor(i * 20 + 140, 140, i * 20 + 140));
            ofSetColor(ofColor::red);
            cardboards.at(i-1).incrementTextureOffsetY(i % 2 == 0 ? -0.05 : 0.05);
            cardboards.at(i-1 % 2).draw();
        }
        ofPopStyle();
        masker.endLayer(i);
        
        masker.beginMask(i);
        ofPushStyle();
        {
            transparencies.at(i - 1).incrementTextureOffsetY(increments.at(i - 1) * ((i % 2 == 0) ? sin(ofGetFrameNum() * 0.005) : cos(ofGetFrameNum() * 0.005)));
            transparencies.at(i - 1).incrementTextureOffsetX(i % 2 == 0 ? -0.018 : 0.018);
            transparencies.at(i - 1).draw();
        }
        ofPopStyle();
        masker.endMask(i);
    }
    
    masker.beginLayer();
    {
        ofSetColor(ofColor::white);
        masker.drawLayers(0, numLayers - 1);
    }
    masker.endLayer();
    
    masker.beginMask();
    {
        ofSetColor(ofColor::white);
        circle.draw();
    }
    masker.endMask();
}

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

Red, red, red

Daily sketch