Skip to content

Interactive animation for a page full of beer bubbles, using sketch.js

Notifications You must be signed in to change notification settings

chocoluffy/beer-bubbles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Beer Bubbles

Beer bubbles is an interactive animation for a page full of beer bubbles, using Sketch.js. They were created as a quirky addition to Beerbot, Vend HQ's kegbot interface.

Beerbot & this project are works in progress :)

Building & Running

$ npm install
$ gulp

Backstory

These bubbles have been created as a quirky addition to Beerbot, Vend HQ's kegbot interface that displays beer at varying levels. The beer needed bubbles, so creating some sweet interactive JavaScript bubbles seemed like a cool idea.

I was originally inspired by this Bubble Sketch.js Test codepen, so I updated the colours and bubbliness to be more beerlike in this Beer Bubbles fork of mine.

After playing with that initial trial a bit and gathering some feedback from the other Beerbot hackers, we decided we wanted the bubbles to follow the mouse in a more liquid way. I remembered this Particle Sketch.js Demo which felt pretty close to what I was after, so decided to merge those two ideas together.

This is what I came up with.

Future

This is definitely WIP. Need to update the bubble physics, tidy up the build system & would be good to have configuration options etc. See issues for more.

This might lead to an API for all bubbles, e.g. water. And may in future include sound.

Demo

beerbot

Credits

Inspired by / forked

About

Interactive animation for a page full of beer bubbles, using sketch.js

Resources

Stars

Watchers

Forks

Packages

No packages published