Dark Bit Factory & Gravity

PROGRAMMING => General coding questions => Topic started by: ryt on January 07, 2014

Title: How to achive this morphing sphere
Post by: ryt on January 07, 2014
Probably some of you have seen this demo http://www.pouet.net/prod.php?which=11016 (http://www.pouet.net/prod.php?which=11016). In these pictures in lower right corner is a sphere that is changing its shape. I wonder how I can build this sphere. What would be a starting point.
I assume it is some sin function with changing amplitude with random values.

(http://s15.postimg.org/dp5qoj8qf/sphere1.jpg) (http://postimg.org/image/dp5qoj8qf/)(http://s8.postimg.org/bp7ek4ig1/sphere2.jpg) (http://postimg.org/image/bp7ek4ig1/)(http://s17.postimg.org/6u4fj0t7v/sphere3.jpg) (http://postimg.org/image/6u4fj0t7v/)

There are also other demos that have a similar changing sphere but in this one it is really easy to see it.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 07, 2014
I would start by having each point on the sphere having coordinate values (longitude and latitude) and individual radius values.

You can then raise or lower individual points by adjusting the radius values and move them around a little by making slight adjustments to the coordinates.
Title: Re: How to achive this morphing sphere
Post by: ryt on January 07, 2014
I was thinking of something like that. So if we transform that to spherical coords so that longitude and latitude become theta and phi we would have:

x = A*cos(theta)*sin(phi)
y = A*sin(theta)*sin(phi)
z = A*cos(phi)

where 0<=theta<2PI and 0<=phi<=PI and A is the amplitude.

With that we can create a sphere.  So then I think we should make A a function of theta and phi. It could be a function of interpolated random values. Also the continuity should not be broken. But I don't know how to ensure that.
Maybe also there should be two amplitudes like A and B, one for theta and one for phi.

I don't know if I am going in right direction. Probably there are also errors in formulas I wrote.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 07, 2014
This sounds familiar. One of my previous contest entries generated a wireframe sphere using theta and phi values and a radius value, but only 3 points were raised or lowered at a time.

I've also put together a grid of floating cubes which undulate over a grid of sine waves, one controlling the x-coordinate of the waves and the other over the y-coordinate.

It shouldn't take much to combine both of these effects into one amazing demo! Now I've got to dig out my source codes.
Title: Re: How to achive this morphing sphere
Post by: hellfire on January 08, 2014
Also the continuity should not be broken. But I don't know how to ensure that.
So you want a smoothly changing, repeatable value for two coordinates, theta & phi.
That's basically like creating a repeatable plasma pattern (like these (http://halmtier.deviantart.com/art/PS-Patterns-Plasma-336759983) for example).
Plasmas are done by adding several layers of sine waves over each other and change the starting phase of each wave to animate the whole pattern.
To make them repeatable, the width and height must be a decimal multiple of the wave-length.
Another (probably easier) way is to add several repeatable bitmaps over another and move each map into a different direction to get animation.

The effect in the screenshot seems to move each vertex-position along different x,y,z-offsets.
But displacing along the vertex-normal works very well, too.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 08, 2014
I've put up a basic dot-rendered sphere here: http://fx.barcodebattler.co.uk/waveSphere/

I'll add some comments to the code soon and add the wavey effects.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 08, 2014
ohh nice one ck! K+

i am excited too see it wave about..
Title: Re: How to achive this morphing sphere
Post by: ryt on January 08, 2014
I gave it a little tought. We have theta and phi so we could animate about these two in their own direction, like in a 2D system. Actualy that is spherical coord system.
To animate in lets say phi we could make:

A = sin(phi*freq+time)

where freq could also change. To change it in theta we could just add another sin or cos like A = sin(phi*freq+time) + cos(theta*freq+time).
So we would get some animated values based on a normal as hellfire mentioned it.
I hope this makes sense and that this will animate the sphere. I wonder how this could be extended so it animates in x, y, z also.
Title: Re: How to achive this morphing sphere
Post by: hellfire on January 08, 2014
I wonder how this could be extended so it animates in x, y, z also.
Have a look at this wonderful rgb plasma by Dr_D (http://www.dbfinteractive.com/forum/index.php?topic=3101.0).
It creates smoothly changing rgb values for each x,y-coordinate.
That's pretty much like the (x,y,z) from (theta,phi) you're looking for!
You can simply add the resulting rgb to the original vertex position.
You just have to find a way to make it repeatable, though.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 08, 2014
I have annotated my source and adjusted the look of the sphere - the link to the page is in my previous post.

The sphere uses the phi/theta to x/y/z conversion you're looking for. If the annotations don't explain it well enough, please ask me for more details.

Waves will come tomorrow.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 09, 2014
@ck im just waiting till the waves come then i am going too have a proper dive into your source too see how you go about this.

Quote
Have a look at this wonderful rgb plasma by Dr_D.
It creates smoothly changing rgb values for each x,y-coordinate.
That's pretty much like the (x,y,z) from (theta,phi) you're looking for!
You can simply add the resulting rgb to the original vertex position.
You just have to find a way to make it repeatable, though.

nice one hellfire! im just in the middle of giving this a go, so too make the effect repeatable would it just be something like if (nticks>somenicetimeval) restarttimer(nticks); and adjust somenicetimeval too whatever gives a nice repeat with no skipping..
Title: Re: How to achive this morphing sphere
Post by: Canopy on January 09, 2014
sure i've seen a nice writeup on the "jelly cube" effect that works a similar way (the newer version of that effect, not the scanline one)

something like break a cube into a grid of sub cubes and wiggle the vertices
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 09, 2014
It's wobbling all over the place now - just click on the checkboxes in the bottom-left corner of the page to get it started.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 10, 2014
ck thats awesome mate k++

i actually tried too modify your code too try hellfire's method but after spending hours trying too figure html out i threw the towel in  :). i am going too start a different thread for that though.

so i just turned too good old freebasic too try dr_d plasma effect out i havent looked in too making it seamless atm but it still looks quite good.. its just a different method of achieving roughly the same effect. so between me and you that's two ways down. which just leaves the multiple bitmap's traveling in different directions method hellfire mentioned i would like too give that a try too but would need a little more info on how too go about it.

any who the plasma effect is attached.... exe and code.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 10, 2014
I guess my code is a bit hard to follow, as it is effectively two demos mashed together (Illumisphere and Ghoulish Cubes) with minimal optimisation. Where were you stuck with it? I'll do my best to explain.

Your exe looks cool, it's how I imagine a magnetic field to look if it were visible.

I can't imagine how the bitmap plasma would work, but it's probably viable.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 10, 2014
thanks ck. your code is perfectly readable mate, its when i started hacking at parts of it everything went belly up lol. i am having a little trouble with debugging(tracing vars etc) but rather than hijack this thread ill start a new post and hopefully work through some of the issues im having in html  :cheers:

i wasn't 100% happy with my point's version of this. i thought it was a little hard too see the effect. so i have modified my code too render faces or wireframe tris it looks much better now again source and exe attached
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 10, 2014
No problem - let me know when you want me to show you a method of debugging JS variables.

Hopefully the discussion so far has been helpful for the original topic.
Title: Re: How to achive this morphing sphere
Post by: ryt on January 11, 2014
I was a lot busy these days so I haven't implement any of formulas I wrote yet. But I red all the posts though.
combatking0 when I saw the first version of the sphere it just looked awesome even if it was only rotating. Now it is even better  :) and I can just say wow.
Now I will try to implement these formulas and take a look at your code and the tutorial for rgb plasma by Dr_D that hellfire mentioned.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 11, 2014
errmm....

i think you will find attached to my posts dr_d's plasma working on vertex's?!?...
Title: Re: How to achive this morphing sphere
Post by: ryt on January 11, 2014
Yes the vertex version is attached to one of your posts. I haven't looked it before.
It looks cool but it is really a little harder to see the whole object. I will check the source.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 11, 2014
I'll add a few more options to mine and tidy the code up to make it clearer.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 11, 2014
@ck that would be awesome mate!

@ryt there is two plasma versions from me the wireframe one is a little easyer too see. i was just demonstrating how it could be done there is lots of tuning options like which plasma you code. if its seamless or not. and also where in the euler transforms you add the rgb components. there is three different places that all give different effects one on the raw vertex data before any tranforms take place. two is on the rotated verts before perspective and three is on the verts after perspective so its fully tuneable.

dont get me wrong though combatking's way is better .its more controlable but i thought it would be nice too fully explore all options.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 12, 2014
I've added some extra controls to make testing different settings a bit easier.

The code still needs to be tidied up though.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 12, 2014
what a difference ck!

that looks really really cool. i know it would be a lot too code but i think it would look awesome if there was a ground plane and the ball had an indefinite bounce motion with the jelly animation happening mostly on impact. the ball would have too be scaled down though.

i used too watch the 3d ball demo on our ps2 yabasic demo disc and always wished it would squash on impact with the floor.
Title: Re: How to achive this morphing sphere
Post by: ryt on January 12, 2014
I just saw your wireframe demo ninogenio. It looks really good. Now with wireframe its really easy to see it.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 12, 2014
That would be interesting - I'll have to research how to to that, but this isn't far off.
Title: Re: How to achive this morphing sphere
Post by: ninogenio on January 13, 2014
@ryt thanks man.

but yours and combatkings idea are better i would say. in fact i dont know if you have noticed but ck uploaded a new wireframe version with loads of options and in some cases his sphere looks really really close too the demo you first posted!

:cheers:

@ck if you do decide too give the bouncing ball thing a little go. i would like too see that.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 13, 2014
I'll have a look at it, but my physics skills aren't that good yet. I'll keep practising.
Title: Re: How to achive this morphing sphere
Post by: ryt on January 13, 2014
I gave a look at the source of your code combatking0. I don't understand all of it yet. I assume the major part of waves is on line 77, 78, 79 and 84, 85, 86. I see there is a sin function but I don't know what are you trying to achieve. Before that on lines 70 and 73 you distribute current point to next points in array so you form the wave. I think this is used as main wave around sphere.
Also in freqAdjust function you set the speed on lines 104 and 105 which are later used on lines 77 and 84. I assune you use it as some kind of phase in sin function instead of time.
If it is not too hard could this be written in math form ? Maybe it will be a little easier to understand.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 13, 2014
Lines 76 and 83 are looking at the checkboxes to see if they are active. If they are, lines 77 and 84 add small numbers to the wave angles, in this case the pole-to-pole wave (pWave) or the radial wave (rWave).

Lines 78 and 85 check to make sure the wave values are between -pi and pi.
Lines 79 and 86 then convert the wave angles into wave heights and insert them into the first entry of each array.

The freqAdjust function controls how fast the waves are generated, their amplitude and the x-axis rotation of the sphere.
Lines 102 and 103 take the values of the Frequency select drop-down lists.
Lines 104 and 105 convert these values into the small numbers which are added to the wave values on lines 77 and 84.
Lines 106 and 107 read the Amplitude select drop-down lists. These values are applied on line 161.
Line 108 reads the Tumble select drop down list to control the direction in which the x-axis rotation is applied.

Please let me know if this has cleared up the confusion or not.
Title: Re: How to achive this morphing sphere
Post by: ryt on January 16, 2014
I am really busy these days so I haven't looked at any code. When I find some time I will try to understand it and implement it.
Title: Re: How to achive this morphing sphere
Post by: combatking0 on January 16, 2014
That's understandable. I'm a bit behind on a couple of non-coding projects too.
Title: Re: How to achive this morphing sphere
Post by: emook on January 24, 2014
Very nice stuff ++K's