SketchPad

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

Sketch 2015-06-30

        void ofApp::setup(){
    finalFrame = 59;
    frameDecay = 64;
    lastDrawableFrameForLoop = finalFrame - (256 / frameDecay);
    ofSetWindowShape(500, 500);
    gif.setup(ofGetTimestampString("%Y-%m-%d"), finalFrame);

    ofEnableSmoothing();
    shapeSystem.setup();
    masker.setup(4);
    
    for(int i = 0; i < 4; i++) {
        textures.push_back(texture);
        textures.at(i).setup("road" + ofToString(i + 1) + ".png");
    }

    shapeSize = gif.width * 0.5;
    thickness = gif.width * 0.45;
    halfShapeSize = shapeSize * 0.5;

    for(int i = 0; i < gif.width; i += shapeSize) {
        for(int j = 0; j < gif.height; j += shapeSize) {
            shape.setupHollowArc(30, thickness, shapeSize, 180);
            shape.setColor(ofColor::fromHsb(ofRandom(100, 120), ofRandom(100, 255), ofRandom(100, 255)));
            shape.setBlur(30);
            shape.setPosition(ofVec3f(i + halfShapeSize, j + halfShapeSize, 0));
            shape.rotateZ(ofRandom(360));
            shapes.push_back(shape);
        }
    }
    
    for(int i = 0; i < shapes.size(); i++) {
        shapeSystem.add(shapes.at(i));
    }
}

void ofApp::update(){
    for(int i = 0; i < shapes.size(); i++) {
        i % 2 == 0 ?
        shapes.at(i).incrementRotateZ(12) :
        shapes.at(i).incrementRotateZ(-12);
    }

    for(int i = 0; i < masker.numLayers(); i++) {
        masker.beginLayer(i);
        {
            ofBackground(ofColor::black);
            ofEnableAlphaBlending();
            rotateScreen(90 * i);
            shapeSystem.draw();
            ofDisableAlphaBlending();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofBackground(ofColor::black);
            if(ofRandom(1) > 0.6 && ofGetFrameNum() <= lastDrawableFrameForLoop) {
                int j = floor(ofRandom(3.9999999));
                textures.at(j).setTextureScale(ofRandom(0.1, 2));
                textures.at(j).setTexturePosition(ofRandom(-1, 1), ofRandom(-1, 1));
                textures.at(j).draw();
            }
        }
        masker.endMask(i);
    }
}

void ofApp::draw(){
    gif.begin();
    {
        ofEnableAlphaBlending();
        if(ofGetFrameNum() == 0) {
            ofBackground(ofColor::black);
        } else {
            ofSetColor(ofColor::black, frameDecay);
            ofRect(0, 0, gif.width, gif.height);
        }
        masker.draw();
        ofDisableAlphaBlending();
    }
    gif.endAndCaptureFrame();
    gif.draw();

    masker.drawOverlay();
}

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

Shuffling through the patterns

Daily sketch

Sketch 2015-06-29

        void ofApp::setup(){
    ofSetWindowShape(500, 500);
    gif.setupPaused(ofGetTimestampString("%Y-%m-%d"), 30, 59);

    ofEnableSmoothing();
    shapeSystem.setup();

    image.setup("glass.png", 0.5);

    shapeSize = 100;
    thickness = 60;
    halfShapeSize = shapeSize * 0.5;

    for(int i = 0; i < gif.width; i += shapeSize) {
        for(int j = 0; j < gif.height; j += shapeSize) {
            shape.setupHollowArc(30, thickness, shapeSize, 180);
            shape.setColor(ofColor::white);
            shape.setBlur(25);
            shape.setPosition(ofVec3f(i + halfShapeSize, j + halfShapeSize, 0));
            shape.rotateZ(ofRandom(360));
            shapes.push_back(shape);
        }
    }
    
    for(int i = 0; i < shapes.size(); i++) {
        shapeSystem.add(shapes.at(i));
    }
}

void ofApp::update(){
    for(int i = 0; i < shapes.size(); i++) {
        i % 2 == 0 ?
        shapes.at(i).incrementRotateZ(12) :
        shapes.at(i).incrementRotateZ(-12);
    }

    image.incrementTextureOffsetY(0.06666666666);
}

void ofApp::draw(){
    gif.begin();
    {
        if(ofGetFrameNum() == 0) ofBackground(0, 0, 0);
        image.draw();
        ofSetColor(ofColor::black, 16);
        ofRect(0, 0, gif.width, gif.height);
        
        ofEnableAlphaBlending();
        
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor::white);
        }
        shapeSystem.draw();
        
        rotateScreen(90);
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor(ofColor::black, 192));
        }
        shapeSystem.draw();
        
        rotateScreen(90);
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor(ofColor::black, 164));
        }
        shapeSystem.draw();
        
        rotateScreen(90);
        for(int i = 0; i < shapes.size(); i++) {
            shapes.at(i).setColor(ofColor(ofColor::black, 128));
        }
        shapeSystem.draw();
        
        ofDisableAlphaBlending();
    }
    gif.endAndCaptureFrame();
    gif.draw();
}

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

We'll live as one family

Daily sketch

Sketch 2015-06-28

        void ofApp::setup(){
    ofSetWindowShape(1000, 1000);
    manager.setup();
    manager.toggleDebugUI();
    setupAudioUnits();
    setupTimeline();

    playing = false;
    note = 60;
}

void ofApp::setupAudioUnits() {
    manager.add(&chain, "tal-one", ofColor::blue);
    chain.link(&noiseMaker).toMixer();
    manager.loadPresets(&chain);
}

void ofApp::setupTimeline() {
    timeline.setup();
    timeline.setLoopType(OF_LOOP_NORMAL);
    timeline.setDurationInSeconds(30);
    timeline.setOffset(ofVec2f(10, 450));
    timeline.setWidth(ofGetWidth() - 400);
    timeline.addCurves("master osc 1 (pulse)", ofRange(0, 1));
    timeline.addCurves("master osc 2 (triangle)", ofRange(0, 1));
    timeline.addCurves("envelope amount (x8)", ofRange(0, 1));
    timeline.addCurves("lfo 2 rate", ofRange(0, 1));
    timeline.addBangs("midi events");
    ofAddListener(timeline.events().bangFired, this, &ofApp::bang);
}

void ofApp::update(){
    noiseMaker.set(TALNoiseMaker_osc1volume, timeline.getValue("master osc 1 (pulse)"));
    noiseMaker.set(TALNoiseMaker_osc2volume, timeline.getValue("master osc 2 (triangle)"));
    noiseMaker.set(TALNoiseMaker_envelopeeditoramount, timeline.getValue("envelope amount (x8)"));
    noiseMaker.set(TALNoiseMaker_lfo2rate, timeline.getValue("lfo 2 rate"));
}

void ofApp::bang(ofxTLBangEventArgs &args) {
    if(args.flag == "") {
        chain.midi()->sendNoteOn(1, note);
    } else {
        chain.midi()->sendNoteOn(1, ofToInt(args.flag));
    }
}

void ofApp::draw(){
    manager.draw();
    timeline.draw();
}
    

Mixing oscillators, filter envelopes and LFO rates

Sketch 2015-06-28

Sketch 2015-06-27

        void ofApp::setup(){
    ofSetWindowShape(1000, 1000);
    manager.setup();
    manager.toggleDebugUI();
    setupAudioUnits();
    setupTimeline();

    playing = false;
    note = 60;
}

void ofApp::setupAudioUnits() {
    manager.add(&chain, "tal-one", ofColor::blue);
    chain.link(&noiseMaker).toMixer();
    manager.loadPresets(&chain);
}

void ofApp::setupTimeline() {
    timeline.setup();
    timeline.setLoopType(OF_LOOP_NORMAL);
    timeline.setDurationInSeconds(30);
    timeline.setOffset(ofVec2f(10, 450));
    timeline.setWidth(ofGetWidth() - 400);
    timeline.addCurves("osc crush bits", ofRange(0, 1));
    timeline.addCurves("delay wet", ofRange(0, 1));
    timeline.addCurves("delay time", ofRange(0, 1));
    timeline.addBangs("midi events");
    ofAddListener(timeline.events().bangFired, this, &ofApp::bang);
}

void ofApp::update(){
    noiseMaker.set(TALNoiseMaker_oscbitcrusher, timeline.getValue("osc crush bits"));
    noiseMaker.set(TALNoiseMaker_delaywet, timeline.getValue("delay wet"));
    noiseMaker.set(TALNoiseMaker_delaytime, timeline.getValue("delay time"));
}

void ofApp::bang(ofxTLBangEventArgs &args) {
    if(args.flag == "") {
        chain.midi()->sendNoteOn(1, note);
    } else {
        chain.midi()->sendNoteOn(1, ofToInt(args.flag));
    }
}

void ofApp::draw(){
    manager.draw();
    timeline.draw();
}
    

Playing with delay and the bit crusher

Sketch 2015-06-27

Sketch 2015-06-26

        void ofApp::setup(){
    ofSetWindowShape(1000, 1000);
    manager.setup();
    manager.toggleDebugUI();
    setupAudioUnits();
    setupTimeline();

    playing = false;
    note = 60;
}

void ofApp::setupAudioUnits() {
    manager.add(&chain, "tal-one", ofColor::blue);
    chain.link(&noiseMaker).toMixer();
    manager.loadPresets(&chain);
}

void ofApp::setupTimeline() {
    timeline.setup();
    timeline.setLoopType(OF_LOOP_NONE);
    timeline.setDurationInSeconds(10);
    timeline.setOffset(ofVec2f(10, 450));
    timeline.setWidth(ofGetWidth() - 400);
    timeline.addBangs("midi");
    timeline.addCurves("lfo rate", ofRange(0.03, 0.2));
    timeline.addCurves("filter cutoff", ofRange(0, 1));
    ofAddListener(timeline.events().bangFired, this, &ofApp::bang);
}

void ofApp::update(){
    noiseMaker.set(TALNoiseMaker_lfo2rate, timeline.getValue("lfo rate"));
    noiseMaker.set(TALNoiseMaker_cutoff, timeline.getValue("filter cutoff"));
}

void ofApp::bang(ofxTLBangEventArgs &args) {
    if(args.flag == "") {
        chain.midi()->sendNoteOn(1, note);
    } else {
        chain.midi()->sendNoteOn(1, ofToInt(args.flag));
    }
}
    

Modulating filter cutoff and LFO rate

Sketch 2015-06-26

Sketch 2015-06-25

        void ofApp::setupAnim() {
    masker.setup(2);
    image1.setup("texture1.png");
    image2.setup("foil.png", 0.5);
    degrees = rotation = 0;
    paused = true;
}

void ofApp::updateAnim(){
    if(ofGetFrameNum() % 5 == 0) {
        degrees += 90;
        image1.setTextureOffset(ofRandom(2), ofRandom(2));
        image1.setTextureScale(ofRandom(1, 2));
        scaleIncrement = ofRandom(1) > 0.5 ? 0.3 : -0.3;
        translateIncrement.x = ofRandom(1) > 0.5 ? 0.5 : -0.5;
        translateIncrement.y = ofRandom(1) > 0.5 ? 0.05 : -0.05;
        pointIncrement1.x = ofRandom(1) > 0.5 ? 16 : -8;
        pointIncrement1.y = ofRandom(1) > 0.5 ? 8 : -16;
        pointIncrement2.x = ofRandom(1) > 0.5 ? 16 : -8;
        pointIncrement2.y = ofRandom(1) > 0.5 ? 8 : -16;
        pointIncrement3.x = ofRandom(1) > 0.5 ? 16 : -8;
        pointIncrement3.y = ofRandom(1) > 0.5 ? 8 : -16;
        randomTriangle(triangle1);
        randomTriangle(triangle2);
        randomTriangle(triangle3);
    }
    
    image1.incrementTextureScale(scaleIncrement);
    image1.incrementTextureOffset(translateIncrement);
    image2.incrementTextureOffsetY(0.02);
    for(int i = 0; i < 3; i++) {
        triangle1.at(i) += pointIncrement1;
        triangle2.at(i) += pointIncrement2;
        triangle3.at(i) += pointIncrement3;
    }
    
    masker.beginLayer(0);
    {
        drawGradientBackground();
    }
    masker.endLayer(0);
    
    masker.beginMask(0);
    {
        ofPushStyle();
        {
            ofBackground(ofColor::white);
            ofSetColor(ofColor::black);
            drawTriangle(triangle1);
            drawTriangle(triangle2);
            drawTriangle(triangle3);
        }
        ofPopStyle();
    }
    masker.endMask(0);
    
    masker.beginLayer(1);
    {
        rotation += 4;
        rotateScreen(rotation);
        ofSetColor(ofColor::red, ofGetFrameNum() == 0 ? 255 : 110);
        image1.draw();
    }
    masker.endLayer(1);
    
    masker.beginMask(1);
    {
        ofBackground(ofColor::black);
        masker.drawLayer(0);
    }
    masker.endMask(1);
}

void ofApp::drawAnim() {
    if(ofGetFrameNum() == 0) {
        ofBackground(ofColor::black);
    }
    ofSetColor(ofColor::red, ofGetFrameNum() == 0 ? 255 : 128);
    image2.draw();

    ofSetColor(ofColor::black, 128);
    ofRect(0, 0, width, height);

    ofPushMatrix();
    {
        masker.draw();
    }
    ofPopMatrix();
    masker.drawOverlay();
    
    if(ofGetFrameNum() == 100) {
        paused = false;
    }
    
    if(ofGetFrameNum() == 200) {
        renderGif();
    }
}

void ofApp::drawTriangle(vector<ofPoint> &triangle) {
    ofBeginShape();
    for(int i = 0; i < 3; i++) {
        ofVertex(triangle.at(i).x, triangle.at(i).y);
    }
    ofEndShape();
}

void ofApp::drawGradientBackground() {
    rotateScreen(degrees);
    ofBackground(ofColor::black);
    ofBackgroundGradient(ofColor::white, ofColor::black, OF_GRADIENT_LINEAR);
}

void ofApp::randomTriangle(vector<ofPoint> &triangle) {
    triangle.clear();
    for(int i = 0; i < 3; i++) {
        triangle.push_back(ofPoint(ofRandom(-width, doubleWidth), ofRandom(-height, doubleHeight)));
    }
}

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

Revelations

Daily sketch

Sketch 2015-06-24

        void ofApp::setupAnim() {
    paused = true;
    numLayers = 6;
    topLayer1 = numLayers - 2;
    topLayer2 = numLayers - 1;
    spacing = 100;
    offset = offset2 = 0;
    increment = 20;
    masker.setup(numLayers);
    
    image.setup("surface.png", width, height, 1, TEXTURE_OFFSET_BOTTOM_LEFT);
    image.incrementTextureOffsetY(0.5);
}

void ofApp::updateAnim(){
    incrementOffset();
    
    for(int i = 0; i < numLayers - 2; i++) {
        masker.beginLayer(i);
        {
            ofBackground(ofColor(ofColor::black, 0));
            hue = ofMap(i, 0, numLayers, 20, 140);
            ofSetColor(ofColor::fromHsb(hue, 255, 255, 240));
            thickness = ofMap(sin(ofGetFrameNum() * 0.01), -1, 1, 10, 50);
            ofTranslate(0, i * 10);
            drawLines(offset, spacing, thickness);
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofBackground(ofColor::black);
            ofSetColor(ofColor::white);
            thickness = ofMap(sin(ofGetFrameNum() * 0.1), -1, 1, 10, 70);
            ofTranslate(0, i * 10);
            drawLines(offset2, spacing, thickness);
        }
        masker.endMask(i);
    }
    
    masker.beginLayer(topLayer1);
    image.draw();
    masker.endLayer(topLayer1);
    
    masker.beginLayer(topLayer2);
    rotateScreen(90);
    image.draw();
    masker.endLayer(topLayer2);
}

void ofApp::drawAnim() {
    ofPushMatrix();
    {
        ofSetColor(ofColor::black, 20);
        ofRect(0, 0, width, height);
        masker.drawLayers(0, 4);
        ofScale(0.5, 0.5);
        rotateScreen(90);
        
        masker.drawLayer(2);
        
        masker.draw();
        ofScale(0.5, 0.5);
        rotateScreen(90);
        
        masker.drawLayer(1);
    }
    ofPopMatrix();
    masker.drawLayer(5);
    masker.drawOverlay();
    
    if(ofGetFrameNum() == 92) {
        paused = false;
    }
    
    if(ofGetFrameNum() == 162) {
        renderGif();
    }
}

void ofApp::incrementOffset() {
    offset+=increment;
    if(offset >= spacing) {
        offset = 0;
    }
    
    offset2-=increment;
    if(offset2 <= -spacing) {
        offset2 = 0;
    }
}

void ofApp::drawLines(float _offset, float _spacing, float _thickness) {
    for(int y = -height; y < doubleHeight; y += _spacing) {
        ofRect(-width, y + _offset, tripleWidth, _thickness);
    }
}

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

It's a glitch.

Daily sketch