Bubbles

3 years ago (oimo.io)

It's a wonderful thing: a toy, not a game.

A game has a goal. Here you are free to experiment without being led or nudged. In the world of computer-based entertainment, it is refreshing.

Thought this was using three.js, but they built their own physics engine: https://github.com/saharan/OimoPhysics

  • This has vibes of the old Web, where amazing and niche things were happening. Apparently that engine is written in something called Haxe and its multi-platform.

    Sometimes I wonder what I'm missing out by looking at lists curated by points given out by people who come together by hyper specialised interests. Should have heard of it before hearing about the millionth JS framework.

  • Three.js is just a rendering engine -- it wouldn't allow you to create something like this anyway.

    Also, I don't believe that the bubble toy is related to their physics engine; it seems like a different type of physics. The engine is focused on 3D collisions, joints, springs, etc., whereas the bubble toy is simulating thin films.

    I wish there was source code for the bubble toy so we could see how it works!

  • Written in haxe.

    • That caught me off-guard as well. I only ever written one thing in Haxe, but the experienced was mixed. It worked, but it also kind of painful to work with.

      For context: Haxe is a programming language with the main purpose to have several compile targets for many programming languages.

      Glad it is working for them.

    • Holly cow.

      Old Version Written in ActionScript 3.0 Supports spheres and boxes as collision shapes Supports various joints (ball and socket, distance, hinge, prismatic, etc...) Fast and stable collision solver

More of their amazing work here: https://oimo.io/works

Also they appear to be a student?

Delightful toys like this are why I love the web. I'd never go through the rigamarole of installing an app to play with this, but I sure will click a link.

While everyone's loving the bubble physics, I just like the attention to detail where if you put the fan _in front_ of the bubble blower facing away from it, it will still blow bubbles in that direction if the air stream would still be drawn through the blower.

Such a fun surprise when I realized that the fan does not only push air but pulls air in as well. The bubble wand placed to the left of the fan will still make bubbles out the right hand side. Interestingly it makes bigger bubbles than normal.

It's a beautiful page! I miss sites like this.

Though strangely, it seems to disable all of my browser keyboard shortcuts. Even basic ones like going back, selecting the address bar, or changing the zoom level. I assume it's just listening for all key events, though I didn't even realize it was possible to override the basic ones.

edit: I found the bug! It has a list that's supposed to contain all possible keycodes, and if all the keys in your shortcut are on it that list it works. But I'm on macOS so my shortcuts all involve the "MetaLeft" or "MetaRight" key and those are missing from the list. Appending those keycodes to the minified array named `ba.G` fixes shortcuts for me!

  • I think it’s designed for mobile or touch screens. Works perfectly on iPhone, and you need touch for various features.

Absolutely love things like this that encourage a little bit of discovery instead of instructions - makes it a bit more magical, I think

  • Many years ago there was a viral web-based game involving...shooting frogs, perhaps?

    The mechanics were not explained, you had to discover how to play it.

    The problem: the primary mechanism was pointer clicks, but the Mac's tap to click didn't work.

    So the game was in motion but nothing I did made any difference. I even wondered if perhaps the virality was a joke: the people who knew it didn't actually work were playing a trick on everyone else.

    Anyway, I guess the moral of the story is that forcing the user to discover the mechanics works better when you control the full stack.

    Or that those of us who cherish tap to click should occasionally press harder, just in case.

There are a bunch of other equally cool physics simulations/games on that website, well done

My experience:

"Wow, neat. I wonder how they did this."

tries to right click (no context menu appears)

hit F12 for developer tools

"Oh, it's just a solid 173KB of javascript. No big deal."

notices the window resize affected the simulation

"There's now a big blob of bubbles coalescing at the top of my screen. Wow!"

-- fun - also - love authors twitter avatar is dandelion - https://twitter.com/shr_pc - feel like they are in tune with the poetry of physics --

If you move your mouse really really fast, you can get through the bubbles without popping them.

These are magical little apps. I’ve spent a good while looking for these types of projects. It’s like coming across a gold nugget. Here is a site I’ve found with some amazing apps that are really fun to interact with. https://www.abowman.com/

Make sure to check out the rest of his site. Amazing. Pay careful attention to the recursive box on the “works” page.

It's really easy to see how big an impact iOS low power mode has in the framerate of something like this.

beautiful work.

what I like about this is that that air is particle system. and so are bubbles are made of elastic strings. in a sense there is no bubbles here, it is interaction of particles, and bubbles and air wind is emergent property

back back to it

.. making bubble, but not quite

.. spinning a bubble

I absolutely love this and am curious about the technical details behind simulating soap bubbles like this (it looks like the code isn't available). Does anyone know what algorithm is being used?

I love the fluid design on the "works" page as it resizes to the browser. Putting physics into your resize algorithm really shows a lot of care and attention.

Haxe is an awesome project that's been around for ages... I last looked at it as a potential replacement for AIR/AS3 a decade ago but the GPU capabilities weren't there yet with OpenFL. Seems like it's time to take a new look!

It didn't work (I think? It was just a white screen). I tried changing IP with CTRL+SHIFT+L and it wasn't doing anything, then tried copying the link and opening in a different window, but it wouldn't copy (because I used CTRL+L). Only then I realized it just doesn't let you press any button on the keyboard. JESUS CHRIST never show me this link again.

I spent wayyy too much time playing with this, just trying to understand all the dynamics. What makes the bubbles burst, or merge, or collapse, or partially burst and partially expand a connected bubble.

The impact of the various directions of the fan or pin.

So much variation in such a simple seeming base.

  • (dmix man long time no see! Let's hang out soon!)

    I agree that this is a true work of art. The variation and attention to detail is delightful. I hope more people put together and share stuff like this on HN.

How do I make big bubbles with this? Because that's what I do with real bubbles, blow them to be as huge as possible. This can't do that.

But bubbles require constant slow airflow, at that pace this does not make any bubble at all.

I was surprised by all the projects on the website. This isn't even the coolest one

Fun fact: if you zoom out a ton, place the bubble machine at the outside edge, and then zoom back in to standard, you get a crap ton of bubbles very quickly

12 years have passed since Steve Jobs killed Flash and finally people can make some decent interactive Web animations which correctly works on latest browsers.

  • Funny enough this project is a descendent of the flash lineage – it's written in haxe which first existed as an alternative ActionScript compiler. It's since evolved to be a strong functionally focused language of its own and perfect for writing games and interactives like this and now exports js instead. There's even a project (OpenFL) to preserve the old APIs!.

    A good example of how haxe has evolved since AS2, the author (saharan) has written their own shader language _in_ haxe which they've used in this project. Haxe has a compile-time macro engine which you can develop DSLs to improve your workflow https://github.com/saharan/HGSL

  • I remember some impressive native demos of platform games 12 years ago. Did the Flash to HTML5 converter work well? I never migrated my own "masterpieces"

  • You could make web animations 15 years ago. I don't know what's so special about flash that people miss in modern web.

    • > I don't know what's so special about flash

      A GUI authoring tool which everybody can learn instead of some insane manual canvas coding.

      From tech perspective, it works in my Pentium III computer, and the animation is streamable. Try that with JS?

      1 reply →