Sam Scaife - Digital Media Design BA

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