SketchPad

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

Sketch 2015-05-05

        void ofApp::setupAnim() {
    for(int i = 5; i > 0; i--) {
        vector<ofxShape> shapeLayer;
        
        for(int j = 0; j < i; j++) {
            ofxAnimatableFloat positionZ;
            positionZ.reset(-i);
            positionZ.animateToAfterDelay(i * 30, j);
            positionZ.setDuration(1.2);
            positionZ.setCurve(EASE_IN_OUT_BOUNCE);
            positionZ.setRepeatType(LOOP_BACK_AND_FORTH_ONCE);
            positionsZ.push_back(positionZ);
            
            for(int k = 0; k < i; k++) {
                size = (width / i) * 0.38;
                
                ofxShape shape;
                shape.setupFilledRing(60, size);
                shape.setBlur(15);
                shape.positionX(((width / i) * j) + (width / i / 2));
                shape.positionY(((height / i) * k) + (height / i / 2));
                shape.setColor(ofColor::fromHsb(255 / i, 128, 128));
                shapeLayer.push_back(shape);
            }
        }
        
        shapes.push_back(shapeLayer);
    }

    for(int i = 0; i < shapes.size(); i++) {
        for(int j = 0; j < shapes.at(i).size(); j++) {
            shapeSystem.add(shapes.at(i).at(j));
        }
    }
}

void ofApp::updateAnim(){
    for(int i = 0; i < positionsZ.size(); i++) {
        positionsZ.at(i).update(1.0f/framerate);
    }
    
    for(int i = 0; i < shapes.size(); i++) {
        for(int j = 0; j < shapes.at(i).size(); j++) {
            shapes.at(i).at(j).positionZ(positionsZ.at(i).val());
        }
    }
    
    shapeSystem.update();
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    shapeSystem.draw();
    ofDisableBlendMode();
    
    if(ofGetFrameNum() == 64) {
        renderGif();
    }
}
    

Wheels within wheels, and nested loops.

Daily sketch

Sketch 2015-05-04

        void ofApp::setupAnim() {
    
    done = false;
    numArcs = 8;
    
    for(int i = 0; i < numArcs; i++) {
        ofxShape arc;
        arcs.push_back(arc);
        ofxAnimatableFloat arcPosition;
        arcPositions.push_back(arcPosition);
        ofxAnimatableFloat arcRotation;
        arcRotations.push_back(arcRotation);
    }
    
    for(int i = 0; i < numArcs; i++) {
        arcPositions.at(i).setRepeatType(PLAY_ONCE);
        arcPositions.at(i).setCurve(SWIFT_GOOGLE);
        arcPositions.at(i).reset((width * 2) + (width * 0.2));
        arcPositions.at(i).animateTo(width * 0.5);
        arcPositions.at(i).setDuration(1.25);
        
        arcRotations.at(i).setRepeatType(PLAY_ONCE);
        arcRotations.at(i).setCurve(SWIFT_GOOGLE);
        arcRotations.at(i).animateFromTo(180, 0);
        arcRotations.at(i).setDuration(1.25);
        
        arcs.at(i).setupHollowArc(60, (i + 1) * 10, (i + 1) * 35, 180);
        arcs.at(i).setBlur(2);
        arcs.at(i).positionX(arcPositions.at(i).val());
        arcs.at(i).positionY(height * 0.5);
        
        //Set colors
        if(i % 3 == 0) arcs.at(i).setColor(ofColor(4,   110, 171));
        if(i % 3 == 1) arcs.at(i).setColor(ofColor(195, 62,  31));
        if(i % 3 == 2) arcs.at(i).setColor(ofColor(52,  189, 129));
        
        shapeSystem.add(arcs.at(i));
    }
}

void ofApp::updateAnim(){
    bool allFinished = true;
    
    if(!done) {
        for(int i = 0; i < numArcs; i++) {
            if(ofGetFrameNum() > (i * 7)) {
                arcPositions.at(i).update(1.0f/framerate);
                arcs.at(i).positionX(arcPositions.at(i).val());
        
                arcRotations.at(i).update(1.0f/framerate);
            
                if(i % 2 == 0) {
                    arcs.at(i).rotateZ(arcPositions.at(i).val());
                }
            
                if(i % 2 == 1) {
                    arcs.at(i).rotateZ(arcPositions.at(i).val() + 180);
                }
            }
        
            if(!arcPositions.at(i).hasFinishedAnimating()) {
                allFinished = false;
            }
        }
    }
    
    if(allFinished) {
        for(int i = 0; i < numArcs; i++) {
            arcPositions.at(i).setRepeatType(PLAY_ONCE);
            arcPositions.at(i).setCurve(SWIFT_GOOGLE);
            arcPositions.at(i).animateTo(width * 3);
        }
    }
    
    shapeSystem.update();
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    ofEnableAlphaBlending();
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    shapeSystem.draw();
    ofDisableBlendMode();
    ofDisableAlphaBlending();
    
    if(ofGetFrameNum() == 68) {
        renderGif();
    }
}
    

Things roll in. Things roll out.

Daily sketch

Sketch 2015-05-03

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    ofEnableAntiAliasing();
    
    shapeSystem.setup();
    camera.setDistance(120);
    
    for(int i = 0; i < 24; i++) {
        GradientShape ring;
        rings.push_back(ring);
    }
    
    for(int i = 0; i < rings.size(); i++) {
        if(i % 3 == 0) color.set(255, 0, 0, 80);
        if(i % 3 == 1) color.set(0, 255, 0, 80);
        if(i % 3 == 2) color.set(0, 0, 255, 80);
        
        rings.at(i).setupHollowRing(60, 3, i * 3); //Resolution, thickness, diameter
        rings.at(i).setColor(color);
        rings.at(i).setBlur(3);
        shapeSystem.add(rings.at(i));
    }
}

void ofApp::updateAnim(){
    float current = sin(ofGetFrameNum() * 0.16);
    endpoint = ofMap(current, -1, 1, 1257, 1263);
    rotation = ofMap(current, -1, 1, 0, 360);
    
    for(int i = 0; i < rings.size(); i++) {
        if(i % 6 == 0) rings.at(i).rotateX(rotation);
        if(i % 6 == 1) rings.at(i).rotateY(rotation);
        if(i % 6 == 2) rings.at(i).rotateZ(rotation);
        if(i % 6 == 3) rings.at(i).rotateX(-rotation);
        if(i % 6 == 4) rings.at(i).rotateY(-rotation);
        if(i % 6 == 5) rings.at(i).rotateZ(-rotation);
        
        rings.at(i).setArcEndpoints(0, endpoint);
    }
    shapeSystem.update();
    
    if(ofGetFrameNum() == 0) {
        firstEndpoint = endpoint;
        lastEndpoint = endpoint;
    }
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    camera.begin();
    shapeSystem.draw();
    camera.end();
    
    if(endpoint > firstEndpoint && lastEndpoint < firstEndpoint) {
        renderGif();
    }
    
    lastEndpoint = endpoint;
}
    

Like yesterday, but now going way past 2π radians (closing the ring shapes hundreds of times, which increases the alpha and generates 'star' artifacts based on segment repetition patterns over time)

Daily sketch

Sketch 2015-05-02

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    ofEnableAntiAliasing();
    
    shapeSystem.setup();
    camera.setDistance(120);
    
    for(int i = 0; i < 20; i++) {
        GradientShape ring;
        rings.push_back(ring);
    }
    
    for(int i = 0; i < rings.size(); i++) {
        if(i % 3 == 0) color.set(255, 0, 0, 80);
        if(i % 3 == 1) color.set(0, 255, 0, 80);
        if(i % 3 == 2) color.set(0, 0, 255, 80);
        
        rings.at(i).setupHollowRing(60, 3, i * 3); //Resolution, thickness, diameter
        rings.at(i).setColor(color);
        rings.at(i).setBlur(3);
        shapeSystem.add(rings.at(i));
    }
    
    circle.setupFilledRing(30, 30);
    circle.setBlur(20);
    circle.setColor(ofColor(255, 255, 255, 200));
    circle.positionZ(20);
    shapeSystem.add(circle);
}

void ofApp::updateAnim(){
    for(int i = 0; i < rings.size(); i++) {
        if(i % 6 == 0) rings.at(i).rotateX(ofGetFrameNum() * 2);
        if(i % 6 == 1) rings.at(i).rotateY(ofGetFrameNum() * 2);
        if(i % 6 == 2) rings.at(i).rotateZ(ofGetFrameNum() * 2);
        if(i % 6 == 3) rings.at(i).rotateX(-ofGetFrameNum() * 2);
        if(i % 6 == 4) rings.at(i).rotateY(-ofGetFrameNum() * 2);
        if(i % 6 == 5) rings.at(i).rotateZ(-ofGetFrameNum() * 2);
    }
    shapeSystem.update();
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    camera.begin();
    shapeSystem.draw();
    camera.end();
    if(ofGetFrameNum() == 90) {
        renderGif();
    }
}
    

A much more user-freindly shape system

Daily sketch

Sketch 2015-05-01

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    shapeSystem.setup();
    camera.setDistance(60);
    numShapes = 0;
    
    float offset = 10;
    
    color.set(255, 255, 255, 80);
    center.z -= offset;
    outerSquare.setup(++numShapes, center, 2, 4, 0, -5, 35, color);
    shapeSystem.add(outerSquare);
    
    color.set(255, 255, 255, 80);
    center.z -= offset;
    innerSquare.setup(++numShapes, center, 2, 4, 0, -5, 20, color);
    shapeSystem.add(innerSquare);
    
    center.z -= offset;
    color.set(255, 0, 0, 125);
    ring1.setup(++numShapes, center, 1, 60, 8, 8, 25, color);
    shapeSystem.add(ring1);
    
    center.z -= offset;
    color.set(255, 0, 0, 125);
    ring2.setup(++numShapes, center, 1, 60, 8, 8, 25, color);
    shapeSystem.add(ring2);
    
    center.z -= offset;
    color.set(255, 0, 0, 60);
    ring3.setup(++numShapes, center, 0, 60, 8, 8, 25, color);
    shapeSystem.add(ring3);
    
    center.z -= offset;
    color.set(255, 255, 255, 200);
    sphere.setup(++numShapes, center, 0, 60, 5, 0, 10, color);
    shapeSystem.add(sphere);
}

void ofApp::updateAnim(){
    outerSquare.rotateZ(ofMap(-ofGetFrameNum(), 1, 125, 1, 180));
    innerSquare.rotateZ(ofMap( ofGetFrameNum(), 1, 125, 1, 180));
    ring1.positionZ(sin( ofGetFrameNum() * 2       * 0.05) * 100 - 50);
    ring2.positionZ(sin((ofGetFrameNum() * 2 + 20) * 0.05) * 100 - 50);
    ring3.positionZ(sin((ofGetFrameNum() * 2 + 40) * 0.05) * 100 - 50);
    shapeSystem.update();
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    camera.begin();
    shapeSystem.draw();
    camera.end();
    if(ofGetFrameNum() == 125) {
        renderGif();
    }
}
    

Adapting code to make transformable alpha-blended geometric shapes

Daily sketch

Sketch 2015-04-30

        void ofApp::setupAnim() {
    coordinateSystemCenter = ofPoint(width * 0.5, height * 0.5);
    outerRadius = width * 0.4;
    innerRadius = width * 0.2;
    ofEnableAntiAliasing();
    ofEnableSmoothing();
    ofSetLineWidth(1);
    
    for(int i = 0; i < 30; i++) {
        innerSpread.push_back(i * 36 + ofRandom(18));
        outerSpread.push_back(i * 36 + 18 + ofRandom(18));
    }
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    ofTranslate(coordinateSystemCenter);
    
    ofPushMatrix();
    ofRotateZ(-ofGetFrameNum());
    drawArc(innerRadius, 120);
    ofPopMatrix();
    
    ofPushMatrix();
    ofRotateZ(ofGetFrameNum());
    drawArc(outerRadius, 220);
    ofPopMatrix();
    
    for(int i = 0; i < 10; i++) {
        ofPushMatrix();
        ofRotateZ(innerSpread.at(i) + ofGetFrameNum() * 4);
        ofLine(0, -height*0.2, 0, -height*0.25);
        ofPopMatrix();
    }
    
    for(int i = 0; i < 20; i++) {
        ofPushMatrix();
        ofRotateZ(innerSpread.at(i) - ofGetFrameNum() * 4);
        ofLine(0, -height*0.25, 0, -height*0.3);
        ofPopMatrix();
    }
    
    for(int i = 0; i < 30; i++) {
        ofPushMatrix();
        ofRotateZ(innerSpread.at(i) - ofGetFrameNum() * 2);
        ofLine(0, -height*0.3, 0, -height*0.5);
        ofPopMatrix();
    }
    
    for(int i = 0; i < 20; i++) {
        ofPushMatrix();
        ofRotateZ(outerSpread.at(i) - ofGetFrameNum() * 2);
        ofLine(0, -height*0.45, 0, -height*0.5);
        ofPopMatrix();
    }
    
    if(ofGetFrameNum() == 360) {
        renderGif();
    }
}
    

The magic of transforms: translate, rotate, translate. The first translation kicks off your coordinate system.

Daily sketch

Sketch 2015-04-29

        void ofApp::setupAnim() {
    ofEnableSmoothing();
    boundary = 25;
    increment = 8;
    for(int i = 0; i <= 20; i++) {
        line.addVertex(i * width * 0.05, ofRandom(-boundary, boundary));
    }
    lines.push_back(line);
}

void ofApp::updateAnim(){
    if(ofGetFrameNum() < 39) {
        for(int i = 0; i <= 20; i++) {
            line[i].y = drunkWalk(line[i].y);
        }
        lines.push_back(line);
    }
    
    if(ofGetFrameNum() >= 40) {
        if(lines.size() == 1) {
            renderGif();
        } else {
            lines.pop_back();
        }
    }
}

void ofApp::drawAnim() {
    ofBackground(0, 255, 255);
    alpha = 255;
    
    ofTranslate(0, boundary* 2);
    
    ofPushMatrix();
    for(int i = 0; i < lines.size() && alpha >= 0; i++) {
        ofSetColor(1, 131, 185, alpha);
        ofSetLineWidth(i * 0.8);
        
        ofTranslate(0, i);
        lines.at(lines.size() - 1 - i).draw();
        alpha -= 16;
    }
    ofPopMatrix();
    
    ofSetLineWidth(2);
    ofSetColor(255, 255, 255, 200);
    lines.at(lines.size() - 1).draw();
}

float ofApp::drunkWalk(float from) {
    if(from > boundary - increment) return from - increment;
    if(from < -boundary + increment) return from + increment;
    return ofRandom(1) > 0.5 ?
            from + increment :
            from - increment;
}
    

A polyline on a drunken walk

Daily sketch