Anypixel.js

http://googlecreativelab.github.io/anypixel/

by afshinmeh • 10 years ago

287 35 10 years ago

googlecreativelab.github.io

teddyknox• 10 years ago

Does anyone know which Google office the button wall in the demo video is installed?

smarx• 10 years ago

The first display using this platform is in the 8th Avenue lobby at the Google NYC office.

packetslave• 10 years ago

There's a pixel wall outside the Crittenden Ln. offices in Mountain View, but I don't know offhand if it uses this library or not yet.

vthallam• 10 years ago

yathern 11 hours ago
I work in the NYC office where this is.

Based on this comment on this thread, it's in the NYC office!

jc4p• 10 years ago

This is rad! I have a bunch of LED matrices I currently use https://github.com/hzeller/rpi-rgb-led-matrix for, I need to spend some quality time with Anypixel to see how it compares / if I can combine the two.

I wish that "in browser previewer" link actually led to a usable in browser thing rather than just a folder on GitHub.

ben174• 10 years ago

I think this library is intended for touchable applications

Negative1• 10 years ago

Very cool... OK I'll bite; what is Google Creative Lab?

Theodeus• 10 years ago

They build cool stuff on top of Google tech, basically. They're in a few different locations, so there's more than one team. I've only worked with them as an external contractor, so I'm not sure what the official elevator pitch is though. But here's a few of the projects they've done: http://www.thefwa.com/profile/google-creative-lab

sorenjan• 10 years ago

That page made my core i7 jump from 3% to ~50% utilization, just by opening it in a tab.

cardamomo• 10 years ago

And it crashes Firefox on my phone.

ikt• 10 years ago

was wondering why everything suddenly was going 2fps

sundarurfriend• 10 years ago

Text-only cache version: http://webcache.googleusercontent.com/search?strip=1&q=cache...

For anyone else (like me) with a potato computer. Missing the video and images inevitably, but has sufficient detail to get the idea.

sjnair96• 10 years ago

How did they make the header loading animation ? Seems to be using canvas but I don't get how it works.

weird_css• 10 years ago

https://googlecreativelab.github.io/anypixel/index_external....

sillysaurus3• 10 years ago

According to the source code, this works using a few things. The main thing powering this is Pixi.js, a 2D HTML 5 Canvas/WebGL renderer: https://github.com/pixijs/pixi.js/

It tracks your mouse, or touch event. Whenever you move, it accumulates a number (search "mouseForce") to the nearby pixels. This number is then used as an index into a sprite sheet[1][2]. It uses Pixi's MovieClip object for the heavy lifting, but they create their own Tile object to hook the mouse force to the sprite sheet.

So to sum up, they create a grid of Tile objects, each of which accumulates a number based on nearby mouse/touch movement, then uses that number to index into a sprite sheet rendered by Pixi.js.

[1] http://googlecreativelab.github.io/anypixel/img/x_03.png

[2] The sprite sheet is white-on-transparent, so it's invisible in Chrome. Here's a screenshot: http://i.imgur.com/rKDrSoP.png

shadowmint• 10 years ago

Is it just me, or is that video really bad at demoing the result?

It seems like pressing the buttons does nothing from the video?

yathern• 10 years ago

I work in the NYC office where this is. The button wall is interactive and cycles through various modes that are mostly pretty abstract and colorful, but clicking the button will make a propagating disturbance depending on the mode. One of them was Conway's Game of Life, which I thought was really clever.

alttab• 10 years ago

Reminds me of a Weezer light display

lightx• 10 years ago

Those buttons looks cool. Anyone know where to get them? (https://googlecreativelab.github.io/anypixel/img/carousel_02...)

retrogradeorbit• 10 years ago

They're standard white arcade coin-op buttons. I get mine here in Australia from ozstick [ http://www.ozstick.com.au/product/classic-dimpletop-pushbutt... ].

In the states checkout Happ Controls (now seem to be called Suzohapp) [ https://na.suzohapp.com/products/pushbuttons/58-9111-L ] or Amusement Distributors. [ http://www.amusementdistributors.com/index.php?main_page=pro... ]

Just note that they're not illuminated, they just take a standard size microswitch. Looks like they rigged up the illumination separately.

web007• 10 years ago

They have full documentation on the hardware they used as well, look at the bom.pdf for "bill of materials" which specs EVERY item. You're looking for https://na.suzohapp.com/products/arcade_game_parts/58-0091-S...

kevinwang• 10 years ago

well this is the most beautiful webpage i've ever seen.

malloryerik• 10 years ago

And no material design.

kleptako• 10 years ago

And it isn't completely broken with javascript disabled, good job who ever made that website.

Splendor• 10 years ago

AnyPixel.js’ straightforward hardware/software framework makes it easy to build any display where each pixel is an interactive element.

Interesting apostrophe here. I'd never consider how to attribute possession to a package name.

papa_bear• 10 years ago

I think that's pretty standard for anything that ends with an S. My first name is Louis (pronounced Louie) , and I always spell possessives as Louis'.

cdubzzz• 10 years ago

I don't think there is a hard rule (or standard) for proper nouns. I always add the 's (e.g. Louis's).

asd• 10 years ago

Very cool. Perhaps Adafruit, Sparkfun or the like will whip up with a kit that utilizes these types of led arcade buttons, but on a much smaller scale. Also, I wonder if they make "mini" led arcade buttons so you could tighten up the array a bit. It seems that smaller buttons would create better visualizations if space was limited.

paddi91• 10 years ago

Obviously no way to build these PCBs by hand, 4 layer and a lot of hard to solder parts. BOM cost for the controller is about 100USD.

https://aisler.net/googlecreativelab/anypixel/controller-r3 https://aisler.net/googlecreativelab/anypixel/display-r2

morsch• 10 years ago

The descriptions on that page are really weird. They're just descriptions looked up by category, but they try very hard to obfuscate it by being uh, personable and witty.

On it's own, that wouldn't be so bad (just quirky) but the style doesn't lend itself to accuracy or brevity and it's hard to tell which, if any, of the text was written by a person maintaining the project's page on the site.

E.g. in answering the question: "Can I make it?" with an overall score of "98%"

Yeah, you will probably be able to make this. Feels like this is almost complete, only thing missing is your spirit and some minor stuff.

Below that is the actual list of things that are missing, which contains one item (apparently worth "+2"): Difficulty is relative, especially with footprints I have never seen before.

I have no idea what this means (I suppose it's about PCB footprint? I think the first part of the sentence is just banter?), but anyway, the top text is just a representation of the 98% "Can I make it?" category, which a less witty website would describe as "Project progress" or something. The representation of 73% is Yeah, you might be able to make this. There's still quite some homework left, but it's doable for you, isn't it? And I didn't even quote the parts where they anthropomorphise the website...

To end on a less curmudgeonly note, apart from the copy-editing, the overall execution seems good; I like how they break down the total cost of the project.

Libermentix• 10 years ago

Founder of AISLER here.

thanks for taking the time to comment on the presentation of the projects. We try to index and rate all open source hardware projects by their development stage. Our goal is to provide an insight for users like you whether the project can be built. For that we evaluate the difficulty and the project's dependencies (like parts).

You are right that some of our copies are a bit quirky and maybe need better explanation/call-to-actions. We already work on that and will soon release a revised version. Our designer has tried to "humanize" our analysis to make it a bit more approachable, maybe we need to put some additional effort into that ;-)

mic159• 10 years ago

This could potentially be simplified by using ws2812 style LEDs like this: https://learn.adafruit.com/neopixel-arcade-button/overview Plus a fade candy controller. Then you just need to build something to read the micro switches.

Haven't compared the costs, but it might reduce the complexity and barrier to entry.

CraigJPerry• 10 years ago

Theres a guy publishing yt vids about his installations of this nature

https://youtu.be/9Qlmywxjau0

The attention to detail, I find the details fascinating. He's a really bright guy but designing the protocol, making software so that the creative agency can program the lighting without him in the loop, writing firmware that protects the installation from damage even if they're ham fisted with the lighting sequence they design etc etc

pthreads• 10 years ago

This was so interesting. Especially the part where he investigates the ESD damage to a section of the panel.

ericfrederich• 10 years ago

Lol... I had that page open in a tab since last night. Just came into my office to hear my computer fan running hard. Seems Chrome was pegging my CPU at like 200% for like a day.

Whoo hoo.

Anypixel.js

Related Stories