SketchPad

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

Sketch 2015-06-23

        void ofApp::setupAnim() {
    paused = true;
    numLayers = 9;
    topLayer = numLayers - 1;
    spacing = 100;
    thickness = 50;
    offset = 0;
    increment = 2;
    masker.setup(numLayers);
    //masker.toggleOverlay();
    
    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 - 1; i++) {
        masker.beginLayer(i);
        ofBackground(ofColor(0, 0, 0, 0));
        hue = ofMap(i, 0, numLayers, 20, 140);
        ofSetColor(ofColor::fromHsb(hue, 255, 255, 240));
        rotateScreen(i * 45);
        drawLines();
        masker.endLayer(i);
        
        masker.beginMask(i);
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        rotateScreen(i * 45);
        rotateScreen(90);
        drawLines();
        rotateScreen(-90);
        masker.endMask(i);
    }
    
    masker.beginLayer(topLayer);
    masker.draw();
    masker.endLayer(topLayer);
    
    masker.beginMask(topLayer);
    ofSetColor(ofColor::white);
    image.incrementTextureOffsetX(0.02857142857);
    image.draw();
    rotateScreen(180);
    image.draw();
    rotateScreen(90);
    image.draw();
    rotateScreen(180);
    image.draw();
    masker.endMask(topLayer);
    
}

void ofApp::drawAnim() {
    if(ofGetFrameNum() == spacing) {
        paused = false;
    }
    ofBackground(ofColor::black);
    masker.drawLayer(topLayer);
    masker.drawOverlay();
    if(ofGetFrameNum() == spacing + (spacing / increment)) {
        renderGif();
    }
}

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

void ofApp::drawLines() {
    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);
}
    

Textures and computer graphics

Daily sketch

Sketch 2015-06-22

        void ofApp::setupAnim() {
    masker.setup();
    layer1 = masker.newLayer();
    image1.setup("cardboard.png", width, height, 1, TEXTURE_OFFSET_MIDDLE_CENTER);
    image2.setup("cardboard-mask.png", width, height, 1, TEXTURE_OFFSET_MIDDLE_CENTER);
}

void ofApp::updateAnim(){
    masker.beginLayer(layer1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        image1.incrementTextureOffsetY(0.02);
        image1.draw();
    }
    masker.endLayer(layer1);

    masker.beginMask(layer1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white);
        image2.incrementTextureOffsetY(-0.02);
        image2.draw();
    }
    masker.endMask(layer1);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white);
    masker.draw();
    if(ofGetFrameNum() == 100) {
        renderGif();
    }
}
    

Overlaying the same texture as a mask

Daily sketch

Sketch 2015-06-21

        void ofApp::setupAnim() {
    velocities[TEXTURE_OFFSET_TOP_RIGHT] = -0.004;
    velocities[TEXTURE_OFFSET_MIDDLE_RIGHT] = 0.004;
    velocities[TEXTURE_OFFSET_BOTTOM_RIGHT] = 0.004;
    
    image1.setup("cardboard.png", halfWidth, height, 1);
    image2.setup("cardboard.png", -halfWidth, height, 1);
    image2.setPlanePosition(width, 0);
}

void ofApp::updateAnim(){
    if(ofGetFrameNum() % 10 == 0) {
        lastOffset1 = getRandomOffset();
        image1.setTextureOffset(lastOffset1);
        lastOffset2 = getRandomOffset();
        image2.setTextureOffset(lastOffset2);
    }
    image1.incrementTextureOffsetY(velocities[lastOffset1]);
    image2.incrementTextureOffsetY(velocities[lastOffset2]);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    image1.draw();
    image2.draw();
    if(ofGetFrameNum() == 70) {
        renderGif();
    }
}

ofxTexturePlaneOffset ofApp::getRandomOffset() {
    switch((int)floor(ofRandom(3))) {
        case 0:
            return TEXTURE_OFFSET_TOP_RIGHT;
        case 1:
            return TEXTURE_OFFSET_MIDDLE_RIGHT;
        case 2:
            return TEXTURE_OFFSET_BOTTOM_RIGHT;
    }
}
    

Just moving textures around.

Daily sketch

Sketch 2015-06-20

        void ofApp::setupAnim() {
    leafVertical.setup("leaf-vertical.png", width, height, 1, TEXTURE_OFFSET_MIDDLE_CENTER);
    leafDiagonal.setup("leaf-diagonal.png", width, height, 4, TEXTURE_OFFSET_MIDDLE_CENTER);
    leafStar.setup("leaf-star.png", width, height, 2, TEXTURE_OFFSET_MIDDLE_CENTER);
    planes.push_back(&leafVertical);
    planes.push_back(&leafDiagonal);
    planes.push_back(&leafStar);

    mask1.setup("mask-texture-1.png", width, height, 8, TEXTURE_OFFSET_MIDDLE_CENTER);
    masks.push_back(&mask1);
    mask2.setup("mask-texture-2.png", width, height, 10, TEXTURE_OFFSET_MIDDLE_CENTER);
    masks.push_back(&mask2);

    numLayers = 2;
    layerIds = masker.setup(width, height, numLayers);
    increment = 0.02;
}

void ofApp::updateAnim(){
    leafStar.incrementTextureOffsetY(increment);

    for(int i = 0; i < numLayers; i++) {
        masker.beginLayer(layerIds.at(i));
        {
            scale1 = ofMap(sin(ofGetFrameNum() * increment), -1, 1, 0.7, 5);
            scale2 = ofMap(cos(ofGetFrameNum() * increment), -1, 1, 2.5, 4);
            ofSetColor(ofColor::red, alpha);
            planes.at(i)->incrementTextureOffsetY(i % 2 == 0 ? increment : -increment);
            planes.at(i)->setTextureScale(i % 2 == 0 ? scale1 : scale2);
            planes.at(i)->draw();
        }
        masker.endLayer(layerIds.at(i));

        masker.beginMask(layerIds.at(i));
        {
            maskIncrement = ofGetFrameNum() * ((i % 2) - 0.5) * 0.125;
            maskIncrement = ofMap(sin(maskIncrement), 1, -1, 0.001, -0.001);
            if(i % 2 == 1) maskIncrement *= 5;
            
            scale1 = ofMap(sin(ofGetFrameNum() * increment), -1, 1, 3, 9);
            scale2 = ofMap(cos(ofGetFrameNum() * increment), -1, 1, 6, 12);

            ofBackground(ofColor::black);
            ofSetColor(ofColor::white);
            masks.at(i)->incrementTextureOffsetY(maskIncrement);
            masks.at(i)->setTextureScale(i % 2 == 0 ? scale1 : scale2);
            masks.at(i)->draw();
        }
        masker.endMask(layerIds.at(i));
    }
}

void ofApp::drawAnim() {
    alpha = ofGetFrameNum() == 0 || ofRandom(1) > 0.5 ? 255 : 128;
    ofSetColor(ofColor::red, alpha);
    leafStar.draw();

    ofSetColor(ofColor::white);
    masker.draw();
    if(ofGetFrameNum() == numFrames) {
        renderGif();
    }
}
    

Leaves

Daily sketch

Sketch 2015-06-19

        void ofApp::setupAnim() {
    timeline.setOutPointAtFrame(48);
    timeline.addCurves("layer-1-alpha", ofRange(0, 255));
    timeline.addCurves("layer-2-alpha", ofRange(0, 255));
    timeline.addCurves("layer-3-alpha", ofRange(0, 255));
    timeline.addCurves("layer-1-scale", ofRange(1, 4));
    timeline.addCurves("layer-2-scale", ofRange(1, 4));
    timeline.addCurves("layer-3-scale", ofRange(1, 4));
    timeline.addCurves("layer-1-x", ofRange(0, 1));
    timeline.addCurves("layer-1-y", ofRange(0, 1));
    timeline.addCurves("layer-2-x", ofRange(0, 1));
    timeline.addCurves("layer-2-y", ofRange(0, 1));
    timeline.addCurves("layer-3-x", ofRange(0, 1));
    timeline.addCurves("layer-3-y", ofRange(0, 1));
    timeline.togglePlay();

    leafVertical.setup("leaf-vertical.png", width, height, 2, TEXTURE_OFFSET_BOTTOM_RIGHT);
    leafDiagonal.setup("leaf-diagonal.png", width, height, 2, TEXTURE_OFFSET_BOTTOM_RIGHT);
    leafStar.setup("leaf-star.png", width, height, 2, TEXTURE_OFFSET_MIDDLE_CENTER);
    planes.push_back(&leafVertical);
    planes.push_back(&leafDiagonal);
    planes.push_back(&leafStar);

    masker.setup(width, height);
    masker.newLayer();
    masker.newLayer();
    masker.newLayer();
}

void ofApp::updateAnim(){
    for(int i = 0; i < planes.size(); i++) {
        ID = ofToString(i+1);
        alpha = timeline.getValue("layer-" + ID + "-alpha");
        scale = timeline.getValue("layer-" + ID + "-scale");
        position.x = timeline.getValue("layer-" + ID + "-x");
        position.y = timeline.getValue("layer-" + ID + "-y");
        masker.beginLayer(i);
        {
            ofSetColor(ofColor::white);
            planes.at(i)->setTextureScale(scale);
            planes.at(i)->setTexturePosition(position.x, position.y);
            planes.at(i)->draw();
        }
        masker.endLayer(i);
        
        masker.beginMask(i);
        {
            ofBackground(ofColor::black);
            ofSetColor(ofColor::white, alpha);
            ofRect(0, 0, width, height);
        }
        masker.endMask(i);
    }
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white);
    masker.draw();
    if(ofGetFrameNum() == 48) {
        renderGif();
    }
}
    

Sometimes it doesn't look like much has changed. But the movements in this sketch are based on a series of improvements to ofxTexturePlane, and the integration of ofxTimeline - opening up new possibilities going forward.

Daily sketch

Sketch 2015-06-18

        void ofApp::setupAnim() {
    masker.setup();
    layer1 = masker.newLayer();
    layer2 = masker.newLayer();
    layer3 = masker.newLayer();

    leafVertical.setup("leaf-vertical.png", 2, TEXTURE_OFFSET_BOTTOM_RIGHT);
    leafDiagonal.setup("leaf-diagonal.png", 2, TEXTURE_OFFSET_BOTTOM_RIGHT);
    leafStar.setup("leaf-star.png", 2, TEXTURE_OFFSET_MIDDLE_CENTER);
    
    layer1Alpha = 0;
    layer2Alpha = 0;
    layer3Alpha = 0;
}

void ofApp::updateAnim() {
    masker.beginLayer(layer1);
    {
        ofSetColor(ofColor::white);
        leafVertical.incrementTextureScale(0.02);
        leafVertical.incrementTextureOffset(0.01, 0.025);
        leafVertical.draw();
    }
    masker.endLayer(layer1);

    masker.beginMask(layer1);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white, animateAlpha(0, 13, layer1Alpha));
        ofRect(0, 0, width, height);
    }
    masker.endMask(layer1);
    
    masker.beginLayer(layer2);
    {
        ofSetColor(ofColor::white);
        if(ofGetFrameNum() > 21) {
            leafDiagonal.incrementTextureScale(-0.04);
            leafDiagonal.incrementTextureOffset(0.016, 0.016);
        }
        leafDiagonal.draw();
    }
    masker.endLayer(layer2);
    
    masker.beginMask(layer2);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white, animateAlpha(21, 39, layer2Alpha));
        ofRect(0, 0, width, height);
    }
    masker.endMask(layer2);
    
    masker.beginLayer(layer3);
    {
        ofSetColor(ofColor::white);
        if(ofGetFrameNum() > 36) {
            leafStar.incrementTextureScale(-0.04);
            leafStar.incrementTextureOffset(0.001, 0.001);
        }
        leafStar.draw();
    }
    masker.endLayer(layer3);
    
    masker.beginMask(layer3);
    {
        ofBackground(ofColor::black);
        ofSetColor(ofColor::white, animateAlpha(36, 50, layer3Alpha));
        ofRect(0, 0, width, height);
    }
    masker.endMask(layer3);
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    ofSetColor(ofColor::white);

    masker.draw();
    masker.drawOverlay();

    if(ofGetFrameNum() > 40 && layer3Alpha <= 0) {
        renderGif();
    }
}

float ofApp::animateAlpha(int fromFrame, int toFrame, float &alpha) {
    if(ofGetFrameNum() > fromFrame && ofGetFrameNum() <= toFrame && alpha < 255) {
        alpha += 30;
    }
    
    if(ofGetFrameNum() > toFrame && alpha > 0) {
        alpha -= 30;
    }
    
    return alpha;
}
    

Developing the texture planing toolkit...

Daily sketch

Sketch 2015-06-17

        void ofApp::setupAnim() {
    numImages = 8;
    highestIndex = numImages - 1;
    image.setup("surface.png");
    for(int i = 0; i < numImages; i++) {
        image.setTextureOffsetX(ofRandom(500));
        image.setTextureScale(ofMap(i, 0, highestIndex, 2, 0.35));
        image.setPlaneHeight(ofMap(i, 0, highestIndex, 500, 200));
        image.setPlanePosition(0, ofMap(i, 0, highestIndex, -50, 300));
        images.push_back(image);
        imgColors.push_back(ofColor(ofMap(i, 0, highestIndex, 100, 255), ofMap(i, 0, highestIndex, 100, 0), 0, ofMap(i, 0, highestIndex, 0, 255)));
    }

    system.setup();
    shape.setupGradientSquare(70, height * 2);
    shape.positionX(-halfWidth - 35);
    shape.positionY(40);
    shape.setColor(ofColor(ofColor::white, 96));
    system.add(shape);
}

void ofApp::updateAnim(){
    for(int i = 0; i < numImages; i++) {
        images.at(i).incrementTextureOffsetX(i % 2 == 0 ? 0.03 : -0.03);
    }
}

void ofApp::drawAnim() {
    ofBackground(ofColor::black);
    
    ofEnableAlphaBlending();
    for(int i = 0; i < numImages; i++) {
        ofSetColor(imgColors.at(i));
        rotateScreen(90);
        images.at(i).draw();
        rotateScreen(180);
        images.at(i).draw();
        rotateScreen(90);
    }
    
    rotateScreen(180);
    system.draw();
    rotateScreen(180);
    system.draw();
    
    ofDisableAlphaBlending();
    
    if(ofGetFrameNum() == 67) {
        renderGif();
    }
}

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

Vanishing point

Daily sketch