#sketch 2

[sk4llsp4rklezz]

BBB and tisha

[samirafee]

#CAT ART *Sketch 2* by artist Olga Esther

@samirafee

[lastarttumbrel]

W/apologies to Marie Doro

[clarasjournal]

Experiencing sketch #2: Balloon moving vertically as a reaction of BPM

One of the first thing I noticed when experiencing this sketch was that there is a delay when you stop clapping, the BPM stays for some seconds before returning to 0. I thought this was due to the Interval MS code:

But I’ve tweaked it to different numbers and the delay remains. Could that be interesting for understanding the topic and material? Or the aesthetics of the interaction? I’m not sure yet. The delay does make it feel as though the balloon is a little suspicious of if we have really begun clapping or if we really have stopped clapping. It doesn’t want to do anything hasty. It brings a little personality into the balloon.

I decided to interact with this sketch with clapping, as I did with the previous sketch. This feels more of a visualization of the BPM than sketch #1 did. In this case it’s clearly visible that the higher BPM the lower the balloon sinks. Speaking of this, I made a change in the code that makes the balloon stay at the bottom of the container if the BPM goes over a certain limit:

To describe this experience in the attributes provided by Lenz, Diefenbach and Hasselzach (2013), the interaction felt step-wise while the response felt fluent, delayed before the computer snapped up the BPM and after I had finished clapping, but instant when I was in the middle of it. The visualization felt reliable and constant as soon as the computer had adapted itself to the BPM - it felt as though my clapping determined where on the vertical axis the balloon stayed. The interaction felt mediated rather than direct due to my clapping translated into where on a vertical axis the balloon went. A loose thought on how it might feel more direct could be if the balloon responded to where I tapped (to a certain BPM) on the screen and chose to place itself there instead. The interaction is doomed to be approximate when conducted by a human due to the human factors I described in the previous post. It’s challenging to keep a steady rhythm through clapping, especially if you don’t have any sound to clap to. Where the balloon settles or how it moves over the vertical axis can definitely feel a bit incidental, and it is if you don’t have a goal with the interaction. You might not know beforehand at what BPM you’re clapping to, so where the balloon goes feels incidental. But a way of making the interaction more targeted might be to set out certain boxes of where to keep the balloon, that would probably demand focus and concentration:

This might also stray towards being a concept, but it might also deepen our understanding of skill. I will bring this up with my partner tomorrow. I’m not at all certain on how to make this in code, but if we decide that it’s worth the time - we will figure it out.

The interaction feels apparent, the correlation between how fast you clap and where the balloon positions itself on the vertical axis is clearly visual.

I feel like this sketch is beneficial for us to both understand skill and sound. The program doesn’t register all frequencies, so you have to make sounds within a specific frequency range to be able to see the BPM you’re making. This can be interesting to further experiment with and explore. What if you can only make high-pitched sounds, or determine the BPM only if you’re drumming on a piece of wood? Would this increase our understanding of sound and skill? I think it has the potential to do so. This what if is noted and will be further evaluated and tested upon in a near future. I think we need to look up something called audacity and tune the code to only register “wood-drumming sounds”.

[clarasjournal]

Sketch 2: Balloon moving up and down according to BPM

The next step for us was to make the image on the page respond to the number of BPM by going up and down. Coding this took us quite some time, but through a lot of help from a peer student we managed to make it work. The first “prototype” of this experience can be shown through this GIF:

The code to make this work:

We started by declaring some variables to make the code a bit more simple. The ID called “text” is in this case the balloon (originally it was a string of text and we forgot to change the ID... will change this).

Then we made the top padding change according to the height of the container divided by 200 times the current BPM. This made the balloon move from the top left of the container to the bottom left of the container when the BPM got higher.

We logged the values of the heightContainer and calc into the console to see if they matched our expectations during the time we figured out the code. Eventually the values matched our expectations/hopes.

After making the code work, I decided to constrain the balloon to the container by empirically figuring out at which BPM value it hit the bottom. When the BPM is over 170 I sent the balloon flying back to the top of the container.

When I say flying back to the top I do actually mean flying back, because we made another change to the CSS code which allowed the balloon to behave more fluently than step-wise:

The code I altered in CSS to make the balloon behave more fluently was this:

This sketch will be further reflected upon and experimented with in another post. A step worth taking code-wise in this sketch is for the balloon to start from the bottom instead of from the top, so reverse the physics of the code. I am not sure on how to do this (which is why I haven’t done it), but I will try and see if I can figure it out.

[gettingbetteratartmaybe]

[rainbowsassistant]

1st 3 are refs via @vulpessentia all others are my sketches :v based on his shtuff (obv) for my second sketch aside from the one I uploaded earlier, not too bad... Right? Anyway, here's some partial garbage, I guess. (Is it dumb I put my dumb little url in there? Also, them comments.)

[littlefoxdesign]

Day 2 Shark