Anypixel.js | Hacker News Reader

Anypixel.js

googlecreativelab.github.io

287 pointsafshinmeh35 comments

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

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

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

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.

I think this library is intended for touchable applications

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

And it crashes Firefox on my phone.

was wondering why everything suddenly was going 2fps

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.

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

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.

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 ;-)

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.

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

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

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

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?

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.

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.

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

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.

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

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.

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

And no material design.

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

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

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

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

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

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

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

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

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.