SketchPad

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

Sketch 2015-05-12

        void ofApp::setupAnim() {
    maskOpacity = 255;

    for(int i = 0; i < 50; i++) {
        position.x = ofRandom(-width, width*2);
        position.y = ofRandom(-height, height*2);
        position.z = ofRandom(-400, 0);
        size = ofRandom(20, 380);
        thickness = size * 0.18;
        
        ofxShape square;
        square.setupHollowSquare(thickness, size);
        square.setPosition(position);
        square.setBlur(2);
        shapes.push_back(square);

        ofxShape ring;
        ring.setupHollowRing(60, thickness, size);
        ring.setPosition(position);
        ring.rotateY(90);
        ring.setBlur(2);
        shapes.push_back(ring);
    }
    
    for(int i = 0; i < shapes.size(); i++) {
        system.add(shapes.at(i));
    }
}

void ofApp::updateAnim(){
    float brightness = ofMap(sin(ofGetFrameNum() * 0.03), -1, 1, 0, 255);
    ofColor color = ofColor(brightness, brightness, brightness, 100);

    for(int i = 0; i < shapes.size(); i++) {
        shapes.at(i).incrementRotateX(12);
        shapes.at(i).incrementRotateY(0.8);
        shapes.at(i).incrementRotateZ(-0.77);
        shapes.at(i).incrementPositionX(4);
        shapes.at(i).incrementPositionY(-6);
        shapes.at(i).incrementPositionZ(12);
        shapes.at(i).setColor(color);
    }
}

void ofApp::drawAnim() {
    ofEnableAlphaBlending();

    //Swallow the trails
    ofSetColor(0, 0, 0, 30);
    ofRect(0, 0, width, height);

    system.draw();

    //Fade in
    if(maskOpacity > 0 && ofGetFrameNum() < 20) {
        ofSetColor(0, 0, 0, maskOpacity);
        ofRect(0, 0, width, height);
        maskOpacity -= 25;
    }

    //Fade out
    if(ofGetFrameNum() > 20) {
        ofSetColor(0, 0, 0, maskOpacity);
        ofRect(0, 0, width, height);
        maskOpacity += 25;
    }

    ofDisableAlphaBlending();

    if(maskOpacity > 255) {
        renderGif();
    }
}
    

Going off the rails

Daily sketch

Sketch 2015-05-11

        void ofApp::setupAnim() {
    ofSetWindowShape(width, height);
    masker.setup(width, height);
    
    setupBackground();
    setupMask();
    setupForeground();
}

void ofApp::setupBackground(){
    for(int i = 0; i < width; i+=40) {
        for(int j = 0; j < height; j+=40) {
            ofxShape shape;
            shape.setupFilledSquare(26);
            shape.positionX(i+10);
            shape.positionY(j+10);
            shape.setBlur(10);
            backgroundShapes.push_back(shape);
        }
    }
    
    push(&backgroundShapes, &backgroundSystems);
}

void ofApp::setupMask(){
    for(int i = -width; i < width*2; i+=40) {
        for(int j = -width; j < height*2; j+=40) {
            ofxShape shape;
            shape.setupFilledSquare(26);
            shape.positionX(i+10);
            shape.positionY(j+10);
            shape.setBlur(10);
            maskShapes.push_back(shape);
        }
    }
    
    push(&maskShapes, &maskSystems);
}

void ofApp::setupForeground(){
    for(int i = 0; i < width; i+=40) {
        for(int j = 0; j < height; j+=40) {
            ofxShape shape;
            shape.setupFilledSquare(26);
            shape.positionX(i+30);
            shape.positionY(j+30);
            shape.setBlur(10);
            foregroundShapes.push_back(shape);
        }
    }
    
    push(&foregroundShapes, &foregroundSystems);
}

void ofApp::updateAnim(){
    float scale = ofMap(sin(ofGetFrameNum() * 0.08), -1, 1, -54, 54);
    for(int i = 0; i < maskShapes.size(); i++){
        maskShapes.at(i).positionZ(scale);
    }
}

void ofApp::drawAnim() {
    masker.beginBackground();
    draw(&backgroundSystems);
    masker.endBackground();
    
    masker.beginMask();
    draw(&maskSystems);
    masker.endMask();
    
    masker.beginForeground();
    draw(&foregroundSystems);
    masker.endForeground();
    
    masker.draw();
    
    if(ofGetFrameNum() == 78) {
        renderGif();
    }
}

void ofApp::push(vector<ofxShape> *shapes, vector<ofxShapeSystem> *systems) {
    ofxShapeSystem system;
    for(int i = 0; i < shapes->size(); i++) {
        system.add(shapes->at(i));
    }
    systems->push_back(system);
}

void ofApp::draw(vector<ofxShapeSystem> *systems) {
    ofClear(0, 0, 0, 255);
    for(int i = 0; i < systems->size(); i++) {
        systems->at(i).draw();
    }
}
    

Sometimes it's all about grids of squares

Daily sketch

Sketch 2015-05-10

        void ofApp::updateAnim(){
    masker.beginBackground();
    ofTranslate(12, 12);
    ofSetColor(ofColor::red);
    for(int i = 0; i < width; i += 50) {
        for(int j = 0; j < height; j += 50) {
            ofRect(i, j, 25, 25);
        }
    }
    masker.endBackground();
    
    masker.beginMask();
    ofClear(0, 0, 0, 255);
    ofSetColor(ofColor::white);
    diameter = ofMap(sin(ofGetFrameNum() * 0.1), -1, 1, 1, 200);
    position = ofMap(sin(ofGetFrameNum() * 0.2), -1, 1, -height, height + 10);
    ofCircle(halfWidth, position, diameter);
    masker.endMask();
    
    masker.beginForeground();
    ofTranslate(12, 12);
    ofSetColor(ofColor::blue);
    for(int i = 0; i < width; i += 25) {
        for(int j = 0; j < height; j += 25) {
            ofRect(i, j, 12, 12);
        }
    }
    masker.endForeground();
}

void ofApp::drawAnim() {
    
    masker.draw();
    
    if(ofGetFrameNum() == 62) {
        renderGif();
    }
}
    

Yes, now it's an addon

Daily sketch

Sketch 2015-05-09

        void ofApp::setupBackground(){
    for(int i = 0; i < 3; i++) {
        ofxShape shape;
        shape.setupFilledSquare(ofRandom(3, 28));
        shape.scaleX(ofRandom(3, 28));
        shape.scaleY(ofRandom(3, 28));
        shape.positionX(ofRandom(-28, width + 28));
        shape.positionY(ofRandom(-28, height + 28));
        shape.setBlur(1);
        shape.setOpacity(58);
        backgroundShapes.push_back(shape);
    }
    
    push(&backgroundShapes, &backgroundSystems);
}

void ofApp::setupMask(){
    for(int i = 0; i < 500; i++) {
        float x = ofRandom(-ringSize, width + ringSize);
        float y = ofRandom(-ringSize, height + ringSize);
        float z = ofRandom(-100, 100);
        ofxShape shape;
        shape.setupGradientRing(60, -4.6, ringSize);
        shape.setPosition(ofVec3f(x, y, z));
        shape.setBlur(ringSize * 0.5);
        shape.setOpacity(ofRandom(60, 200));
        maskShapes.push_back(shape);
        shape.setDiameter(ringSize * 0.5);
        shape.setThickness(4.6);
        maskShapes.push_back(shape);
    }
    
    push(&maskShapes, &maskSystems);
}

void ofApp::setupForeground(){
    //Background color
    ofxShape shape;
    shape.setupFilledSquare(width);
    shape.setColor(ofColor::red);
    shape.positionX(width * 0.5);
    shape.positionY(height * 0.5);
    foregroundShapes.push_back(shape);
    
    //Lines
    for(int i = 0; i < height; i += lineDistance) {
        ofxShape shape;
        shape.setupFilledSquare(lineThickness);
        shape.scaleX(height);
        shape.setColor(ofColor::blue);
        shape.positionY(i);
        shape.setBlur(lineThickness);
        foregroundShapes.push_back(shape);
    }
    
    //Color filter
    shape.setupFilledSquare(width);
    shape.rotateZ(-38);
    shape.scaleY(3);
    shape.positionX(-250);
    shape.setColor(ofColor::purple);
    shape.setBlur(270);
    shape.setOpacity(220);
    foregroundShapes.push_back(shape);
    shape.positionX(500);
    foregroundShapes.push_back(shape);
    
    push(&foregroundShapes, &foregroundSystems);
}

void ofApp::updateAnim(){
    for(int i = 0; i < maskShapes.size(); i += 2) {
        float y = 5 + maskShapes.at(i).getPosition().y;
        if(y > height) {
            y -= height;
        }
        maskShapes.at(i    ).positionY(y);
        maskShapes.at(i + 1).positionY(y);
    }
    
    for(int i = 1; i < foregroundShapes.size() - 2; i++) {
        float y = foregroundShapes.at(i).getPosition().y - (lineDistance * 0.04);
        if(y < -lineThickness) y = height;
        foregroundShapes.at(i).positionY(y);
    }
}
    

Three systems overlaid: background gray boxes, rings in the mask layer, horizontal lines in the foreground

Daily sketch

Sketch 2015-05-08

    void ofApp::updateAnim(){
    max = ofMap(sin(ofGetFrameNum() * 0.04), -1, 1, 16, 50);
    num = ofMap(cos(ofGetFrameNum() * 0.04), -1, 1, 3000, 40);
}

void ofApp::drawAnim() {
    ofBackground(0, 0, 0);
    
    for(int i = 0; i < num; i++) {
        ofSetColor(255, 255, 255, 100);
        if(i % 2 == 0) ofSetColor(255, 0, 0, 100);
        ofRect(ofRandom(-max, width),
               ofRandom(-max, height),
               ofRandom(max),
               ofRandom(max));
    }
    
    if(ofGetFrameNum() == 150) {
        renderGif();
    }
}
  

A false sense of directional movement.

Daily sketch

Sketch 2015-05-07

        //This is all about shapes and shader-alpha masking
ofFbo bottomLayer, maskLayer, topLayer;

void ofApp::setupBottomLayer(){
    for(int i = -width; i < width*2; i += width * 0.01) {
        ofxShape shape;
        shape.setupFilledSquare(width - (width * 0.01));
        shape.scaleX(0.001);
        shape.setBlur(3);
        shape.setColor(ofColor::red);
        shape.positionX(ofMap(i, 0, width, width * 0.05, width * 0.99));
        shape.positionY(height * 0.5);
        bottomLayerShapes.push_back(shape);
    }
    
    ofxShapeSystem system1;
    for(int i = 0; i < bottomLayerShapes.size(); i++) {
        system1.add(bottomLayerShapes.at(i));
    }
    bottomLayerSystems.push_back(system1);
}

void ofApp::setupMaskLayer(){
    ofxShape shape;
    shape.setupFilledRing(60, width * 0.45);
    shape.positionX(width * 0.5);
    shape.positionY(height * 0.5);
    maskLayerShapes.push_back(shape);
    
    ofxShapeSystem system1;
    for(int i = 0; i < maskLayerShapes.size(); i++) {
        system1.add(maskLayerShapes.at(i));
    }
    maskLayerSystems.push_back(system1);
}

void ofApp::setupTopLayer(){
    for(int i = 0; i < height; i += height * 0.08) {
        ofxShape shape;
        shape.setupFilledSquare(height - (height * 0.05));
        shape.scaleY(0.03);
        shape.setBlur(3);
        shape.positionX(width * 0.5);
        shape.positionY(ofMap(i, 0, height, height * 0.05, height * 0.99));
        topLayerShapes.push_back(shape);
    }
    
    ofxShapeSystem system1;
    for(int i = 0; i < topLayerShapes.size(); i++) {
        system1.add(topLayerShapes.at(i));
    }
    topLayerSystems.push_back(system1);
}

void ofApp::updateAnim(){
    float faster = sin(ofGetFrameNum() * 0.1);
    float slower = sin(ofGetFrameNum() * 0.025);
    maskLayerShapes.at(0).setBlur(ofMap(faster, -1, 1, 3, 300));
    maskLayerShapes.at(0).rotateZ(ofMap(slower, -1, 1, 0, 90));
    
    bottomLayer.begin();
    ofClear(0, 0, 0, 255);
    ofPushMatrix();
    ofTranslate(width * 0.5, height * 0.5);
    ofRotateZ(ofMap(faster, -1, 1, 45, 135));
    ofTranslate(-width * 0.5, -height * 0.5);
    for(int i = 0; i < bottomLayerSystems.size(); i++) {
        bottomLayerSystems.at(i).update();
        bottomLayerSystems.at(i).draw();
    }
    ofPopMatrix();
    bottomLayer.end();
    
    maskLayer.begin();
    ofClear(0, 0, 0, 255);
    for(int i = 0; i < maskLayerSystems.size(); i++) {
        maskLayerSystems.at(i).update();
        maskLayerSystems.at(i).draw();
    }
    maskLayer.end();
    
    topLayer.begin();
    ofClear(0, 0, 0, 255);
    ofPushMatrix();
    ofTranslate(width * 0.5, height * 0.5);
    ofRotateZ(ofMap(faster, -1, 1, 135, 45));
    ofTranslate(-width * 0.5, -height * 0.5);
    for(int i = 0; i < topLayerSystems.size(); i++) {
        topLayerSystems.at(i).update();
        topLayerSystems.at(i).draw();
    }
    ofPopMatrix();
    topLayer.end();
}
    

It's been a very, very long day...

Daily sketch

Sketch 2015-05-06

        void ofApp::setupAnim() {
    paused = true;
    
    for(int i = 5; i > 0; i--) {
        vector<ofxShape> shapeLayer;
        ofxAnimatableFloat positionZ;
        animDuration = 4;
        positionZ.reset(i * 8);
        positionZ.animateToAfterDelay(-(i * 300), ofMap(i, 5, 1, 0, animDuration));
        positionZ.setDuration(animDuration);
        positionZ.setCurve(EASE_IN_EASE_OUT);
        positionZ.setRepeatType(LOOP_BACK_AND_FORTH);
        positionsZ.push_back(positionZ);
        
        ofxAnimatableFloat rotationZ;
        animDuration = 2;
        rotationZ.reset(0);
        rotationZ.animateToAfterDelay(360, ofMap(i, 5, 1, 0, animDuration));
        rotationZ.setDuration(animDuration);
        rotationZ.setCurve(EASE_IN_EASE_OUT);
        rotationZ.setRepeatType(LOOP);
        rotationsZ.push_back(rotationZ);
        
        for(int j = 0; j < i; j++) {
            for(int k = 0; k < i; k++) {
                size = (width / i) * 0.38;
                
                ofxShape shape;
                shape.setupFilledRing(60, size * 1.8);
                shape.setBlur(20);
                shape.positionX(((width / i) * j) + (width / i / 2));
                shape.positionY(((height / i) * k) + (height / i / 2));
                shape.setColor(ofColor::fromHsb(ofMap(i, 5, 1, 130, 170), 150, 60));
                shapeLayer.push_back(shape);
            }
        }
        
        shapes.push_back(shapeLayer);
    }

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

void ofApp::updateAnim(){
    for(int i = 0; i < positionsZ.size(); i++) {
        positionsZ.at(i).update(1.0f/framerate);
    }
    
    for(int i = 0; i < rotationsZ.size(); i++) {
        rotationsZ.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());
        }
    }
    
    for(int i = 0; i < shapeSystems.size(); i++) {
        shapeSystems.at(i).update();
    }
}

void ofApp::drawAnim() {
    if(ofGetFrameNum() == 82) paused = false;
    
    ofBackground(0, 0, 0);
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    for(int i = 0; i < shapeSystems.size(); i++) {
        ofPushMatrix();
        ofTranslate(width * 0.5, height * 0.5);
        ofRotateZ(rotationsZ.at(i).val());
        ofTranslate(-(width * 0.5), -(height * 0.5));
        shapeSystems.at(i).draw();
        ofPopMatrix();
    }
    ofDisableBlendMode();
    
    if(ofGetFrameNum() == 164) {
        renderGif();
    }
}
    

A modification of yesterday's sketch. Multiple shape systems rotated separately from each other.

Daily sketch