Anyone still reading this later, here's some more info. I took a nap so am just getting back.
The photos are real time. There's no caching on my part. As they are coming in from Twitter, they go right back out.
The time of day has the biggest effect on the types of images shared. For example, during peak Japan/Korea hours you see lots of anime, food, cute pets, and jpop singers. When it's America time, it's largely food, porn, penis photos, fucked up images, and cute cats.
After watching this for well over a year, I'm seriously concerned about America. We are really a fucked up people.
For technical questions, I would advise people to seriously take a look at the code. There are a ton of optimizations in there. At a high level, an in-memory array of image objects prevents a massive memory leak I found in every tested browser last year in regards to garbage collecting image objects. Also, using in-memory canvas objects before drawing them to the display canvas gives a really nice performance boost.
I experimented with different display styles. A fixed random pattern provided the nicest display vs time on screen for images. Basically, the old image stays on screen as long as the stream is fast.
There are some UI features that need tweaking, so leave comments about good/bad stuff and I'll take a look.
If you swipe up/down or hit the space bar it will pause the stream.
Have you experimented much with the timing and layouts? I think I'd prefer repeated images to stay in one spot and maybe get larger. Or would that be difficult to keep speedy?
I'd also like some way of slowing it down. Did I miss that?
You can pause it via scrolling or swiping. Its as fast as the Twitter stream is. I thought about mechanisms for slowing it down, but haven't implemented any.
haha slow down... You should be really concerned about america's twitter users (actually the subset of twitter users that share pictures), not necessarily america's people.
Cool project! Here are a couple of suggestions which may help me as a user better understand the "breaking events, popular trends, cultural attitudes, and individual expression":
1. If photos have a hashtag, display it alongside an image. Text is the underestimated medium of non-personal image interpretation. Especially, when the data rate is so high, there needs to be some more precise clue about what the images are actually trying to convey.
2. Aggregate photos with similar intent. Group them into a box or color code their borders. Many tweets have GPS tags. Use them to provide a map interface to either filter some or just add a tag indicating the place of origin.
3. Most people who can only read 2-3 languages, and tweets in other languages will be treated as noise, no matter how relevant. The only alternative is combine them with a similar tweet in a language the user can understand.
4. Is there any reason photos change randomly across cells, and not in any order (as compared to say raster scanning the table and replacing photos)? Personally think that changing photos in some order is less painful on the eyes. I get the feeling that I am missing out an a lot of content because of this. Maybe replace only one section of the table at at time?
This creates collages out of random images from
the World Wide Web. It finds the images by feeding
random words into various search engines, and pulling
images (or sections of images) out of the pages returned.
WARNING: THE INTERNET SOMETIMES CONTAINS PORNOGRAPHY.
Maybe it's just the time of day (9AM EST), but the feed seems to be dominated by Asian (Japanese and Korean, in particular) users. Is there a cycle to this sort of thing or is it only picking up photos from that part of the world?
According to ComScore, Asian Twitter traffic surpassed North American Twitter traffic in 2010. So, it's possible that Twitter just has a lot more users in Asia.
The code here is well executed and I think you have a smart idea to tap into the Twitter visual stream...but to paraphrase a famous researcher (or engineer, I forgot which), the world has an abundance of information but a lack of attention (and this was said decades ago).
There's not really a benefit to seeing a realtime stream of Twitter photos. In fact, if you were to show me photos that were timedelayed by minutes, hours, or even days, how would I even know the difference? Realtime is effective to get a grasp of what's going on now, but there's no way to discern that from a raw real-time feed. As an example, you don't get the "pulse" of Twitter by reading the firehose, but through the trending hashtags/terms, which are pre-processed and clustered.
In other words, I think there's a lot you could do by clustering/filtering around several kinds of facets. For example, show just pics from accounts with more than x number of followers as a proxy for "quality". That'd be a start and a relatively easy one to implement.
It depends on what you'd like to learn. Particle physicists learn a lot from 'minbias' data, data without selective triggers.
If you have a specific question you'd like to ask, then selective cuts on the data are useful. If you'd like to characterize an entire system, like Twitter, it's good to randomly sample the entire thing. Without a random sample, you've added your own preconceptions about what's to be learned.
Not everything has to have a benefit. This is an extremely entertaining project, something OP worked on over several weekends because it was something he wanted to see exist. No need to get all high and mighty about purpose and benefit.
I agree, but I think you haven't actually visited the OP's link, where he states:
> "People are sharing thousands of photos with each other every second of every day, everywhere in the world. By tapping into just a fraction of the torrent, it becomes easy to see patterns that range among breaking events, popular trends, cultural attitudes, and individual expression."
Given that that is one of his intentions, I'm trying to give advice on where the OP could further iterate upon his stated goal. If a hacker spends weeks on a cool project, I'd think he deserves some well-intentioned suggestions on how to even better it.
Interesting project. Would be keen to hear about technical details.
How real-time is the data? I noticed a lot of repeating images so I'm assuming the data is collected and batch processed? Or are the images being fetched directly using the twitpic API?
Any reason for using canvas element instead of images or CSS backgrounds? My gut would suggest that loading an image and then painting to the canvas would incur a greater overhead than simply setting an img src attribute.
The page is generating a ton of traffic. A sustained 80-90kb/s for me. Within a few minutes the count was up to 50mb+ of image data!! Are the images all hotlinked from twitpic or are you doing your own storage and using a CDN?
Would be nice to be able to slow down the stream a bit.
- Repeated images probably come from quoted tweets (when you quote a tweet and reply by adding something). If you pull a twitter API feed, you'll get many of these.
- Not sure, but it's possible that ever-changing images cause lots of reflow. What happens between the moment you set the src attribute and the moment the image loads ? I'd have to test, but I think a reflow of everything is worse than painting to canvas.
- Looking through dev tools, images are hotlinked.
Data comes directly from twitter live. Canvas is much more performant. Your gut is wrong =). Look at the network tab. All data is delivered from the source. I've thought about more features. Stay tuned.
I've had popped.at running for over a year and a half and in a different form since the earthquake in Japan. It was originally tensecondstotokyo.com and focused on Japan.
This is often one of my biggest complaints, hard to read text and color contrast. Question: The text is #fff and background #000. You can't get better contrast than that. Is the problem the narrowness of the font I used?
On Windows most web fonts render poorly. For me (Windows, Opera), the text looks super thin and a little jagged. A lot of the color is red or blue etc instead of white because of cleartype.
Not all criticism is negative. Products are not perfect off the bat, they are improved gradually by the criticisms of the creator and the people exposed to it.
In fact, I opened this thread to see if anyone had complained about the typography, as I was going to if not.
Furthermore, while I agree that OP did a good job, I disagree with you about the fact that typography is somehow minor. ('if that's the only thing...")
How useful is a site to someone who can't read it? How many people don't bother seeing the actual mechanics of a site when they realize they need to squint to make anything out? The page consists of two elements, text and a button. Half of the elements are very difficult for a user to interact with. That's important, regardless of how spectacular the other half is.
Good job OP. like someone earlier said, it reminds me of the webcollage xscreensaver
i've found that it's best to consider all criticism
to be "constructive", even if you're sure it's not,
as it thwarts the person who was trying to hurt you.
somebody -- namely the person who down-voted this --
seems to have a very thin skin, and evidently is not
able to take my advice. oh well, such is life, i guess. :+)
I like this idea, and the others referenced, very much. I think there is a huge opportunity here for all photos (and eventually video?) that are geo-tagged. What I would like to see, and what would be valuable to journalists or media organizations would be a real-time stream based on geo-location. Simply: a map interface that I can choose a point on to see a real-time stream from (I should be able to select the "nearest" data (which might be best in remote locations) or define data based on a "radius" that I draw or otherwise define (which might be best for urban areas)). Imagine something happening somewhere and being able to see all the photos/videos from RIGHT THERE in real-time. Valuable?
can't seem to get it to pause ...should be a keypress..?
when photos are lightboxed, maybe pause background?
set time between pic changes?
Maybe have entire screen change its photos at once, or have the layout behave like a scrolling view (ie movie credits)? see: http://desandro.github.io/imagesloaded/
Lastly, there was an item recently that laid out different sized photos based on their size so that there was no gap between the images. That'd be awesome.
Cool, this January I've created http://snapkite.com - it allows you to search for mobile photos posted on Twitter + live stream of mobile photos. It does filtering as much as it's feasible. What do you think?
It looks cute, but the biggest frustration was trying to click on a thumbnail to see the full sized image, only for the image to have changed in the meantime.
I kept half-seeing interesting images, but being unable to see them fully because my mousing was too slow.
You should offer a direct link to the started app (without having to click the button). This way users can plug it into websaver or something and make it a screensaver.
It sure must have been technically challenging, but it also feels like watching a 2013 version of Watching Grass Grow :) What could something like this be used for?
The photos are real time. There's no caching on my part. As they are coming in from Twitter, they go right back out.
The time of day has the biggest effect on the types of images shared. For example, during peak Japan/Korea hours you see lots of anime, food, cute pets, and jpop singers. When it's America time, it's largely food, porn, penis photos, fucked up images, and cute cats.
After watching this for well over a year, I'm seriously concerned about America. We are really a fucked up people.
For technical questions, I would advise people to seriously take a look at the code. There are a ton of optimizations in there. At a high level, an in-memory array of image objects prevents a massive memory leak I found in every tested browser last year in regards to garbage collecting image objects. Also, using in-memory canvas objects before drawing them to the display canvas gives a really nice performance boost.
I experimented with different display styles. A fixed random pattern provided the nicest display vs time on screen for images. Basically, the old image stays on screen as long as the stream is fast.
There are some UI features that need tweaking, so leave comments about good/bad stuff and I'll take a look.
If you swipe up/down or hit the space bar it will pause the stream.