Sam Scaife - Digital Media Design BA

I've never done any JS before for I decided a good way to start was to do some of the examples from the website Codecademy so that I could see how the structure of things such as arrays and variables where in JS. In total I did a little over 100 exercises on the site covering the basics and object oriented programming.

Alongside this I also downloaded some example projects from CreativeJS by Paul Lewis and Seb Lee-Delisle. I thought it would be a good idea to look at Seb's coding as he taught me everything I know about programming so far so it might have similarities in the structure and approach to it. I looked thought these projects and tried to look for the various section that appear in processing such as the draw loop and the setup, by doing this I was able to understand the structure of JS. Through doing this I was introduced to some new concepts such as DOM, Document Object Model, and a better understanding of API, application programming interface.

I wanted to start off really simple, so instead of building twitter counter straight away I build a simple bouncing ball in js. I made sure that I hand wrote everything so that I would be able to spot when I made mistakes and would actually be learning. I also made sure to comment my code so that I would understand what every section was doing.

//load up my bounce class
var Bounce = (function() {

var canvas = null,
context = null,
SCREEN_WIDTH = 0,
SCREEN_HEIGHT = 0,

//ball variables
xPos = 500,
yPos = 500,
xVel = 10,
yVel = 9,
radi = 50;

// init the code
function init() {

measureScreen();

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

//StartsLoop
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 = "rgba(255,255,255,1)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}
// draws bouncing ball
function draw() {

xPos += xVel;
yPos += yVel;

// x cordinate bounce
if (xPos > SCREEN_WIDTH - radi) {
xVel *= -1;
xPos = SCREEN_WIDTH - radi;
}
if (xPos < radi) {
xVel *= -1;
xPos = radi;
}
// y cordinate bounce
if (yPos > SCREEN_HEIGHT - radi) {
yVel *= -1;
yPos = SCREEN_HEIGHT - radi;
}
if (yPos < radi) {
yVel *= -1;
yPos = radi;
}

context.fillStyle = 'rgb(200,255,200)';
context.beginPath();
context.arc( xPos, yPos, radi*2, 0, Math.PI * 2, true );
context.closePath();
context.fill();

}

//Loop
function update() {
clearContext();
requestAnimFrame(update);
draw();

}

//api
return {init: init};



})();

//start my code when window opens
window.onload = function() {
Bounce.init();
};

I have put a live version on my site. As you can see its a little buggy but I'm pretty happy with how it turned out and learn a lot writing it. The project runs in html5 using the jS to put the canvas element in the html when the page loads, this is so it will be full screen regardless of screen size.

I was quite keen with this project to use it to enable me to learn JavaScript. It had been my intention to recreate my processing project in JavaScript before I found out about the repeat api use issue. Now however I have found out about Node.js which is defined on their site as,

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

This is perfect for what I want to do as it will all be in JS so that I can spend more time learning it and it will enable me to have my api section running server side.

Node.js looks really advanced however so I'm going to start by learning some JS and then porting my existing processing prototype to JS.

After doing some more reading about the Twitter streaming api I came across a paragraph which I had not noticed before.

Each account may create only one standing connection to the Streaming API. Subsequent connections from the same account may cause previously established connections to be disconnected. Excessive connection attempts, regardless of success, will result in an automatic ban of the client's IP address. Continually failing connections will result in your IP address being blacklisted from all Twitter access.

The impact of this means that I can not have each user run a version of my code otherwise I would be running multiple connections and would risk an automatic ban. There is the possibility of using a 'site stream' though you have to apply for this and I do not want to waste time waiting to see if I'll get one.

The way around this is to have my code running on a websever which is always active which then users request the information from when they visit the site. I like this as it lets me follow my idea of the site as an object. However I've no idea about server side programming so I need to do some research.

Currently I know that I want my visualisation to be delivered online but I'm not sure what I'm going to build it with. However to understand the processes involved I've decided to mess around with processing and the Twitter api.

There is a Java Libary which I found on a blog post by Jer Thorpe called Twitter4j which will let me access the twitter api. I created my api key by going to the developer section of twitter then messed around with some code I found so that I could understand what each of the sections did.

The first project uses the twitter search api. It was built by going through this Jer Thorpe tutorial then modding the code slightly.


This project searches a given time period for a random sample of X tweets containing Y, in this example X is 10 and Y is "Sleep".
The search api is good but it only gives you access to existing tweets not ones which are coming in live for this I need to use the streaming api.

I found an example by Michael Zick Doherty of using Twitter4j to access the streaming api and display images when they come in on a chosen subject. By looking at this and decompiling the Twitter4j library so I could understand its structure and how the classes worked.

With this knowledge I was able to write a prototype that I could increment a variable when ever a tweet came in. Once I had this I was able to create a display which would show this amount over time. One thing which was really useful while building it was to create a little debug panel which I could look at the amounts in my current variables and spot if there where any errors.

//Search term
String keywords[] = {"breakfast"};

//Global variables
int countDuration = 60000; //how long before the counter moves on (in miliseconds)
int globalCount;
int pGlobalCount; //previous global count value
int cp = 0; //counter position
float time = 0;
TweetCount[] tweetCount = new TweetCount[59]; //amount of bits of data to collect
TwitterStream twitter = new TwitterStreamFactory().getInstance();


// Twitter API variables
static String OAuthConsumerKey = "XXXXXXXXXXXXX";
static String OAuthConsumerSecret = "XXXXXXXXXXXX";
static String AccessToken = "XXXXXXXXXXXXXX";
static String AccessTokenSecret = "XXXXXXXXXXXXXXXXXXXXX";

//////////////////
//////////////////




void setup() {
size(1000, 400);
noStroke();
imageMode(CENTER);
smooth();

connectTwitter();
twitter.addListener(listener);
twitter.filter(new FilterQuery().track(keywords)); // This is where my filters come into the code

for(int i=0; i tweetCount[i] = new TweetCount();
}
}
void draw() {
background(0);
debug();
CountPosition();


for(int i=0; i float xpos = map(i, 0, tweetCount.length, 0, width);
tweetCount[i].render(xpos);
}

tweetCount[cp].counting();

}

// Initial connection
void connectTwitter() {
twitter.setOAuthConsumer(OAuthConsumerKey, OAuthConsumerSecret);
AccessToken accessToken = loadAccessToken();
twitter.setOAuthAccessToken(accessToken);
}

// Loading up the access token
private static AccessToken loadAccessToken() {
return new AccessToken(AccessToken, AccessTokenSecret);
}

// This listens for new tweet
StatusListener listener = new StatusListener(){

public void onStatus(Status status) {

//println("@" + status.getUser().getScreenName() + " - " + status.getText());
globalCount++;
}
public void onDeletionNotice(StatusDeletionNotice statusDeletionNotice) {
//System.out.println("Got a status deletion notice id:" + statusDeletionNotice.getStatusId());
}
public void onTrackLimitationNotice(int numberOfLimitedStatuses) {
// System.out.println("Got track limitation notice:" + numberOfLimitedStatuses);
}
public void onScrubGeo(long userId, long upToStatusId) {
System.out.println("Got scrub_geo event userId:" + userId + " upToStatusId:" + upToStatusId);
}

public void onException(Exception ex) {
ex.printStackTrace();
}
};

void CountPosition() {

if(millis()-time >= countDuration) {
time = millis();
cp++;
pGlobalCount = globalCount;
}
if (cp==tweetCount.length) cp = 0; //counter postion reset
}

void debug() {
text("globalCount =" + globalCount, 20, 20);
text("pGlobalCount =" + pGlobalCount, 200, 20);
text("CountPosition =" + cp, 20, 40);
text("time =" + millis()/1000, 20, 60);
}


class TweetCount {

int count;
int countreset;

TweetCount() {

}


void render(float xpos) {

fill(255,100);
ellipse(xpos, height/2,count,count);
fill(255);
text(count, xpos, height/2+70);

}
void counting() {

count = 0;
count = globalCount-pGlobalCount;
//println("count =" + count + " globalCount =" + globalCount + " pGlobalCount =" + pGlobalCount);
}
}

At this stage I am happy with my knowledge of how the code side of it works I just need to look into how I will make this available online

I've now settled on a new idea. I got a little lost thinking about interesting ways in which I could use images from Instgram. I did want to create a site which would show images of what people are eating in real time based on the images coming in from Instgram (I may still try build this sometime as it sounds like a fun project). Now though I've decided that I'm just going to draw my data from twitter.

The basic idea is that I want to create an abstracted real time clock based on people talking about lateness on twitter. Hopefully this will produce an interesting clash of ideas. I am still keen on it being created for a gallery space but I also want it to be accessible online so that, like the data its based on, it's not spatially limited.

Glitchhiker was the winner of the 2011 Global Game Jam NL. Its a simple game with a fantastic mechanic, the game can die. Infact it is already dead. The game works by having a global life count, starting the game uses a life and collecting 100 coins gains a life. Once the lifes reach 0 the game is no longer playable or downloadable so it dies!

This is quite a similar concept to what I picked up from Iain M banks. I think it would be really interesting to build a world from data which only develops based on if people are using it. I can picture this in a few forms;

• A virtual world which grows over time as it is viewed at a speed based on the amount of people viewing it. If no one or a limited number of users are viewing it then it will degenerate with time until its being watched again.
• A generative narrative animation which progresses when ever someone is viewing it so that if you come back to it you will miss parts of it. This would work really well if it was a 24 hour loop so it would encourage people who are interested in the story to visit regularly so that they can know where they are within the story and then catch up. This would need a story which did not depend on traditional narrative structures, such as the Golden Notebook by Dorris Lessing

This kind of approach also in this idea I was talking about previously in my blog about treating the website like a real thing which has a life away from the user. This contrasts with the classic view of it being a portal to dispense information.

Well I have written a few notes in my sketch book based on a new idea of displaying some form of life data online. As they are in my personal sketchbook like before I'm going to upload them here as I will still need to use my sketchbook! I also played around with some different ideas here as well.