From Godel, Escher, Bach by Douglas Hofstadter.
Programming skeuomorphoism, or I guess just metaphor.
Toggle effect dissection.
This one was fun/ridiculous.
So I knew basically what I wanted for this toggle animation for a long time, but getting it to look this simple took a stack of divs.
In my first pass I put the black sliding box in between the grey background and the text links. I used an angular directive and a css transition to move and adjust the width of the box when a link was clicked, and was 90% there. The problem was the text color. I needed to change the text to white. If I changed it immediately there was a split second of white on grey. Setting a transition on the color helped a little but gave it this kind of weird pop effect. What I really wanted was the text to change immediately to white as the box passed over it. But how to get there…
I’d come across this before and knew there was a stacked div solution to get the effect. The first layer would be a grey box with black text. Then an absolutely positioned div with hidden overflow, 0 width and a black background on-top of that. Inside that div an absolutely positioned div with the same text and width as the first layer (but with white text). Animate the width of the middle div and you get text that changes color as the rectangle passes over it. So basically you are doing convoluted masking with the middle box.
And that would have worked in this case except for when the black box slid across the middle (‘Friends’). For the trick to work you need a constant x position for the expanding layer to work off of. I could not figure out a way to do it where the ‘Friends’ wouldn’t be moving horizontally. I’m probably not explaining the problem very clearly, but I don’t want to spend too much more time writing about what didn’t work.
So on to the solution! Basically I stacked more divs. I figured out on the subway home that I could get the constant x position I needed if I built my masking box twice for the all of the elements. So, in the final version there is a base layer where all the links are black and white. There are then two more versions of the boxes + text, one absolutely positioned and pinned to the left and one pinned to the right. Their width is then adjusted on click to cover the boxes that are not active, leaving only the active base box visible. Since both pinned sides have the same easing transition set they’re synced up so that it looks like the black box is moving (but really we know the grey ones are). Oh and of course I had to put another layer on top of that with the actual clickable elements.
A lot of it was the strange personal reading history coincidences that you can never explain that well (feels like trying to explain why a dream you had was interesting), but Babel-17 was the most imagination-expanding book I’ve read in a while. The language as limiting/enabling your conception of what can exist took me back to a college Foucault/Borges paper, and then that moved into computer languages and ‘strange loops’ and stuff I think about more now. And then the worlds themselves, with prevalent animal-influenced body mods, polyamorous relationships and a general sense that everybody is free to do their own thing.
Great experiment and write-up on generating a font out of the average of other fonts.
Haha, this sounds like a lot of stuff I listen to.
John Matrix is the Spotify hit artist created by internet security consultant Peter Fillmore. Not being a musician Fillmore generated short midi clips using WolframTones: “WolframTones works by taking ‘simple programs’ from Wolfram’s computational universe, and using music theory and Mathematica algorithms to render them as music." Fillmore’s scripts would then splice these with public domain samples, creating a generative sound unlike anything else.
Then to get these songs to the top of the charts, the engineer created some bot fans that would listen to John Matrix’s music 24/7. Running on Amazon servers, a bash script would automate the act of playing the tunes on Spotify. John Matrix soon had amassed millions of plays and made $1000 in royalties. The high chart positions of these songs prompted human listeners to complain, resulting in the account being shut down after a month.
Fillmore narrates the whole story with technical details at his Ruxcon talk.