Audioreactive Bubbles remake

examples
#1

this is a remake of this old processing sketch http://vimeo.com/711364 now running realtime. Sorry for the crappy quality which makes the shader effect I am proud of kind of invisible. Its sort of a motion blur when tha camera shakes to the beat.

here is the video:
http://vimeo.com/1182205

some screenshots at my flickr account:
http://www.flickr.com/photos/59697360@N00/

EDIT:
Sorry I didnt see the sticky what to post thread:
I used OF v0.05 and ofShader as an addon.

screen

I might make a prerendered version in the next days to show you the real beauty :)[/img]

#2

looks good! but I would recommend you use something like snapz pro to capture the footage :P. You can use soundflower (free from cycling '74) to create a virtual audio output port which you can also route to your speakers so you hear whats going on, and snapz pro can record the audio with the video… (you can also use it route internal audio playing - e.g. mp3 - to software for processing as well)…

#3

I use soundflower to get anything from my soundcard since it doesnt work without it. I tried to screencapture it with different programs but that makes the music go out of sync and furthermore destroys the framerate. So I decided against it. I will try to make some prerendered footage during the next days/weeks.

PS: There is sound on the video. I only had the speakers of my mbp around thats why the quality is so crappy.

#4

Wow - looks great!

Theo

#5

it looks amazing!!!

and i also checked your other videos on vimeo, really great stuff!! :slight_smile:

#6

Pretty cool moka, i’m new to openFrameworks can you explain me how to do something to audio react?

#7

thanks,

well you should take a look at the documenation and look through ofSoundStream and ofSoundPlayer:
http://www.openframeworks.cc/documentation

in addition to that the OF example files are really helpful.

#8

I made a prerendered version. First I wrote all the fft data from the sound file to an XML and afterwards saved every single frame of the anymation using the FFT data from the XML to end up with a “rendered” video.

http://vimeo.com/1208488

#9

hi moka,

i am new with openframeworks and am looking to simulate some wave motion and the creation of bubbles in responds to tactile stimulation in water.

Do you have any recommendations on how to achieve the 3d effects of bubbles and the algorithms for the wave simulation?

Thanks alot!!!

#10

I guess I can only help you with the way I make the bubbles look 3D. I use a Shader for Billboarding purposes, so that the bubble textures always face the camera. it looks something like this:

vertex shader:

void main( void )
{
vec4 a = vec4( gl_MultiTexCoord0.xyz, 1.0 );
vec4 b = gl_ModelViewMatrix * a;
b.xy += gl_Vertex.xy * gl_MultiTexCoord0.w;
gl_Position = gl_ProjectionMatrix * b;
gl_TexCoord[0] = gl_Vertex*0.5 + vec4(0.5);
gl_FrontColor = gl_Color;
}

if you dont want to use shaders you can google for oldschool openGl ways to handle billboarding.

#11

Hi Moka,

I’m trying to do the billboarding using a shader. I’m using your code sample, and some code sample from Simon Gelfius [from a Processing project] as example.

I have ofxShader working in my project.

When I set the following shaders active the GL_QUADS [and the texture mapped on it] become invisible.

What am I missing ? Does something specific need to done to the opengl context in order to make this works - the ‘relation’ between the opengl camera and the Billboarding.

vertex shader:

  
  
void main( void )  
{  
    vec4 wpos = vec4( gl_MultiTexCoord0.xyz, 1.0 );  
    vec4 epos = gl_ModelViewMatrix * wpos;  
    epos.xy += gl_Vertex.xy * gl_MultiTexCoord0.w;   
    gl_Position = gl_ProjectionMatrix * epos;  
    gl_TexCoord[0] = gl_Vertex*0.5 + vec4(0.5);  
    gl_FrontColor = gl_Color;  
}

fragment shader :

  
  
uniform sampler2D tex0;  
void main(void){  
    vec4 col1 = texture2D( tex0, gl_TexCoord[0].xy );  
    gl_FragColor = col1 * gl_Color;  
}

in the Draw of testApp.cpp

  
  
faceCam.setShaderActive(true);		  
  
glBegin(GL_QUADS);  
			  
glTexCoord2f(0.0f, 0.0f);  
glVertex3f(256.0f,128.0f, 0.0f);  
			  
glTexCoord2f(float(palneteTex.tex_w), 0.0f);  
glVertex3f(768.0f,128.0f, 0.0f);  
				  
glTexCoord2f(float(palneteTex.tex_w),float(palneteTex.tex_h));  
glVertex3f(768.0f,640.0f, 0.0f);  
			  
glTexCoord2f(0.0f, float(palneteTex.tex_h));  
glVertex3f(256.0f, 640.0f, 0.0f);  
glEnd();  
  
faceCam.setShaderActive(false);		  
glBindTexture(palneteTex.getTextureTarget(), 0);  
glDisable(palneteTex.getTextureTarget());

Thanks.

//h

#12

can you post a small example with the shader so we can try?

thanks!
zach

#13

Hey, I am pretty busy with university right now but I will post a working example soon.

EDIT:
Now that I look at your code again its simply wrong how you wrote the openGL code.

Use this instead:

  
  
glBegin(GL_QUADS);  
// x,y,z, size of the quad  
glTexCoord4f( loc[0].x, loc[0].y, loc[0].z, thisrad); // <-- IMPORTANT  
glVertex2f( -1.0f, -1.0f );  
glVertex2f( +1.0f, -1.0f );  
glVertex2f( +1.0f, +1.0f );  
glVertex2f( -1.0f, +1.0f );  
glEnd();

That is necessary because the shader uses the texCoords to position the quad and texture.

That should work.

#14

Hi,

Here is some code showing what I do.

www.smallfly.com/of/-billboarding.zip

After doing this example application I have at least some stuff on the screen, but it is still buggy.

Following are the different params available:
press ‘1’ to turn off shader - It speaks for itself
press ‘2’ to toggle on/off rotating camera - Camera rotating around the center of the stage
press ‘3’ to toggle on/off on shader A [only] - This activates the shader included in an example for ofxShader. It deforms the shape/vertex.
press ‘4’ to toggle on/off on shader B [only] - This activates the billboarding shader.
press ‘5’ to map or not a texture on the GL_QUAD; - Map or not the texture on the GL_QUADS

For tests:
2 ----> works
5 ----> works
2 + 3 ----> works
2 + 4 ----> Almost there, just some wrong coordinates. The GL_QUADS is not drawn in the center.
4 + 5 ----> totally off

For the Camera I’m using some code shared by Rui Madeira.

I had to change ofTexture for this. I know I should have extended it, but I didn’t :wink:

I added to functions:
in the .h

  
  
int getTextureTarget();  
unsi[]gned int getTextureName();   
  


  
  
//----------------------------------------------------------  
int ofTexture::getTextureTarget(){  
	return textureTarget;  
}  
  
//----------------------------------------------------------  
unsigned int ofTexture::getTextureName(){  
	return (GLuint)textureName[0];  
}

and made those properties public

  
		  
int 	width, height;		// pixel width	(ie, 320 x 240)  
int 	tex_w, tex_h;		// internal w,h coords (ie, 512 x 256)

Thanks,

//h

@moka : Thanks. This would be great.

#15

did you allready read my edited post?

#16

nope. I’m going try this right away. Thanks.

#17

So the glTexCoord4f is definitively the solution, but I don’t manage to set the values in a way that it works. Or the quad is not placed correctly or the texture does not show.

I played around with some example in p5 but couldn’t figure out how to apply the solution to the quad in my really basic code.

#18

what is wrong? is the texture flipped or something?

#19

The texture is just not displayed.

When using this:

  
  
glBegin(GL_QUADS);  
	// x,y,z, size of the quad  
	glTexCoord4f( 512.0f, 384.0f, 0.0f, 512.0f); // <-- IMPORTANT  
	glVertex2f( -1.0f, -1.0f );  
	glVertex2f( +1.0f, -1.0f );  
	glVertex2f( +1.0f, +1.0f );  
	glVertex2f( -1.0f, +1.0f );   
glEnd();

It seems to me that I just can not see it because the quad is too small.

So I changed the call to glVertex2f to something like this:

  
  
glVertex2f( -100.0f, -100.0f );

With this the texture seems to be stretched. The pixel 1 of the texture cover the entire quad.

#20

dont change anything about the size of the vertices. leave them -1.0f and +1.0f.

As I commented on the small code snipped I posted you decide how big the texture is displayed with the fourth parameter of glTexCoord4f.