
Show HN: Popped At, my many, many weekends realtime photo project - geuis
http://www.popped.at/
======
geuis
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.

~~~
maxerickson
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?

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

------
wicknicks
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!

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

[http://www.jwz.org/webcollage/](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 ;-)

------
timdorr
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?

~~~
TruthSHIFT
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...](http://www.comscore.com/Insights/Press_Releases/2010/8/Indonesia_Brazil_and_Venezuela_Lead_Global_Surge_in_Twitter_Usage)

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

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

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

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

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

------
jacquesm
Here's a few more:

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

[http://jellibug.com/](http://jellibug.com/)

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

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

[http://twicsy.com/](http://twicsy.com/)

[http://twitcaps.com/](http://twitcaps.com/) (defunct)

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

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

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

~~~
geuis
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?

~~~
usea
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](http://i.imgur.com/xRBUlab.png)

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

~~~
usea
[http://i.imgur.com/BL3dog4.png](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/](http://blog.webink.com/why-fonts-suck-windows-hinting/)

------
Mankhool
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?

------
adrianwaj
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/](http://desandro.github.io/imagesloaded/)

Would be interesting to link to
[http://www.photosugar.com/](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.

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

------
artemij
Cool, this January I've created [http://snapkite.com](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?

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

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

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

------
hobo_mark
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?

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

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

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

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

------
lcasela
What technologies did you use to make this?

------
caplingerc
I want this as a screensaver

