SketchPad

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

Sketch 2015-05-19

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    ofSetLineWidth(4);
    masker.setup(width, height);
    
    img1.loadImage("newyork.png");
    img2.loadImage("flight.png");
    
    for(int i = 0; i < 40; i++) {
        ofxAnimatableFloat animHeight;
        animHeight.reset(ofRandom(90));
        heights.push_back(animHeight);
        
        ofxAnimatableFloat opacity;
        opacity.reset(ofMap(i, 0, 300, 120, 255));
        opacities.push_back(opacity);
        
        ofxAnimatableFloat target;
        target.reset(ceil(ofRandom(-height, height * 2)));
        targets.push_back(target);
        
        ofxAnimatableFloat position;
        position.reset(createDistinct(target.val()));
        position.setCurve(SWIFT_GOOGLE);
        position.setRepeatType(LOOP_BACK_AND_FORTH);
        position.setDuration(ceil(ofRandom(4)) * 0.5);
        position.animateTo(targets.at(i).val());
        positions.push_back(position);
    }
}

float ofApp::createDistinct(float from) {
    float candidate;
    do candidate = ceil(ofRandom(-height, height * 2));
    while(abs(candidate - from) < 150);
    return candidate;
}

void ofApp::updateAnim(){
    ofEnableAlphaBlending();
    
    masker.beginBackground();
    img1.draw(0, 0);
    ofSetColor(ofColor(ofColor::black, 40));
    ofRect(0, 0, width, height);
    masker.endBackground();
    
    masker.beginMask();
    ofBackground(ofColor::black);
    for(int i = 0; i < positions.size(); i++) {
        positions.at(i).update(0.05);
        ofSetColor(ofColor::white, opacities.at(i).val());
        ofRect(0, positions.at(i).val(), width, heights.at(i).val());
    }
    masker.endMask();
    
    masker.beginForeground();
    img2.draw(0, 0);
    ofSetColor(ofColor(ofColor::black, 40));
    ofRect(0, 0, width, height);
    masker.endForeground();
    
    ofDisableAlphaBlending();
}

void ofApp::drawAnim() {
    masker.draw();
    bool allFinished = true;
    for(int i = 0; i < positions.size(); i++) {
        if(positions.at(i).getPlayCount() < 1) {
            allFinished = false;
        }
    }
    if(allFinished) renderGif();
}
    

Leaving NYC for Miami. Plane delayed.

Daily sketch

Sketch 2015-05-18

        ofxLayerMask masker;
    vector<ofxAnimatableFloat> positions, targets, heights, opacities;

    void ofApp::setupAnim() {
    ofEnableSmoothing();
    ofSetLineWidth(4);
    masker.setup(width, height);
    
    for(int i = 0; i < 70; i++) {
        ofxAnimatableFloat animHeight;
        animHeight.reset(ofRandom(40));
        heights.push_back(animHeight);
        
        ofxAnimatableFloat opacity;
        opacity.reset(ofMap(i, 0, 300, 100, 255));
        opacities.push_back(opacity);
        
        ofxAnimatableFloat target;
        target.reset(ceil(ofRandom(-height, height * 2)));
        targets.push_back(target);
        
        ofxAnimatableFloat position;
        position.reset(createDistinct(target.val()));
        position.setCurve(SWIFT_GOOGLE);
        position.setRepeatType(LOOP_BACK_AND_FORTH);
        position.setDuration(ceil(ofRandom(2)) * 2);
        position.animateTo(targets.at(i).val());
        positions.push_back(position);
    }
}

float ofApp::createDistinct(float from) {
    float candidate;
    do candidate = ceil(ofRandom(-height, height * 2));
    while(abs(candidate - from) < 150);
    return candidate;
}

void ofApp::updateAnim(){
    ofEnableAlphaBlending();
    
    masker.beginBackground();
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white, 200);
    for(int i = -width; i < width*2; i+=30) {
        ofLine(i, height, i + width*0.5, 0);
    };
    masker.endBackground();
    
    masker.beginMask();
    ofBackground(ofColor::black);
    for(int i = 0; i < positions.size(); i++) {
        positions.at(i).update(0.05);
        ofSetColor(ofColor::white, opacities.at(i).val());
        ofRect(0, positions.at(i).val(), width, heights.at(i).val());
    }
    masker.endMask();
    
    masker.beginForeground();
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white, 100);
    for(int i = -width; i < width*2; i+=15) {
        ofLine(i + width*0.5, height, i, 0);
    };
    masker.endForeground();
    
    ofDisableAlphaBlending();
}

void ofApp::drawAnim() {
    masker.draw();
    bool allFinished = true;
    for(int i = 0; i < positions.size(); i++) {
        if(positions.at(i).getPlayCount() < 2) {
            allFinished = false;
        }
    }
    if(allFinished) renderGif();
}
    

Transmission static.

Daily sketch

Sketch 2015-05-17

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    masker.setup(width, height);
    fadeIn = true;
    fadeOut = false;
    alpha = 255;

    ofDisableArbTex();
    setupImage("tissue-inverted.png", &img1, &tex1, &offset1);
    setupImage("road.png", &img2, &tex2, &offset2);

    plane.set(width, height);
    plane.setPosition(width * 0.5, height * 0.5, 0);
    plane.setResolution(2, 2);
}

void ofApp::updateAnim(){
    masker.beginBackground();
    ofBackground(0, 0, 0, 255);
    masker.endBackground();
    
    masker.beginMask();
    ofEnableAlphaBlending();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor::white);
    
    ofTranslate(0, 0, 250);
    ofBackground(255, 255, 255);
    for(int i = 0; i < 360; i+= 1) {
        rotateScreen(i);
        drawLayer(&tex1);
    }
    ofDisableAlphaBlending();
    masker.endMask();
    
    masker.beginForeground();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor(62, 225, 255));
    tx0 = -ofGetFrameNum() * 0.030 + offset2;
    ty0 = -ofGetFrameNum() * 0.030 + offset2;
    tx1 = tx0 + (ofGetFrameNum() * 0.030 + offset2) * 2;
    ty1 = ty0 + (ofGetFrameNum() * 0.030 + offset2) * 2;
    drawLayer(&tex2);
    masker.endForeground();
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    ofSetColor(ofColor::white);
    ofEnableAlphaBlending();
    masker.draw();
    
    if(fadeIn) {
        alpha -= 24;
        if(alpha <= 0) fadeIn = false;
    }
    
    if(fadeOut) {
        alpha += 24;
        if(alpha >= 300) renderGif();
    }
    
    ofSetColor(0, 0, 0, alpha);
    ofRect(0, 0, width, height);

    if(ofGetFrameNum() == 60) {
        fadeOut = true;
    }
    ofDisableAlphaBlending();
}

void ofApp::drawLayer(ofTexture *tex) {
    tx0 = -0.35;
    ty0 = ofGetFrameNum() * 0.0128 + offset1;
    tx1 = tx0 + 3;
    ty1 = ty0 + 1.5;
    plane.mapTexCoords(tx0, ty0, tx1, ty1);
    plane.mapTexCoords(tx1, ty1, tx0, ty0);
    tex->bind();
    plane.draw();
    tex->unbind();
}

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

void ofApp::rotateScreen(float degrees) {
    ofTranslate(halfWidth, halfHeight, 0);
    ofRotate(degrees);
    ofTranslate(-halfWidth, -halfHeight, 0);
}
    

Sometimes, you just end up with... something.

Daily sketch

Sketch 2015-05-16

        void ofApp::setupAnim() {
    ofDisableArbTex();
    setupImage("building.png", &img, &tex);

    plane.set(width, height);
    plane.setPosition(width * 0.5, height * 0.5, 0);
    plane.setResolution(2, 2);
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    ofSetColor(255, 255, 255);
    
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    drawLayers();
    rotateScreen(90);
    drawLayers();
    rotateScreen(90);
    drawLayers();
    rotateScreen(90);
    drawLayers();
    ofDisableBlendMode();
    
    if(ofGetFrameNum() == 200) renderGif();
}

void ofApp::drawLayers() {
    tx0 = -0.4;
    ty0 = ofGetFrameNum() * 0.01;
    tx1 = tx0 + 1;
    ty1 = ty0 + 0.25;
    drawLayer();
    
    ty0 = -ofGetFrameNum() * 0.01;
    ty1 = ty0 + 0.25;
    drawLayer();
}

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

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::rotateScreen(float degrees) {
    ofTranslate(halfWidth, halfHeight, 0);
    ofRotate(90);
    ofTranslate(-halfWidth, -halfHeight, 0);
}
    

Framing nothing.

Daily sketch

Sketch 2015-05-15

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    masker.setup(width, height);
    offset = ofRandom(3);
    offset2 = ofRandom(3);
    shift = false;
    numShifts = 0;
    numFramesSinceShift = 0;

    ofDisableArbTex();
    setupImage("road.png", &img1, &tex1);
    setupImage("face.png", &img2, &tex2);

    plane.set(width, height);
    plane.setPosition(width * 0.5, height * 0.5, 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::updateAnim(){
    if(!shift && numFramesSinceShift > 5 && ofRandom(1) < 0.35) {
        numShifts++;
        numFramesSinceShift = 0;
        shift = true;
    }
    
    masker.beginBackground();
    ofBackground(0, 0, 0, 255);
    shift ? ofSetColor(128, 128, 128, 64) : ofSetColor(ofColor::red);
    applyOffset = shift ? offset2 : offset;
    tx0 = 1;
    ty0 = ofGetFrameNum() * 0.0012 + applyOffset;
    tx1 = tx0 - 1;
    ty1 = ty0 - 0.2;
    shift ? drawLayer(&tex1) : drawLayer(&tex2);
    masker.endBackground();
    
    masker.beginMask();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor::white);
    applyOffset = shift ? offset : offset2;
    tx0 = 1;
    ty0 = ofGetFrameNum() * 0.0012 + applyOffset;
    tx1 = tx0 - 1;
    ty1 = ty0 - 0.2;
    shift ? drawLayer(&tex2) : drawLayer(&tex1);
    masker.endMask();
    
    masker.beginForeground();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor::white);
    applyOffset = shift ? offset2 : offset;
    tx0 = 1;
    ty0 = ofGetFrameNum() * 0.0012 + applyOffset;
    tx1 = tx0 - 1;
    ty1 = ty0 - 0.2;
    shift ? drawLayer(&tex1) : drawLayer(&tex2);
    masker.endForeground();
    
    if(shift && numFramesSinceShift > 0 && ofRandom(1) < 0.5) {
        shift = false;
        numFramesSinceShift = 0;
        offset = getNewOffset();
        if(ofGetFrameNum() > 80) renderGif();
    }
    
    numFramesSinceShift++;
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    ofSetColor(ofColor::white);
    ofEnableAlphaBlending();
    masker.draw();
    ofDisableAlphaBlending();
}

float ofApp::getNewOffset() {
    do {
        candidateOffset = ofRandom(3);
    } while(abs(candidateOffset - offset) < 0.4);
    
    return candidateOffset;
}

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

Tearing things apart.

Daily sketch

Sketch 2015-05-14

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    masker.setup(width, height);
    fadeIn = true;
    fadeOut = false;
    alpha = 255;

    ofDisableArbTex();
    setupImage("tissue.png", &img1, &tex1, &offset1);
    setupImage("road.png", &img2, &tex2, &offset2);

    plane.set(width, height);
    plane.setPosition(width * 0.5, height * 0.5, 0);
    plane.setResolution(2, 2);
}

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

void ofApp::updateAnim(){
    masker.beginBackground();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor::red);
    tx0 = -0.5;
    ty0 = -ofGetFrameNum() * 0.003 + offset1;
    tx1 = tx0 + 1;
    ty1 = ty0 + 0.5;
    drawLayer(&tex2);
    masker.endBackground();
    
    masker.beginMask();
    ofEnableAlphaBlending();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor::white);
    tx0 = -0.35;
    ty0 = ofGetFrameNum() * 0.01 + offset1;
    tx1 = tx0 + 0.7;
    ty1 = ty0 + 0.25;
    drawLayer(&tex1);
    
    ty0 = -ofGetFrameNum() * 0.02 + offset1;
    ty1 = ty0 + 0.25;
    drawLayer(&tex1);
    
    ty0 = ofGetFrameNum() * 0.01 + offset2;
    ty1 = ty0 + 0.25;
    drawLayer(&tex1);
    
    ty0 = -ofGetFrameNum() * 0.02 + offset2;
    ty1 = ty0 + 0.25;
    drawLayer(&tex1);
    
    ofRect(0, 0, 70, height);
    ofRect(width - 70, 0, 70, height);
    ofDisableAlphaBlending();
    masker.endMask();
    
    masker.beginForeground();
    ofBackground(0, 0, 0, 255);
    ofSetColor(ofColor::white);
    tx0 = -0.5;
    ty0 = -ofGetFrameNum() * 0.0012 + offset2;
    tx1 = tx0 + 1;
    ty1 = ty0 + 0.5;
    drawLayer(&tex2);
    masker.endForeground();
}
    

Blood pump.

Daily sketch

Sketch 2015-05-13

        void ofApp::setupAnim() {
    numShapes = 4;
    spacing = width / numShapes; //20
    offset = spacing * 0.5;      //10
    
    for(int x = 0; x < numShapes; x++) {
        for(int y = 0; y < numShapes; y++) {
            for(int size = spacing - 2; size > 0; size-=4) {
                ofxShape shape;
                shape.setupHollowSquare(1, size);
                shape.positionX(x * spacing + offset);
                shape.positionY(y * spacing + offset);
                shape.positionZ(100);
                shapes.push_back(shape);
            }
        }
    }
    
    for(int i = 0; i < shapes.size(); i++) {
        system.add(shapes.at(i));
    }
}

void ofApp::updateAnim(){
    for(int i = 0; i < shapes.size(); i++) {
        if(i % 2 == 0) {
            shapes.at(i).incrementRotateZ(1);
        } else {
            shapes.at(i).incrementRotateZ(-1);
        }
    }
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    system.draw();
    
    if(ofGetFrameNum() == 90) {
        renderGif();
    }
}
    

Looking for simple interactions which work against the pixel grid

Daily sketch