7 ms·

Anypixel.js

287 points by afshinmeh 10y ago

teddyknox 10y ago
Does anyone know which Google office the button wall in the demo video is installed?
- smarx 10y ago
  > The first display using this platform is in the 8th Avenue lobby at the Google NYC office.
- packetslave 10y 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 10y 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 10y ago
This is rad! I have a bunch of LED matrices I currently use https://github.com/hzeller/rpi-rgb-led-matrix 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 10y ago
  I think this library is intended for touchable applications
  - deleted 10y ago
    [deleted]
Negative1 10y ago
Very cool... OK I'll bite; what is Google Creative Lab?
- Theodeus 10y 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 http://www.thefwa.com/profile/google-creative-lab
sorenjan 10y ago
That page made my core i7 jump from 3% to ~50% utilization, just by opening it in a tab.
- cardamomo 10y ago
  And it crashes Firefox on my phone.
- ikt 10y ago
  was wondering why everything suddenly was going 2fps
- sundarurfriend 10y ago
  Text-only cache version: http://webcache.googleusercontent.com/search?strip=1&q=cache:http://googlecreativelab.github.io/anypixel/&gws_rd=cr&ei=-3dUV5jEE8PH0gTarZLwBg 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 10y ago
How did they make the header loading animation ? Seems to be using canvas but I don't get how it works.
- weird_css 10y ago
  https://googlecreativelab.github.io/anypixel/index_external.js https://googlecreativelab.github.io/anypixel/index_external....
  - sillysaurus3 10y 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/ 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 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 http://i.imgur.com/rKDrSoP.png
shadowmint 10y 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 10y 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 10y ago
Reminds me of a Weezer light display
lightx 10y ago
Those buttons looks cool. Anyone know where to get them? (https://googlecreativelab.github.io/anypixel/img/carousel_02.jpg https://googlecreativelab.github.io/anypixel/img/carousel_02...)
- retrogradeorbit 10y 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-pushbutton/ 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 https://na.suzohapp.com/products/pushbuttons/58-9111-L ] or Amusement Distributors. [ http://www.amusementdistributors.com/index.php?main_page=product_info&cPath=2_70&products_id=372 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 10y 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-SH https://na.suzohapp.com/products/arcade_game_parts/58-0091-S...
kevinwang 10y ago
well this is the most beautiful webpage i've ever seen.
- malloryerik 10y ago
  And no material design.
- kleptako 10y ago
  And it isn't completely broken with javascript disabled, good job who ever made that website.
deleted 10y ago
[deleted]
Splendor 10y 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 10y 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 10y 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 10y 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 10y 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/controller-r3 https://aisler.net/googlecreativelab/anypixel/display-r2 https://aisler.net/googlecreativelab/anypixel/display-r2
- morsch 10y 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 10y 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 ;-)
CraigJPerry 10y ago
Theres a guy publishing yt vids about his installations of this nature https://youtu.be/9Qlmywxjau0 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 10y ago
  This was so interesting. Especially the part where he investigates the ESD damage to a section of the panel.
ericfrederich 10y 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

287 points by afshinmeh 10y ago

teddyknox 10y ago

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

smarx 10y ago
> The first display using this platform is in the 8th Avenue lobby at the Google NYC office.
packetslave 10y 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 10y 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 10y ago

This is rad! I have a bunch of LED matrices I currently use https://github.com/hzeller/rpi-rgb-led-matrix 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 10y ago
I think this library is intended for touchable applications
- deleted 10y ago
  [deleted]

Negative1 10y ago

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

Theodeus 10y 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 http://www.thefwa.com/profile/google-creative-lab

sorenjan 10y ago

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

cardamomo 10y ago
And it crashes Firefox on my phone.
ikt 10y ago
was wondering why everything suddenly was going 2fps
sundarurfriend 10y ago
Text-only cache version: http://webcache.googleusercontent.com/search?strip=1&q=cache:http://googlecreativelab.github.io/anypixel/&gws_rd=cr&ei=-3dUV5jEE8PH0gTarZLwBg 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 10y ago

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

weird_css 10y ago
https://googlecreativelab.github.io/anypixel/index_external.js https://googlecreativelab.github.io/anypixel/index_external....
- sillysaurus3 10y 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/ 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 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 http://i.imgur.com/rKDrSoP.png

shadowmint 10y 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 10y 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 10y ago

Reminds me of a Weezer light display

lightx 10y ago

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

retrogradeorbit 10y 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-pushbutton/ 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 https://na.suzohapp.com/products/pushbuttons/58-9111-L ] or Amusement Distributors. [ http://www.amusementdistributors.com/index.php?main_page=product_info&cPath=2_70&products_id=372 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 10y 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-SH https://na.suzohapp.com/products/arcade_game_parts/58-0091-S...

kevinwang 10y ago

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

malloryerik 10y ago
And no material design.
kleptako 10y ago
And it isn't completely broken with javascript disabled, good job who ever made that website.

deleted 10y ago

[deleted]

Splendor 10y 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 10y 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 10y 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 10y 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 10y 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/controller-r3 https://aisler.net/googlecreativelab/anypixel/display-r2 https://aisler.net/googlecreativelab/anypixel/display-r2

morsch 10y 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 10y 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 ;-)

CraigJPerry 10y ago

Theres a guy publishing yt vids about his installations of this nature https://youtu.be/9Qlmywxjau0 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 10y ago
This was so interesting. Especially the part where he investigates the ESD damage to a section of the panel.

ericfrederich 10y 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.