Making music in JavaScript OMG

There are few things that really got my attention lately but this is one of it. To cut it short, this is WavePot, a web app designed to ‘code’ music. As it’s far for becoming a real DAW it has some potential, they decided to crowdfund the development and divide it in milestones.

Screenshot 2014-10-24 10.39.46

Give it a try, you’ll find it very familiar to Sublime or Brackets, just double click on the projects and hit play. I am eager to see how would work connected to a midi device via websockets.

For more  info about web audio I  found Jan Monschke talk really interesting via JSconf.

Link: WavePot

Smart traffic light

From the series of ‘What are my colleagues doing’ I present you the Smart traffic light installation. A while ago at Minivegas we had a brainstorm meeting about how we can make the waiting on the traffic light more fun and safe.

The idea was to make people dance, track their movement using kinect and make the red man dance, literally. The rest does not need any comments, just enjoy the featured video below.

Congrats to the team for such a nice project!

Wiki House in webGL

Today I’ve exported the v3 open source file and converted into a OBJ to import in

It’s nice to get the idea of how it looks without installing sketchup in your computer.

Please be patient, it will take a bit to load.

WIKIHOUSE review is a company that made an online 3D editor, it’s part of web app movement, or this is how I like to call them. Where a software that you usually had to check OS functionality, check your diskspace and hopefully later to run an installer, now you can access anywhere on every device with a single click.

As I’m familiar to C4D and Blender, I said I should give it a try. Took this scenario, this is a beta, not a fully replacement of a complex 3D software yet so I thought of using it for small edits. For example to cut the body of this bike, and then modify the frame adding an enlarged torus. Worked perfectly!

Screenshot 2014-07-29 15.31.12

Screenshot 2014-07-29 15.54.13

And the embed webGL result:


Then I thought of something much harder, something I would usually do in a 3D software. I asked Alex Beltechi to send me a scene created in Cinema 4D to edit in The import was really simple, just dragged the OBJ file in the browser. It was a big file, around 700 smaller objects, I’ve done some basic object merging, simplify meshes, worked a bit hard on Chrome (the 32 bit version) but faster on my 64 bit Safari, never tested on the 64 bit Canary.

Screenshot 2014-07-29 13.00.16

Screenshot 2014-07-29 15.21.42

It has all the basic editing tools for slicing, subtracting, blend, mirroring, etc. And an animation console, just take a look at their take on the Pixar intro and you’ll understand what powerful this software can be. Just press play below!

One other great feature is the three JS (scene) exporter. As webGL support grows over devices this could be a great tool to create 3D graphics ready for every modern browser. Personally I tested exporting the 3D bike scene and imported via ThreeJS and worked, all though still support is a bit scarce and I like the Blender method better.


Ah! I forgot to tell you that the mother company is Exocortex, that has a collection of motion graphic software for cinema. So they have a Vray render option on all your creation, the neat thing its all on the cloud and streams in your browser.

After all this,  it’s a sharing platform, like github is for code, is for 3D models. Of course you could choose for a pro account and have all you projects private, but you miss all the fun of being forked and get your creation remixed. Check their impressive library here.

Conclusion: Even with the ups and down this is a beta of a pioneering product. Nevertheless, even in this stage I will use it without a doubt to edit and create content. The power of  web applications is enormous, combined with a good cloud service defines the way of how future software will work.

Why it’s a need for bigger screens

Apple made the step going for bigger screens on their new iphone 6 range. A thing bullied by the Android fanboys hard, as the android premium phones where usually this size for a long time ago.
I could not stop remembering when the first iphone got out it was a crossbreed between a phone and their ipod. In that time you had some querky range of small devices, it was consider big phone. You would mainly use it to text messages, use some apps like twitter, facebook and yeah, to do calls.

When I had my iphone 4 I remembered I used to laugh at Samsung’s with a bigger screen. Not to mention the Phablet:) At that point I thought that my 3,5″ was perfect. Most of the time I used it to chat, facebook, instagram and it was ok for that. But now things change and mostly because of the web (again!)

Content is the key for this. People want bigger screens because they want to see videos, read books and do things that you would do on a laptop. And let me explain a bit. We look over the main content providers like Youtube for example, statistically most of their videos are seen in the default view, that’s nearly a phablet size. On facebook they appear smaller, perfect for a 4,5 – 5 inch display.
Reading books on a iphone 4 is impossible, no matter how abtitious you are. Kindle’s 6 to 10 screen it is the standard for reading. It’s most certain mobiles want to get near that range to pull up the online book market.

Web development changed so much (for the best) in the last years. Different device size lead to responsive design and made design a thinking role rather than trowing some pixels in photoshop. But a mobile website it’s always a nasty task, you need to prioritise your function and focus on content. A bigger screen will be a breath of fresh air with that extra 1 inch, haha.

SVG animation countdown

SVG’s files are here for longer than you think, the full name is Scalable Vector Graphics and they are based in XML. This means that you can open one with your code editor and you can see every piece of the puzzle. Over the last years due to the need for responsive design that will fit any device they became more and more mainstream. Like hipster haircuts:)

Once you can easily parse them, it did not took so long and ppl made animations in different combinations. All tough most of the graphics are do-able in CSS,  the morphing possibility caught my attention so much I spend all night fiddling with it.

The result is a countdown with numbers from 9 to 1 that actually morph from shape to shape. In flash a similar effect could be made with the morph tween, but working with SVG is a little different.


See the Pen SVG Countdown by Felix Hornoiu (@felixhornoiu) on CodePen.

One first rule is the morph can be made only between certain amount of points, I choose 22 thinking its enough to get a decent detail level. In case of a less complicated number, like ‘1’ for example, I can stack points together or in line. Screenshot 2014-09-16 13.02.36 As you cannot draw holes, because that means another path clipping the current one I overlapped the shape in case of the ‘6’, ‘8’ and ‘9’. Screenshot 2014-09-16 13.13.12 As in every vector file it has a start and an end. This is a key factor of how the animation will behave and the best way to solve this is to have the actual vectors right from the start. In my case it worked by deleting the closest line to the top-left, as it’s based on XML the points act like in a word doc. Screenshot 2014-09-16 13.25.39 Timing its one of the hardest part as keytimes= uses a timeline between 0 and 1. Each successive time value must be greater than or equal to the preceding time value. I could not use fancy calculations like is JS so I had to came up with precalculated numbers. I made up this formula to slow the animation when its not morphing:

1 / n = a  // n = the number of shapes your morphing keyTimes=”0; 1*a – a/3; 2*a; 3*a – a/3; … 15*a- a/3; 2*a; 1;” keyTimes=”0; 1*0.0588 – 0.02; 2*0.0588  ; 3*0.0588 – 0.02; 4*0.0588  ; 5*0.0588 – 0.02; 6*0.0588  ; 7*0.0588 – 0.02;8*0.0588  ; 9*0.0588 – 0.02; 10*0.0588  ; 11*0.0588 – 0.02; 12*0.0588  ; 13*0.0588 – 0.02;  14*0.0588  ; 15*0.0588 – 0.02; 16*0.0588 ; 1″

Then used the mighty Wolfram Alpha computation engine to get actual numbers:

keyTimes=”0; 0.0388; 0.1176; 0.1564; 0.2352; 0.274; 0.3528; 0.3916; 0.4704; 0.5092; 0.588; 0.6268; 0.7056; 0.7444; 0.8232; 0.862; 0.9408; 1″

To easily export SVG from illustrator you can Save As > SVG and click “View SVG Code”. As you already have the container, you need only the polygon points, as selected below. Screenshot 2014-09-16 13.31.56 So you end with a nice morph at the end that still has rough edges and pointy bits. To solve this I used an old mograph trick to smooth shapes that now can be done via CSS filters, you blur out the shape a bit and then pitch up the contrast.

See the Pen SVG Countdown by Felix Hornoiu (@felixhornoiu) on CodePen.

What other things can be done via this trick? A hamburger menu morphing into a close button? some fancy lettering?


How to target a parent div

For some reasons you may need this feature, you have a data-id for a div that is a child of others. I had this problem at my cargo site, so I had to come up with an idea.

If you are reading this article at the end of 2014 the new CSS4 may have your solution, but until then I made a sure solution via jquery:



See the Pen taCxv by Felix Hornoiu (@felixhornoiu) on CodePen.

22Tracks Rethink


I just happened to be at Minivegas studios in Amsterdam when they launch the 22tracks website via rethink IE. Microsoft made a campaign to promote their Surface RT & Pro Tablets which ironically support webGL in a native state, something that will available on ipads only on iOS 8.

Rethinking a music service its nice because is is always changing, from records, to cassetes, CD’s finally digital in Winamp and now via a streaming service on web. The look is kind of retro, that round timeline reminds me of a record sleeve.

The background is made out of blobs that react individually to the soundwaves, also you can interact by dragging, swiping and pressing them. How cool is that!?!


CodePen Roundup

I am obsessed by codepen, think it’s a place for infinite inspiration. I will post from now on, some of the coolest projects from time to time.

Have fun interacting and forking them!

PS: If they get frozen, just see them on codepen for full experience.


See the Pen Fluid Simulation by suffick (@suffick) on CodePen.

See the Pen Rectangular Area Light by WestLangley by paul (@paul_sketch) on CodePen.

See the Pen 100 000 particles by thepheer (@thepheer) on CodePen.

See the Pen Polycircuit by himajin (@joyball_) on CodePen.

See the Pen 30,000 Particles by Justin Windle (@soulwire) on CodePen.