Show HN: Popped At, my many, many weekends realtime photo project | Hacker News Reader

Show HN: Popped At, my many, many weekends realtime photo project

popped.at

85 pointsgeuis46 comments

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.

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.

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.

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?

Good luck!

Reminds me of the "WebCollage" XScreensaver - Written by Jamie Zawinski; 1999. :-)

http://www.jwz.org/webcollage/

   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.

Even has the NSFW warning ;-)

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?

I noticed the same thing. Perhaps it could be an effect of how those populations use Twitter as well?

Regardless, this project is awesome, and way too fun to watch. Even if 90% of the photos are of the same Korean kid with the red bowl-cut.

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.

http://www.comscore.com/Insights/Press_Releases/2010/8/Indon...

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.

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.

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.

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.

Not the author but:

- 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.

Here's a few more:

http://www.pingwire.com/ (now defunct, but it was pretty good)

http://jellibug.com/

http://picfog.com/ (live stream seems down)

http://gimmeshiny.com/ (other sources than twitter)

http://twicsy.com/

http://twitcaps.com/ (defunct)

These usually don't live long, I'm not sure why. Pingwire was by far my favorite, mesmerizing.

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.

The gray body text is hard to read on a black background.

If that's the only thing you can find to criticize, OP's done a good job.

I really like it. I couldn't seem to get the pausing/unpausing to work with my trackpad, though.

I actually thought it'd be helpful to OP to point out that the text is hard to read. It's called constructive criticism - nothing wrong with that.

It can be a fine line between criticism and it being "constructive"

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.

-bowerbird

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. :+)

-bowerbird

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

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.

http://i.imgur.com/xRBUlab.png

Thanks for the screenshot. That is awful looking. How does the text look on the photos page when you click one?

http://i.imgur.com/BL3dog4.png

Most web fonts exhibit this behavior on Windows. Chrome does a little better with the thickness, but the rendering problems are still there.

Here's an article on the topic http://blog.webink.com/why-fonts-suck-windows-hinting/

For those who don't know: If you're on Mac, one easy way to test your website in IE is using a virtual OS from http://www.modern.ie/.

This is what it looks like on Chrome/Mac: http://i.imgur.com/IijoeLC.png

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?

Finally launched!

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/

Would be interesting to link to http://www.photosugar.com/ to see all a user's photos.

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.

One last quick update. I love having 60+ people all using Popped At at the same time, http://i.imgur.com/YvaXA5n.png

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.

Pause by scrolling/swiping up and down or via the spacebar. Go fullscreen with 'f' (in supporting browsers');

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?

Lots of toons & manga & game screenshots, so maybe wouldn't call it a "photo project"..

Reminds me of uploadit, Jessey Cinis' little project from the older days of the internet.

All i see is Korean/Japanese posts. What's that about?

I think because the majority of the world's population (> 60%) is in Asia.

Also the time of day

What technologies did you use to make this?

I want this as a screensaver

Reply on news.ycombinator.com