Zan Armstrong

Slinkies and Amplification

Tue, 02 Dec 2014 00:00:00 +0000

A friend at school attached a slinky to a box today for part of a project. The best part was that the box worked as a surprisingly good amplifier. It was fun to see how fundamentally simple amplification actually is… and to enjoy the great sounds a slinky can make. Evidently it’s pretty similar to how they created the Star Wars blasters sounds!

Opening a link from a data visualization

Tue, 02 Dec 2014 00:00:00 +0000

Love that Sarah’s D3 scatterplot example shows how easy it is to click to open a relevant URL from within a data visualization. The scatterplot shows some meta data about Van Gogh’s paintings, and if you click on the dot you’re redirected to an image search result for that painting. The visualization was designed as a tutorial rather than a finished work in order to demonstrate some of what is possible with D3, the internet, and dataviz.

The relevant snippet is:

.on('click', function(d){ window.open('https://www.google.com/search?site=imghp&tbm=isch&q=van+gogh+'+d.Title); });

Wearables Conversation with David Jay and Maddy Maxie

Mon, 01 Dec 2014 00:00:00 +0000

I was super honored to welcome David Jay and Maddy Maxie to SFPC today for a conversation about wearable technology.

Maddy Maxey is CTO at The Crated, a product development studio and consultancy focused on wearable tech, enhanced apparel and computational design.

David is co-leading a smartwatch team at the Samsung Accelerator, exploring ways to push the bounds of wearable interfaces.

They’re also both wonderful people, who take a thoughtful and nuanced approach to everything they do. I enjoy conversations with them and the questions they ask. So, it was so nice to have them come visit the school and be able to welcome them to our community.

The event went well. They started with short introductions, a bit about why they are intersted in this space, and then we broke into two smaller groups to talk about what we might want to create in the wearables space. The smaller group conversation seemed to make it easier to bring out everyone’s voice, in a way that is harder when we’re having one big conversation. Afterwards we came back together as a large group. The goal was to talk about how we could get our own hands dirty and what next steps might be. But I think that most of us were still struggling to think about what potential wearables offer and what problems they could solve/needs they could meet, and weren’t quite ready to think about what our next steps might be. So, that will remain for another day. Instead someone asked what made them excited about wearables and I asked what they worried about. I really enjoyed seeing their curiosity and sense of possibility balanced with concerns about the challenges, and they’re interest in addressing those challenges in their own work.

Thanks to Maddy & David for joining us!

Everything is Better with Explosions in the Sky music

Mon, 01 Dec 2014 00:00:00 +0000

Today I watched a great video of Amanda Cox’s keynote at OpenVis a few years ago. In it she said jokingly that everything looks good with “Explosions in the Sky” music playing in the background, even black and white boxes. :)

I was feeling playful, and thought it would be fun to test this theory. It’s totally true! Code here.

Continuing Experimenting with Reordering Pixels

Wed, 26 Nov 2014 00:00:00 +0000

Continuing from where I left off in the Reordering Pixels post, I’ve now added color!

Code is here before I sorted by color and here with sort by Brightness. With a small change, I can sort by Hue instead. I’m also experimenting with vectors and arrays to see which is faster, and trying to see if having a separate color object with getHue/getBrightness functions might help. But, I think that might just be repeating what the ofColor object already does.

Also, now it’s responding to input from the computer’s camera instead of uploading still images.

With color, but in the corner and without sorting the colors.

With color, sorting by brightness.

With color, sorting by brightness, in center.

If you have a Mac, you can use the app yourself. Download it here.

Getting Data from Ballet Movements

Tue, 25 Nov 2014 00:00:00 +0000

This is cool.

Three Dimensions in Open Frameworks

Mon, 24 Nov 2014 00:00:00 +0000

Playing with 3-D in Open Frameworks, and using nodes.

Video

Reordering Pixels

Sun, 23 Nov 2014 00:00:00 +0000

I played with reordering pixels in an image based on their brightness or color. It’s not particularly novel, but I thought it would be fun.

I started with black/white/grey images since ordering on a greyscale is straightforward while ordering color is not.

The first attempt reordered horizontally, as shown below and in the code here.

and

However, I thought a circle would be more appealing. Implementing this was non-trivial, as I had to figure out how to assign the ordered colors into a spiral in the final image.

It was tempting to try to figure out how to map the i^th color in the ordered color list to some particular x/y coordinate in the final image. Instead, I ended up ordering the x/y coordinate pairs in the final image based on “spiral order.” Then I used a for loop to go through the color list and assign each color to the matching element in the sorted vector of x-y pairs. This way I never needed to figure out a mapping to a particular pixel, but rather just match up each color and pixel in order.

This code shows how I created and walked through the color list.

<em>vector <int> colors;

for (int i = 0; i < width * height; i++){
    colors.push_back(pixOrig[i]);
}

ofSort(colors);

// create a vector of all pixels, and sort them by spiral order from center
vector <ofVec2f> coords;

for (int i = 0; i < width; i++){
    for (int j = 0; j < height; j++){
        // redefine coordinates from center for sorting, note the offset needed for the center
        coords.push_back(ofVec2f(float(i) - width / 2,float(j) - height / 2));
    }
}

// sort the ordered pairs of pixels into a spiral, using function declared above
ofSort(coords, orderPixels);

// walk through the vector of ordered pixels and assign colors in order
for (int i = 0; i < colors.size(); i++){
    ofVec2f k = coords[i];
    pixFinal[int((k.y + height/2) * width + (k.x + width/2))] = colors[i];
}</em>

And, this is the sorting function “orderPixels” which was used to sort the vector of ordered pairs of coordinates.

bool ofApp::orderPixels(ofVec2f a, ofVec2f b){
// goal: return true if a > b

// check if radius a is larger than radius b, using pythagorian theorem
if(sqrt(a.x * a.x + a.y * a.y) > sqrt(b.x * b.x + b.y * b.y) + 1){
    return true;
//check if radius b is larger than radius a
} else if (sqrt(a.x * a.x + a.y * a.y) + 1 < sqrt(b.x * b.x + b.y * b.y)){
    return false;
// if the radius is within 1, check the angles
} else {
    // both points below midpoint?
    if(a.y < 0 and b.y < 0){
        // and further left?
        if(a.x < b.x){
            return true;
        } else {
            return false;
        }
    // both points above midpoint?
    } else if(a.y > 0 and b.y > 0){
        // and further right?
        if(a.x > b.x){
            return true;
        } else {
            return false;
        }
    // one point above midpoint, and the other below?
    } else if(a.y > b.y){
        return true;
    } else {
        return false;
    }
} }

The rest of the code is here.

The result is this:

and

I also played with reversing the order:

and

Next up will be defining functions to order color. This harkens back in a way to the color interpolation tests I did in D3/JS last year.

LEDs, Chess, and Connected Components

Fri, 21 Nov 2014 00:00:00 +0000

Just a few of the things from the last few days…

Nathan Teaching Chess

The team getting ready for the Silent Barn event with kids gave me a chance to make a rainbox with LED lightning in the clouds. The lights blink different colors.Super fun!

Paige made an amazing hair accessory!

Meanwhile, over in Open Framewors, I figured out how to count the connected white components in an image, like the one of the left, and color each component a different color, as shown on the right. Code is here.

Synthesizing Images Part II

Tue, 18 Nov 2014 00:00:00 +0000

Continuing on the path of Sythesizing images, this time using noise functions to help make it look more organic.

Code snippet:

int val = ofNoise( i / 50.0, j / 50.0) * ofNoise( i / 500.0, j / 500.0) * 2000 + 1; if(rand() % val < 2) { pixels[ (int)(j * w + i)] = 255 - rand() % 200; } else { pixels[ (int)(j * w + i)] = 0; }

Code snippet: int val = ofNoise( i / 200.0, j / 200.0) * ofNoise( i / 100.0, j / 100.0) * 2000 + 1;

            if(rand() % val < 2) {
                    pixels[ (int)(j * w + i)] = 255 - rand() % 200;
                } else {
                    pixels[ (int)(j * w + i)] = 0;
                }