Elements are all the information I can get from the various feeds and data sources, unfortunatley this information for a majority of sources seems to mainly be made up of utter crap. I’m sure its of some use to someone and when I probably make something else that involves a similar mechanic but to me and my end user and the majority of rss readers it seems pointless. I need to find a way of looking through this information for things that only I want rather than everything. Thats a job for tomorrow.

Today I set up the element rendering section of code, this takes each bit of information however useless and renders out the text using a text3d element, not sure its best or how to do hyperlinks yet but I’ll figure it out. Once we have the set number of elements we can find the rotation needed and change the position on the z-axis from the center of the node. Blam, done well apart from the separation of good/useless data, image rendering, video rendering. Oh and animations.

Think that’s all for today.

I thought I had found a neat way of doing this by using the bubble value of an event fired by clicking the node, the bubble feature, new to AS3, allows the event to float up the display list and be picked up by the parent objects, cool right.

So clicking the node, which passes the display object in the event, would float up the stack and be passed to the camera look at function. Done!!

But no! Apparently papervision 3D specifically display object 3d does not support the bubble feature of events. Next I looked at the interactive scene manager class of papervision this is what I think allows for the 3d objects to have hit tests. However this came with some issues, I could correctly pass the PRESS event on the node sphere to document class using this however the event also caused an issue. It seems that when we add an interactive scene event to an object it creates an ism(interactive scene manager) so when this event fires it gets sent to both the ism and object, makes sense right. Yeah so the adding a second ism without a display object would cause an event to fire erroneously, I think. In all honesty I can find very little good documentation for papervision and event propagation.

Not wanting to use something that would constantly error I decided to build my own version of bubble by add event listeners and dispatchers to the classes leading to the node. Great it works and everyone is happy, well not happy but at least it’s working.

No screenshot today, hasn’t really changed.

Basically looking at the last screenshot it have become apparent that the poistioning of the nodes needs some fine tuning! I was currently string searching the input data to find the lowest data however this is ernoeous as the some of the xml has atom schemes and namespaces that contain years such as 2005, throwing off my positioning functions. This is a problem as the data doesn’t start until half way up the helix, not good and data at the top becomes crushed together which it is already as data from places like hypem and last fm are often grouped together anyhow.

So now I’m having to traverse all the strands and child nodes looking for the smallest date and then repositioning the nodes. So Im traversing from visualiser to strand to node to strand to visualise to strand to node.  See what I mean about yo-yo. I can’t think of another way to accomplish it properly, soo this is going to have to do for now. I hope it doesn’t affect the performance to much.

I still want to streamline the code if I can.

The hardest parts so far have been the creation of a spiral in 3d space that wasnt a complete memory and processor hog, I originally looked at using cyclinders and some maths to do this and while the strand looked awesome it destroyed the processor of the computer it was running on. So I started to use lines, this was simpler as I could curve the lines using a control vertex, nice and simple but I couldnt make a smooth long helix shape as I wished and then I came across a really clever idea, to create a cylinder and then se the vertices that make up the cylinder to create my helix!

Done! Simple as in reality just needed to think about it.

The second step was positioning the nodes on the strands at the correct rotation and height for their date!! At this point my brain was already hating maths again. Calculating the position in 2d was simple just convert the date to microseconds since 1970, and normalise the result between min and max height. Boosh done!.

However in 3d the helix length is around 6000 but the height is only 2000 so using the same idea as before was out of the question. The solution is really a two step process.

1. Calculate the height. This was simple as I had already written the function to convert one range into another, so I simple converted the distance on the strand to the vertical distance range.
2. Calculate the angle the node should be at. This was also pretty easy after about 10 minutes of through. I already know the strand length and maximum rotation, 2000  and 720° respectively. From this I can calculate the angle a specific height.

angle = 720 * (position on strand/strand length)

With this all done I eventually get something like this, well actually this.

I’m currently using the debug camera as it has built in controls and allow me to experiment with things easily. This is also still an early build so the visuals might change.

Youtube => String

Video from Youtube = > Node

Details about Video (e.g. comments, durations, related, etc) => Elements

Makes sense? Hope so.

Currently I am displaying the nodes and one clicked the other nodes and strands are removed and the elements are added. This was simply displaying as a list but I wanted it as a radial dispersion of elements. To do this I brought out my badass maths skills, I actually quite enjoy maths and wish I had  done it instead of physics but thats another story.

The first step was to calculate the angle between each element, simply enough, find number of element and divide from 360.

var angle = 360/elementsArray.length;

Second was to find the x and y position for each element. This was done by using a for loop and multiplying the angle by the position in the elementsArray. This was then converted to radians, as Flash uses radians, and trigonometry and pythagorus used to calculate the x and y. The following takes place inside a for loop:

var degrees= angle * i;
var radians = degrees *Math.PI/180;
x = 50 *Math.cos(radians);       //50 is the distance from the centre
y =  Math.sqrt(Math.pow(50,2) - Math.pow(x,2));

if(angle > 180){
y= -y;
}

This is going to rapidly speed up time spend making it look pretty.

Thanks guys

trace(new Date("2004/12/1 14:00:12"));

//output = Wed Dec 1 14:00:12 GMT+0000 2004

This creates a new AS3 date object as above but now we can run different time and date based functions upon it, with out having to do string splits and so on to get the month or day etc.

This is great for me as importing data from many sources has meant that the date is always formatted correctly and so a generic function could produce errors. Unfortunately it doesn’t handle ISO8601 dates as used be Google/Youtube etc so I have to parse the dates and alter them slightly to be able to do the above;

trace(new Date("2010/05/03T14:14Z"));  //this will error 'invalid date'

var isoDate = "2010-05-03T14:14Z";

//this will remove the T and Z

var date = isoDate.replace(/[A-Z]/gi," ");

//this will replace the hypens with forward slashes

date = date.replace(/\-/gi, "/");

//this casts the string to date and creates the correct date object

trace(new Date(date));

From the data object I have been able to create the strands and individual nodes using the data for the position of the node on the strand. This originally posed some issues as simply using the number of microseconds from 1970 would produce nodes that are millions of pixels off of the top of the swf (in still working in 2d – to solve any logic issues), to solve this I am querying the input strings and looking for any dates in the 2000-2099 range . This is simply done through a regular expression:

/20[0-9][0-9]/

Using as3 string match I can return all dates in this range into an array, it is then possible to iterate through the returned array and look for the smallest date, abase date to work off of instead of 1970. This tends to be around 2004/5 which is when many of these services hit mainstream usage.

However even using 2004 – now as a range of values the nodes where still thousands of pixels off of the top of the screen. Instead of using a camera arrangement I chose to take a leaf out of Processing which allows the mapping of one range to another, therefore I could map the large distances to stay within the confines of the stage.

In Processing this function is called MAP, unfortunatley Flash doesn’t seem to have an appropriate version or I could not find one so I made one.

function mapRange(value:Number, origMin:Number, origMax:Number, newMin:Number, newMax:Number):Number{
//remove origMin
value = value - origMin;
origMax = origMax - origMin;
//calculate new range
var range = newMax - newMin;
//calcualte position in new range starting at 0
var newPosition = (value/origMax)*range;
//move range to newMin statring value
newPosition = newPostion + newMin;
return newPosition;
}

I’ve set up user input a little better, validation and error dection is working and I’m using the tweenlite library for some little visuals that are in the current build.

Also I created a little loader for when the app is ssearch for the user data as this can take a little while.

Where am I now?

Basically the data collection side is done, I will still work on bits of it but while also implementing the visual side of the project.

I have begun to set up strands (a strand is an individual source) and the nodes within that source (a node is a single item,  post , video etc). Currently this will simple be a 2d implementation until I am happy with how the elements are formed. Once that is all basically finalised I will look at the 3d variation.

So good times!!!!!