Using SoundManager2 to create a texture of EQ spectrum data via javascript

I couldn’t find a snippet to fill a 256px size audio texture so I thought I would share mine incase it helps anyone:

View Demo

http://onedayitwillmake.com/blog/wp-content/uploads/2011/06/audiotexture/AudioTexture.html

Code Sample

function initSoundObject() {
	soundManager.flashVersion = 9;
	soundManager.url = '../../swf/';
	soundManager.useHighPerformance = true;
	soundManager.debugMode = true; // disable debug mode
 
	// When soundmanager has finished loading, loud our mp3
	soundManager.onready(function() {
	  // Ready to use; soundManager.createSound() etc. can now be called.
		soundObject = soundManager.createSound({
			id: 'mySound',
			url: 'img/ModulaScren-thisiswhoweare.mp3',
			autoLoad: true,
			autoPlay: true,
			usePeakData: false,
			useWaveformData: false,
			useEQData: true,
			volume: 50
		});
	});
}
 
var drawSoundData = function () {
	if(!soundObject)
		return;
 
	var textureWidth = 256;
	var textureHeight = 64;
	var textureCanvas = document.getElementById("dotc");
//	var textureCanvas = document.createElement("canvas");
	textureCanvas.width = textureWidth;
	textureCanvas.height = textureHeight;
	var textureContext = textureCanvas.getContext("2d");
	var textureImage = textureContext.getImageData(0, 0, textureWidth, textureWidth);
 
	var len = soundObject.eqData.left.length;
	for( var k = 0; k &lt; len; k++ ) {
		// Set the RGBA data for this pixel - note: +soundObject.eqData.left[i] 
                // is just a unary operation to convert to a number
		var spectrumValue = (+soundObject.eqData.left[k] + +soundObject.eqData.right[k]) / 2.0;
			for (var j = 0; j &lt; textureHeight; j += 1) {
				var column = k;
				var index = (j * textureWidth + column) * 4;
				var RGBA = spectrumValue * 255;
				textureImage.data[index + 0] = RGBA;
				textureImage.data[index + 1] = RGBA;
				textureImage.data[index + 2] = RGBA;
				textureImage.data[index + 3] = RGBA;
			}
		}
	textureContext.putImageData(textureImage, 0, 0);
 
	// Set the texture
	if(!window['gl']) return;
 
	var texture = gl.createTexture();
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texImage2D(gl.TEXTURE_2D, 1, textureCanvas);
	gl.generateMipmap(gl.TEXTURE_2D);
};
 
window.setTimeout( drawSoundData, 1000 / 60 );

Using Eclipse with Cinder – A better c++ editor

I was really having a hard time with Xcode lately, specifically how its C++ code-completion leaves much to be desired especially if you have a very bad memory. I find myself constantly painfully looking through the header files to find the exact name/case of a function or property.

So I decided to try and see If i could get up and running with Cinder in Eclipse instead, it wasn’t too bad either !!! Just a couple of issues getting the linking right, but that was about it.

Download / Github

https://github.com/onedayitwillmake/EclipseLovesCinder

Xcode is a great IDE, however it is not great at C++ editing

It provides only very barebones syntax highlighting, even more barebones code completion, and no edit-time error checking.

Cinder is a great library, but it’s very vast – Without code-completion I was very lost/ nearly all the time poking through the header files and opening the .cpp files in other editors so I could learn it more thouroughly.

(Re)-Enter EclipseIDE for C++

This project is presented as is for anyone else who would like to use a C++ editor on osx that is actually aware of your classes.
From what I’ve used it so far, it is much better – but compile times are a little slower, however the time you save while editing is well worth it imo.

Usage

http://www.eclipse.org/downloads/packages/eclipse-ide-cc-developers/heliossr2
Download this project
Import into eclipse workspace (select import existing project in the ‘general’ drop down)
In terminal browse to the projects path and create a symbolic link named ‘CINDER_PATH_LINK’ to where cinder is located
1. “ln -s foo/bar CINDER_PATH_LINK”
2. Where ‘foo/bar’ is the path to Cinder such as ‘~/GIT/LIBRARY/CINDER’
[Optional] – RightClick project root, select properties
1. Select C/C++ Build
2. Select Settings
3. Replace ‘g++’ with ‘clang++’ and ‘gcc’ with ‘clang’ for the:
- [Optional] Do the same for the discovery tab
After hitting, apply/ok and closing that window select Project->Build All and project should build successfully.

Screenshots

Debugger / Hitting a breakpoint

Editor

OpenNIStarterKit Block

Editor

Better syntax highlighting, and code sense

Editor

Cinder + threaded OpenNI Skeletontracking

Here is some stuff I’ve put together that does Skeletontracking via OpenNI on a separate thread in cinder.
This is based on some code that was posted by Sector9 on the cinder forums, and which is based on the example code that comes with the Nite module.

For some reason my skeleton is offset by some seemingly random number. I’m not sure what’s causing that if someone could take a look
https://github.com/onedayitwillmake/CinderOpenNIBarebones

In order to get this to work, you’ll need to get OpenNI working on it’s own first.
I recommend following these steps, http://c4c.posterous.com/installing-openni-kinect-drivers-and-nite-on

PostADay-Round2#2 – Cinder/C++ Boid class port

It’s weird porting something that was written into, c++ ported to AS3, back to C++. However If you’ve ever tried to find the C++ version of a boids class. They’re all too complicated for my needs, and i really like the way @soulwire ‘s version works so I started porting it into C++. Based largely on my iOS port of the same class.

https://github.com/onedayitwillmake/CinderBoid

VIDEO DEMOS

WanderSeek

BoidTrailTest from mario gonzalez on Vimeo.

Basic Usage

.cpp

Creation

 
<code>
float boidMaxSpeed = 100;
float boidMaxForce = 25;
 
// Create
_boid = new Boid( boidMaxSpeed, boidMaxForce );
_boid-&gt;setPosition( _target.x, _target.y, _target.z );
 
// Set wander properties
_boid-&gt;setWanderRadius( 75.0f );
_boid-&gt;setWanderMaxTurningSpeed( M_PI / 32 ); // 
_boid-&gt;setWanderLookAheadDistance( 300 );
 
</code>

Update



_boid->wander( 0.3f );
_boid->seek( _mousePositionXYZ, 0.8f );
_boid->update();

PostADay-Round2#1 – Calculating surface normals in C++

Given a quad, this is how you can calculate the normals for each face.
This works for triangles, as well as quad.

Loop through each face, and pass in 3 verticies. If you have a quad ABCD pass in ABD. For example for the front facing face on this cube, I would pass in, v2, v3, v0

// cube ///////////////////////////////////////////////////////////////////////
//    v6----- v5
//   /|      /|
//  v1------v0|
//  | |     | |
//  | |v7---|-|v4
//  |/      |/
//  v2------v3

This is in C++ which supports operator overloading, so keep that in mind, when you see p2-p1, its doing: (p2.x-p1.x; p2.y-p1.y; p2.z-p1.z; )

// 
Vec3f RibbonMesh::calcNormal( const Vec3f &p1, const Vec3f &p2, const Vec3f &p3 )
{
    Vec3f V1= (p2 - p1);
    Vec3f V2 = (p3 - p1);
    Vec3f surfaceNormal;
    surfaceNormal.x = (V1.y*V2.z) - (V1.z-V2.y);
    surfaceNormal.y = - ( (V2.z * V1.x) - (V2.x * V1.z) );
    surfaceNormal.z = (V1.x-V2.y) - (V1.y-V2.x);
 
 
    // Dont forget to normalize if needed
    return surfaceNormal;
}

Even more barebones CAAT Template

Similar to a previous post, where I provided a basic template for my CAAT circle-collision manager, i wanted to provide the most utterly basic hello-world template possible for CAAT that does almost nothing except put initialize and draw a single object.

You can find that here:
(Select downloads, and select EntryPoint)
https://github.com/onedayitwillmake/CAAT-Hello/tree/EntryPoint

CAAT

CAAT is short for Canvas Advanced Animation Toolkit. It is written by @hyperandroid, the code itself is a dream to look thru. Its insanely well written, and whats more greater is that it’s even faster than it is nicely written!

I used it for, http://holiday2010.ogilvy.com which I plan on writing about a little bit more in the future. Because I liked CAAT so much, and it saved my butt on that project, I wanted to contribute back to it, so I have added my simple CircleCollisionManager class back into it.

Base template

I wanted to create the most basic shell, in order to get it up and running with something displaying on the screen. So I have shared the source for the code below which i tried to keep as succinct as possible.

Most basic helloworld with CAAT
http://onedayitwillmake.com/CAATCirclePack/

Here is the code for that:
https://github.com/onedayitwillmake/CAAT-Hello/zipball/CAATTemplate_CollisionCircle

I tried my best to make it have code that contains enough useful functions that show off a few CAAT features, without getting too far beyond HelloWorld.

Post-A-Day #4 – Objective-C Flocking-Behaviors/Boid Class

This post a day thing is great, it’s really made me kick some stuff into gear.

I love flocking behaviors, they’re awesome.
What are Flocking Behaviors?

They were created in the 1980’s from by Criag Renolds, the gist of it is that using 3 simple behaviors, surprisingly complex motion can be formed when you have many actors ( Referred to as Boids, i think Craig meant it as a another way of saying Birds, a more new york way).

The three rules are simple, i’ll explain them as i know them but im no expert.
Separation: Boids want to stay a little away from each other, some elbow room.
Cohesion: Boids want to be grouped, as long as they dont get too close they violate rule 1
Alignment: Boids within a certain range, care about which way other boids are going.

Simple right? Anyway, it makes for very pretty stuff.

A few months ago a friend of mine gave a talk based on Kieth Peters book AdvancED ActionScript 3.0 Animation (a great book). This re-sparked my interest in them, and with my on going interest in iphone development – I decided to try and port Kieth Peters code to Objective-C as best I could with the more limited knowledge I had at the time.

It actually didn’t work all that great, but, I came across SoulWire’s interpretation of Flocking (also in AS3), and I ported that. Maybe it was because it was my second attempt at porting, but this time I got really great results.
200 Objects flocking, all aware of every single other one, on a tiny iphone in your hand, that was very rewarding.
The problem was that I used Box2D’s point class B2Vec2, and then i modified it a little to boot, because I wanted to add a few operators it didn’t have built in. So it left me with something I could not really share with anyone else, and also it was now Combining Objective-C and C++, which always seems like you should avoid it whenever possible.

This was many months ago (march according to my SVN), and i had my fun playing with it and left it at that.
However, recently on the Cocos2D forums someone brought up making a heat seeking missile and I mentioned that stearing behaviors would be a great for that, if maybe over complicated but being a game forum – you worry about that less as it might be a great jumping platform from which additional gameplay ideas stem.

I decided I would revisit my class, as I had been wanting to for a long time, and re-write it using only CGPoints so that it could be pure Objective-C.

This was the result:

LittleBirds from mario gonzalez on Vimeo.

Here’s how to use the class:

 
// Creating it
boid = [Boid spriteWithSpriteSheet:_sheet rect: boidRect];
[boid setSpeedMax: 2.0f andSteeringForceMax: 1.0f];
[boid setWanderingRadius: 16.0f lookAheadDistance: 40.0f andMaxTurningAngle:0.2f];
 
// On your update function
while(boid)
	{
		Boid* b = boid;
		boid = b->_next;
		[b wander: 0.19f];
		[b 
		 flock:_flockPointer
		 withSeparationWeight:0.6f
		 andAlignmentWeight:0.1f
		 andCohesionWeight:0.2f
		 andSeparationDistance:10.0f
		 andAlignmentDistance:30.0f
		 andCohesionDistance:20.0f
		 ];
 
		[b flee:badThingPosition panicAtDistance:5 usingMultiplier:0.6f]; // avoid touch
		[b seek:yummyFoodPosition withinRange:75 usingMultiplier:0.35f]; // go towards touch
                [b update];
	}

The class may be downloaded here:
BoidsExample Version 0.2

It’s coded to the best of my ability, if you have (impactful) optimizations please share.

Update #1:
Fixed Flocking example class linked list creation bug.

Simple rules combine to make seemingly complex behaviors: