“The enemy of art is the absence of limitations.” - Orson Welles
The benefits of limitation is an old theme in discussion of creativity. But in this case, the arbitrary constraint also provides the inspiration. I mean, 140 characters is an enticing challenge, an excuse to shield yourself from self-criticism, and a less intimidating scope when you're deciding to start a project.
Technical Mastery is not Art, it's Technical Mastery. There's nothing inherently creative in having mastered a craft. Technical Mastery is a comparative metric when a given output has been determined to be artistic.
Producing a "selfie" is, by definition, working within an artistic constraint, and when I read your post I had to assume that we had already seen many "selfie artists", which seems to be the case:
These are awesome! I've been learning d3 and have been struggling a bit with animations. Does anyone mind breaking down one of these tweets and explaining how it works? I understand it's minifed but learning how to loop animations would be great.
What you see in the tweet is the code which runs in the animation loop. The animation loop is provided, along with all of the abbreviated function aliases, by this base file [1].
I've reproduced the guts of it below -
d3.timer(function(t) {
g.d([t]);
if (window.tweet) {
tweet(t);
}
});
The important bit is the t argument which is provided to the code you see in the tweet. Most of the animations are driven by this value, normally passed through a trigonometric function to provide some easing.
In the case of my Hello World example, the tweet code is as follows -
// Perform a data-join [2] with the parent set to the root node provided
// by the base file, the data defaulting to [t] as above and with a
// built-in behavior of appending an SVG text element in the enter selection.
T()
// Set the following attributes on the text element -
.a({
// Affine transform the element using a sc-ale transform.
// The scaling value is a function of the data item bound to the element (t).
// s is an alias for Math.sin and 1e3 is just shorthand for 1000 (saves 1 character!)
transform:d=>sc(4+s(d/1e3)),
// Make use of another alias to offset the text based on the normalised mouse position.
x:d=>mo[0]*10,
y:d=>mo[1]*10
})
// Set the text content of the text element
.t('Hello World')
This is by no means an exciting example but it should provide some clues as to how the more complex animations work.
Ah there's the inevitable alert("test") messages. Thank god for the 'prevent this window from generating additional popups' option in browsers these days.
Without looking into the source, I'd bet someone tweeted the "exploit", just to make the point that going to that page basically runs arbitrary javascript in your browser.
Super. My firefox 43.0.4 gobbled up all the CPU it could but it was a rare case where I would gladly trade CPU cycles for the pleasure of scrolling through examples.
It's fine to report such a problem, but "left a nasty taste in my mouth"? Come on. You make it sound like they shouldn't have even bothered, when this is one of the coolest things to have appeared on HN in a while.
All: Before responding to new work with swipes, dismissals, or nitpicks, try mentally multiplying their effect by 1000x. That seems to be about the magnitude by which we underestimate how such stuff comes across. Adjust accordingly, and then you can offer criticisms and corrections without adding air pollution.
Sorry, man. This is a pet peeve of mine, as you can see from my comment history. And I'm not the only one, those comments often get quite a few upvotes. I can see how it must be frustrating to launch something only to have a comment like this, but it is my honest not-trying-to-be-mean reaction to a site that breaks the back button, I feel very frustrated and it's off-putting. The website is a cool idea as I said, so to be clear, I do not think that they shouldn't have bothered.
I believe you, and didn't think that you meant to communicate that. The trouble is that individual signals that aren't objectionable compound into global problems at scale. It's a community problem more than an individual one, which is why it's so hard to correct.
One thing we've learned is that you can't judge this phenomenon accurately by upvotes. Indignation of any kind reliably gets more upvotes than anything else, by a large margin.
The iframes load progressively as you scroll (vvo/lazyload). Every time one loads it requires you to click the back button an extra time (in Chrome at least).
