This is a read-only archive of the old Scratch 1.x Forums.
Try searching the current Scratch discussion forums.

#1 2011-11-10 02:38:07

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Soapbubbles!!

This is my soap bubble simulator
Work Time : About erm 3.4 hours  big_smile

Controls
Click to pop em!!! thats it enjoy the simulation  big_smile


Anything you guys want in it  big_smile  ,, 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)


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#2 2011-11-10 02:48:31

slinger
Scratcher
Registered: 2011-06-21
Posts: 1000+

Re: Soapbubbles!!

Cool!


http://s0.bcbits.com/img/buttons/bandcamp_130x27_blue.png

Offline

 

#3 2011-11-10 02:51:52

Guinea_Pig_Girl
Scratcher
Registered: 2010-08-25
Posts: 100+

Re: Soapbubbles!!

Awesome O.o is that based on the Windows 7/Vista (I think) screensaver Bubbles?


http://img841.imageshack.us/img841/783/misstdd.png
Put this in your siggy if you miss The_Dancing_Donut!

Offline

 

#4 2011-11-10 03:02:37

jji7skyline
Scratcher
Registered: 2010-03-08
Posts: 1000+

Re: Soapbubbles!!

Doesn't this belong in S&T?


I don't know why you say goodbye, I say hello!  big_smile

Offline

 

#5 2011-11-10 03:04:36

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

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)


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#6 2011-11-10 03:13:00

jji7skyline
Scratcher
Registered: 2010-03-08
Posts: 1000+

Re: Soapbubbles!!

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  tongue


I don't know why you say goodbye, I say hello!  big_smile

Offline

 

#7 2011-11-10 03:30:02

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

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  tongue

whats ur feedback after clicking the linkQ?


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#8 2011-11-10 03:35:15

ssss
Scratcher
Registered: 2007-07-29
Posts: 1000+

Re: Soapbubbles!!

it's pretty cool.
I need feedback on my site. ^.^


Hey.  It's me SSSS, back from the dead!  smile

Offline

 

#9 2011-11-10 08:45:01

ProgrammingFreak
Scratcher
Registered: 2010-09-04
Posts: 1000+

Re: Soapbubbles!!

I think this is awesome. Of course, with a little more javascript you could make a better pop. But it's great!  big_smile

Offline

 

#10 2011-11-10 09:25:17

maxskywalker
Scratcher
Registered: 2008-01-27
Posts: 1000+

Re: Soapbubbles!!

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

 

#11 2011-11-10 09:29:08

ProgrammingFreak
Scratcher
Registered: 2010-09-04
Posts: 1000+

Re: Soapbubbles!!

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

 

#12 2011-11-10 09:37:07

veggieman001
Scratcher
Registered: 2010-02-20
Posts: 1000+

Re: Soapbubbles!!

urm
the bubbles don't pop like bubbles


Posts: 20000 - Show all posts

Offline

 

#13 2011-11-10 10:48:27

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

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  tongue

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]


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#14 2011-11-10 10:49:33

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

veggieman001 wrote:

urm
the bubbles don't pop like bubbles

I Know any idea how to make an actual pop ?


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#15 2011-11-10 10:52:23

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

ssss wrote:

it's pretty cool.
I need feedback on my site. ^.^

linQ please  big_smile

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!)


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#16 2011-11-10 10:54:53

ProgrammingFreak
Scratcher
Registered: 2010-09-04
Posts: 1000+

Re: Soapbubbles!!

fanofcena wrote:

ssss wrote:

it's pretty cool.
I need feedback on my site. ^.^

linQ please  big_smile

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

 

#17 2011-11-10 13:07:00

ProgrammingFreak
Scratcher
Registered: 2010-09-04
Posts: 1000+

Re: Soapbubbles!!

Nice website, by the way. :3

Offline

 

#18 2011-11-10 15:19:22

ProgrammingPro01
Scratcher
Registered: 2011-07-30
Posts: 1000+

Re: Soapbubbles!!

coooool....


Bye 1.4!
http://www.reactiongifs.com/wp-content/uploads/2013/04/sobbing.gifhttp://25.media.tumblr.com/tumblr_mbfh6bIamQ1qky11ho1_500.png

Offline

 

#19 2011-11-11 15:17:15

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

ProgrammingFreak wrote:

fanofcena wrote:

ssss wrote:

it's pretty cool.
I need feedback on my site. ^.^

linQ please  big_smile

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  neutral , 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-)


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#20 2011-11-11 16:31:24

kimmy123
Scratcher
Registered: 2008-05-20
Posts: 1000+

Re: Soapbubbles!!

Cool.  big_smile


http://i.imgur.com/Mg3TPIE.pnghttp://i.imgur.com/rgyzXV5.pnghttp://i.imgur.com/685FKVd.pnghttp://24.media.tumblr.com/8678e33865664f328e1654109679cb92/tumblr_mm1qu3jGD71s8caito3_r1_250.gif

Offline

 

#21 2011-11-11 16:36:19

ProgrammingFreak
Scratcher
Registered: 2010-09-04
Posts: 1000+

Re: Soapbubbles!!

fanofcena wrote:

ProgrammingFreak wrote:

fanofcena wrote:

ssss wrote:

it's pretty cool.
I need feedback on my site. ^.^

linQ please  big_smile

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  neutral , 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.  hmm
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.  smile

Offline

 

#22 2011-11-11 16:53:28

SeptimusHeap
Scratcher
Registered: 2010-02-01
Posts: 1000+

Re: Soapbubbles!!

Cool. I dislike the collisions, though...

It works on my iPod!


http://i46.tinypic.com/dw7zft.png

Offline

 

#23 2011-11-12 06:06:03

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

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


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#24 2011-11-12 06:09:19

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

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  neutral , 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.  hmm
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.  smile

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


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

#25 2011-11-13 14:13:19

fanofcena
Scratcher
Registered: 2008-07-03
Posts: 1000+

Re: Soapbubbles!!

Here you go some progress :3 my new Model with Particle treatment

the demo shows the pop of the soap bubble without considering pressure  tongue  (its just working on surface attraction and * due to medium)


http://i53.tinypic.com/2vxr2c0.png Click whats above u might make a cute planet happy ^_^

Offline

 

Board footer