Sam Scaife - Digital Media Design BA

In the end getting this live was a nightmare as I missed out some basic steps due to my unfamiliarity with server side programming but by slowly taking apart examples and experimenting with my code I was able to track down my bugs and get it live, which I'm really pleased with. so its now live on my openshift account with the name Twit Twock.

This visualisation works as a clock which shows a universal time unconnected to any real sense of time. the top row of circles represent the volume of tweet containing the word 'late' within 6 seconds, so the 10 of them make up 1min. The bottom row is the same but each circle represents 1 hour, there are 24 of them in total making up 1 day. The idea is that you are unable to use the clock to time the events in your life which feeds back into people communicating their frustration. And if no one feels late then the clock dose not display as no information is coming in. Given time you could learn to read a relative time from the clock by watching for trends which appear at different times of day, though thats not really the point. The whole thing is kind of pointless and self mocking

I've now got it all working! but that's on my local machine. As i've been doing some research into how to get it online I think the easiest way is going to be by using some cloud based hosting. There is a large amount of different cloud hosts available but the one which stood out to me was OpenShift. This is a free service and I've found an article about using this in connection with Cloud9, a cloud ide. By using these two services my project will be fully cloud based!

I have found a Twitter api client for node called Twit this will allow me to access the Streaming api. As this is on the going to work on the sever side I need to have it talking to my client side js to do this I've been doing some reading (Manipulating JSON and XML with node.js, JSON Round Trip with node.js) and I'm going to use GET to pull a json file with the current amount of tweets from the sever. I will then be able to parse this file and set by count variable equal to it.

I wanted to get my Tweet faker working in node before I tried pulling in live information. Node.js has the ability to install little programs and libraries into your code which allow you to easily do a whole host of different things. One of these is called File System, or fs. With this you can do a load of different functions with your files what I was interested in though was the ability to alter the section of my server which controlled what to deliver to the user so that It would give a file instead of text.

I managed to figure out how to do this by changing the string which was delivered to a variable which was loaded with the file information from fs, here is an example of the code;

fs.readFile('./index.html', function (error, data) {
if (error) {
throw error;
}
index = data;
});

function start(response) {
console.log("Request handler 'start' was called.");

response.writeHead(200, {"Content-Type": "text/html"});
response.write(index);
response.end();
}

This is just the small section which delivers the html file to the rest of the code. Using this method I was able to get my sever delivering the html and js files so I had my fake tweet visualisation running. This method however runs multiple versions of my twitter api key so if I where to go live with this I would get banned. To stop this I need to migrate my code to the server then use JSON to request the variables

When it came to installing node I got a bit confused at first as something went wrong in the installation and it was not working like it was meant to. This lead me to trying to emulate Linix on my pc so that I could use the large amount of user documentation for it. However I final managed to get it installed on my pc after reading this tutorial.

Node.js is controlled through the CLI, command line interface, which looked scary at first but turn out to be very logical and simple to use. I came across and online book Node Beginner which was incrediably helpful, I ended up reading all of it. This book clearly explained how Node.js worked and how to build for it. Through reading that book and this article on Writing for node and the browser I was able to begin to understand the aims of server side programming.

I started off building a simple hello world server which simply writes hello world in the browser. I then worked through the examples in the node beginners book seeing how everything worked. Once I'd built its simple server which would communicate between pages I re wrote the whole thing myself to see if I could remember the correct structure and how to link everything. Doing this really helped me understand what I was writing.

The code for my processing twitter counter was pretty simple so I decided that I could have a go at building a fake version using js. I chose to make it fake because I did not want to get into any of the complications for needing to access the Twitter api as I'm not sure what they will be and would like to know I can get the underlying structure working first.

Again I made strong use of comments in this project so that I could easily refer to it and understand what was going on. For the tweets I just made a simple random number generating function which I used inplace of a real number of tweets.

/*current bugs
- suspected memory leak with currentTime function, animates even outside of the loop
-growth is not smooth. potentially something with how Im looping through my draw.
*/

//global variables
var countDuration = 10, //seconds. However js dose use millis.
globalCount = 0,
pGlobalCount = 0,
cp = 0,
time = 0, //this will return a value in seconds
context,
SCREEN_HEIGHT,
counterAmount = 10,
nodeDistance = 0,
nTweets = 0,
timeReset = 0,
s = 0,


//create builder
Counter = (function() {

//builder variables
var countDisplays = [],
canvas,
SCREEN_WIDTH;
//initiate
function init() {

measureScreen();
currentTime();

//sets up DOM elements
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
setCanvasSize();
document.body.appendChild(canvas);

//loads counters elements
createDisplays();

//Starts Loop
update();

}

function measureScreen() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
}

function setCanvasSize() {
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
}

function clearContext() {
context.fillStyle = "rgb(0,0,0)";
context.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
}

//Tweet facker
function fakeTweets(frequency) {
var random = (Math.random()*10)+1;
nTweets++;

if( nTweets === frequency) {
globalCount += random;
nTweets = 0;
}
}

//caluculates which counter should be counting
function countPosition() {
if (currentTime() - timeReset === countDuration) {
//if (currentTime() % countDuration === 0) { //THIS IS BUGGED STICKS ON 4
timeReset = currentTime();

cp++;
pGlobalCount = globalCount;
}
if (cp === counterAmount) cp = 0;
}

//recursive function which increase time by 1 every second.
function currentTime() {
time++;
return (time/60).toFixed(0); //toFixed lets you round to X decimal places. in this case 0.
//setTimeout(startTime,1000);
}

///////////////////////////////////////////////////////
// COUNTERS

//renders the counters
function drawCountDisplays() {

//runs through all the counters in the array

for(i = 0; i < countDisplays.length; i++) {
var current = countDisplays[i];

// checks if the current array should be counting
if(i === cp) {

current.counting();
current.size = current.counting();
current.countRender();
} else {
current.countRender();
}
}
}

//populates an array with count displayers
function createDisplays() {

for(i = 0; i < counterAmount; i++ ) {
//xpos: {SCREEN_WIDTH / (counterAmount - i)};
//xpos++;
nodeDistance = SCREEN_WIDTH / counterAmount;
countDisplays.push(
new CountDisplay((i+0.5) * nodeDistance, 0));
}
}
// end of counters
///////////////////////////////////////////////////////

//DEBUG PRINTER
function debug() {
document.getElementById("globalcount").innerHTML= "Global Count = " + globalCount;
document.getElementById("pglobalcount").innerHTML= "Previous Global Count = " + pGlobalCount;
document.getElementById("countposition").innerHTML= "Counter Position = " + cp;
document.getElementById("timereset").innerHTML= "Time reset = " + timeReset + "sec";
document.getElementById("time").innerHTML= "Time = " + currentTime() + "sec";
}

function render() {
currentTime();
fakeTweets(25);
//createDisplays();
countPosition();
drawCountDisplays();
debug();
}

//the loop - I think This is a recursive function.
function update() {
clearContext();
requestAnimFrame(update);
render();
//fakeTweets(25);
//countPosition();
//drawCountDisplays();
}

//api
return {
init: init
};

})();

// Constructer for Count Display Objects
function CountDisplay(xpos, size) {


this.size = size;
count = 0;

//counts the amount of tweets
this.counting = function() {
count = globalCount-pGlobalCount;
return count;
}
//draws the counter based on the amount of tweets
this.countRender = function(){

context.fillStyle = 'rgba(255,255,255,0.5)';
context.beginPath();
context.arc(xpos, SCREEN_HEIGHT/2, this.size, 0, Math.PI * 2, true);
//context.arc(xpos, 200, 50, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}
};




//starts code
window.onload = function() {
Counter.init();
};

Its steadily getting more and more complicated! and I've not even started on the web sever. This took a little more work as I had a few simple bugs which due to how new I am to JS I couldn't spot. There are still some bugs in this any way, as you can see from the top line. I have not put this online but here is a screen grab of it in action