Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Anypixel.js

googlecreativelab.github.io

Post reply on HN
Print view View original

11–20 of 38 posts

Re: Anypixel.js

#13

Post by packetslave »

teddyknox wrote: post #2

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

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.

Re: Anypixel.js

#14

Post by yathern »

shadowmint wrote: post #9

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.

Re: Anypixel.js

#16

Post by sillysaurus3 »

weird_css wrote: post #11
sjnair96 wrote: post #8

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

Re: Anypixel.js

#17

Post by retrogradeorbit »

lightx wrote: post #15

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.

Re: Anypixel.js

#18

Post by web007 »

lightx wrote: post #15

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

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...
Post reply on HN