This is my soap bubble simulator
Work Time : About erm 3.4 hours
Controls
Click to pop em!!! thats it enjoy the simulation
Anything you guys want in it ,, and if som1 can do a 1s1s scratch version that would be very appreciated!
Aim :
To create a CSS / HTML only soap bubble simulation with itty bitty javascript , allowing em to pop!!!!
KNOWN - BUGS::
1. Sometimes bubbles stick to the wall!
2. Sometimes Collision are bumpy
3. Others ..???
TO DO:
1. Improve Looks (maybe some CSS only reflections)
2. Make render smoother .
3. Improve Physics and make em combinable !
4. Add a controls section ( IDEAS ARE Welcome on what it should look like )
5. A better pop effect.
Last edited by fanofcena (2011-11-10 02:39:11)
Offline
Awesome O.o is that based on the Windows 7/Vista (I think) screensaver Bubbles?
Offline
Doesn't this belong in S&T?
Offline
jji7skyline wrote:
Doesn't this belong in S&T?
Not related to scratch mate ^^ , hence not in S&T and its NOT based on windows7 screensaver for bubbles (as the microsoft screensaver dosnt features soap bubbles instead it display glowing bubbles of the same size which cannot be popped )
Last edited by fanofcena (2011-11-10 03:06:06)
Offline
fanofcena wrote:
jji7skyline wrote:
Doesn't this belong in S&T?
Not related to scratch mate ^^ , hence not in S&T and its NOT based on windows7 screensaver for bubbles (as the microsoft screensaver dosnt features soap bubbles instead it display glowing bubbles of the same size which cannot be popped )
Sorry, I posted that before I clicked the link
Offline
jji7skyline wrote:
fanofcena wrote:
jji7skyline wrote:
Doesn't this belong in S&T?
Not related to scratch mate ^^ , hence not in S&T and its NOT based on windows7 screensaver for bubbles (as the microsoft screensaver dosnt features soap bubbles instead it display glowing bubbles of the same size which cannot be popped )
Sorry, I posted that before I clicked the link
whats ur feedback after clicking the linkQ?
Offline
I think this is awesome. Of course, with a little more javascript you could make a better pop. But it's great!
Offline
How do you make HTML/CSS move? The only way I can figure out how to make an HTML page change in any way is to write everything in JS document.write().
Offline
maxskywalker wrote:
How do you make HTML/CSS move? The only way I can figure out how to make an HTML page change in any way is to write everything in JS document.write().
CSS3 has animation commands.
Offline
ProgrammingFreak wrote:
maxskywalker wrote:
How do you make HTML/CSS move? The only way I can figure out how to make an HTML page change in any way is to write everything in JS document.write().
CSS3 has animation commands.
and / or assign the coordinates using JavaScript
and @MaxSkyWalker
Javascript has pretty decent DOM support you should read more about javascript on Mozzilla documentation my example works basically by doing this
[Each bubble is a div]
[ each div has a position coordinate from top and left]
[using JavaScript i am changing these top & left coordinates so that they move]
Offline
ssss wrote:
it's pretty cool.
I need feedback on my site. ^.^
linQ please
ProgrammingFreak wrote:
I think this is awesome. Of course, with a little more javascript you could make a better pop. But it's great!
I am trying to do it but the trouble is the way inside my mind is having a cross section DIV on an arbitrary angle ( in 3d) disecting the div into two parts (1 thats blasted, 2 about to blast) but that requires webkit browsers and I want a way to make em work on ffox aswell ^^ ,, hang on i might just do something insane tonight (maybe make it pure canvas with reflections!)
Offline
fanofcena wrote:
ssss wrote:
it's pretty cool.
I need feedback on my site. ^.^linQ please
ProgrammingFreak wrote:
I think this is awesome. Of course, with a little more javascript you could make a better pop. But it's great!
I am trying to do it but the trouble is the way inside my mind is having a cross section DIV on an arbitrary angle ( in 3d) disecting the div into two parts (1 thats blasted, 2 about to blast) but that requires webkit browsers and I want a way to make em work on ffox aswell ^^ ,, hang on i might just do something insane tonight (maybe make it pure canvas with reflections!)
Maybe have a pop image?
Offline
Nice website, by the way. :3
Offline
coooool....
Offline
ProgrammingFreak wrote:
fanofcena wrote:
ssss wrote:
it's pretty cool.
I need feedback on my site. ^.^linQ please
ProgrammingFreak wrote:
I think this is awesome. Of course, with a little more javascript you could make a better pop. But it's great!
I am trying to do it but the trouble is the way inside my mind is having a cross section DIV on an arbitrary angle ( in 3d) disecting the div into two parts (1 thats blasted, 2 about to blast) but that requires webkit browsers and I want a way to make em work on ffox aswell ^^ ,, hang on i might just do something insane tonight (maybe make it pure canvas with reflections!)
Maybe have a pop image?
I dislike images they are too naive and unrealistic , realtime rendering rocks!^^ ..
I mean say a bubble is a sphere and the surface is torn now image approach will be all bubble being popped like the same way as the image contains but a bubble can pop from any coordinate , hence it wont be realistic as a result i choose the other way , i choose to render em , ^^ .. in a week i wil present to you guys a whole new Bubble Approach something like a realistically rendered bubble instead of divs or images!
and
If u see darkyen.vacau.com (if thats the website u liked) it only has 1 image on the whole page 8-)
Offline
fanofcena wrote:
ProgrammingFreak wrote:
fanofcena wrote:
ssss wrote:
it's pretty cool.
I need feedback on my site. ^.^linQ please
I am trying to do it but the trouble is the way inside my mind is having a cross section DIV on an arbitrary angle ( in 3d) disecting the div into two parts (1 thats blasted, 2 about to blast) but that requires webkit browsers and I want a way to make em work on ffox aswell ^^ ,, hang on i might just do something insane tonight (maybe make it pure canvas with reflections!)Maybe have a pop image?
I dislike images they are too naive and unrealistic , realtime rendering rocks!^^ ..
I mean say a bubble is a sphere and the surface is torn now image approach will be all bubble being popped like the same way as the image contains but a bubble can pop from any coordinate , hence it wont be realistic as a result i choose the other way , i choose to render em , ^^ .. in a week i wil present to you guys a whole new Bubble Approach something like a realistically rendered bubble instead of divs or images!
and
If u see darkyen.vacau.com (if thats the website u liked) it only has 1 image on the whole page 8-)
Yeah, it would be a mess I suppose.
I still like it. I made a website that would change 'pages' without reloading too.
Uh, how'd you do the navigation? That looks awesome.
Offline
SeptimusHeap wrote:
Cool. I dislike the collisions, though...
It works on my iPod!
I promise u will love what i do with particles today .. I basically am i.puting pure real life physixs as the cry engine laters today .. Hopefully it will solce the issues wit physx and pops on its own
Offline
ProgrammingFreak wrote:
fanofcena wrote:
ProgrammingFreak wrote:
Maybe have a pop image?I dislike images they are too naive and unrealistic , realtime rendering rocks!^^ ..
I mean say a bubble is a sphere and the surface is torn now image approach will be all bubble being popped like the same way as the image contains but a bubble can pop from any coordinate , hence it wont be realistic as a result i choose the other way , i choose to render em , ^^ .. in a week i wil present to you guys a whole new Bubble Approach something like a realistically rendered bubble instead of divs or images!
and
If u see darkyen.vacau.com (if thats the website u liked) it only has 1 image on the whole page 8-)Yeah, it would be a mess I suppose.
I still like it. I made a website that would change 'pages' without reloading too.
Uh, how'd you do the navigation? That looks awesome.
what i did was using jquey and css togethr ... Though a pure css wil look cooler .. Immma show a demo of a non js websie soon
Offline
Here you go some progress :3 my new Model with Particle treatment
the demo shows the pop of the soap bubble without considering pressure (its just working on surface attraction and * due to medium)
Offline