Evaluation

Overall with the final product I’m very pleased, it’s turned out to be a lot better than I expected. Usually with projects I come up with a very ambitious idea and through time the idea becomes simpler, this project however has done everything which I set out to do. I think that it modernises Tristan Tzara’s 25 Poems well, however I think it would be more effective if I was able to split each post into words, and take a random word from each post or something, also if I had some more time, I would also change the code a bit to make sure that none of the words overlap each other, because at the moment when the text appears and shuffles, it’s rare to see them all in their own space. Also one other function I would add if I had more time would be to choose between a number of languages to search, to refer back to the proposal, I said anybody around the world could use it, at the moment, twitapoem only searches for English tweets. I believe that dynamic data on the Internet is very powerful at the moment, and has been used all over the place, for example, Digg have created an RSS feed which take data from news articles and stacks them when more articles come in. I think it’s a very effective way of displaying data. It can be found here.

The Final Product

You can view the final project here

I thought of a name!

Twitapoem, I was thinking along the lines of joining twitter and poem together and this one has more meanings than one!

Twita (Could be said like “twitter” using slang!)

Twit (a twit, or tweet is a name for a post on twitter)

twit – a – poem

twitapoem, I quite like it

Development

I’ve split this post into 4 different sections, these were the stages of my development:

• Interacting with Twitter
• Drag and Drop functions
• Shuffling functions
• Design

1. Interacting with Twitter

I did a lot of research on Google to try and help me find a way to get twitter tweets into flash, I firstly looked into the API, and at first it all seemed very complicated. Aral Balkan gave a tutorial on how to get the new SWX working, however, as much as I tried, it didn’t work for me, I don’t think it would’ve given me the right results for the end product, the link is here. After countless google searches for help with the API, I resulted to looking into the ATOM feed, this seemed to be a lot more helpful, as with the atom feed, you could search and filter what is displayed, which is exactly what I wanted. Some documentation on how to use the ATOM feed was given on the API page here which seemed pretty simple, I just needed to find a way to get that into flash. After a lot more google searches, and about a day of searching, I finally found a lead here. Ploem posted some source code from his application, which helped me so much. The main functions which I used were this:

private function loadXML():void {
//search string
var searchString:String = "http://search.twitter.com/search.atom?q=" + searchName + "&=en&rpp=11";
loader = new URLLoader();

//request pointing to feed
var request:URLRequest = new URLRequest(searchString);
request.method = URLRequestMethod.GET;

//listen for when the data loads
loader.addEventListener(Event.COMPLETE, onDataLoad);

//listen for error events
loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

//load the feed data
loader.load(request);
}
private function onDataLoad(e:Event):void {
trace("onXmlLoaded");
//get the raw string data from the feed
var rawRSS:String = URLLoader(e.target).data;
//parse it as RSS
parseRSS(rawRSS);
}
//parses RSS 2.0 feed and prints out the feed titles into
//the text area
private function parseRSS(data:String):void {

if (!XMLUtil.isValidXML(data)) {
trace("Feed does not contain valid XML.");
return;
}
//create Atom10 instance
var atomfeed:Atom10 = new Atom10();

//parse the raw rss data
atomfeed.parse(data);

//get all of the items within the feed
items = atomfeed.entries;

showTweetsStart();
}
//start adding tweets
private function showTweetsStart():void {

for (var i = 0; i < 11; i++) {
mcNumber = 'currentEntry' + i;
root[mcNumber] = items[i];
}
//start timer
myTimer.addEventListener(TimerEvent.TIMER, showTweets);
myTimer.start();
}
//start displaying tweets
private function showTweets(event:TimerEvent):void {
var newHoz = randomHoz(170, 660);
var newVert = randomHoz(36, 450);
var current:Number = myTimer.currentCount;
var mcNum = 'currentEntry' + current;
var instanceNum:String = "a" + current;
//check if tweet is valid
if (root[mcNum].title != null && root[mcNum].title != "") {
root[instanceNum].tweet_txt.text = root[mcNum].title;
root[instanceNum].x = newHoz;
var myTween:Tween = new Tween(root[instanceNum], "y", Elastic.easeOut, newVert, newVert+10, 3, true);
var myTween1:Tween = new Tween(root[instanceNum], "alpha",None.easeNone,1,0,2,true);

} else {
root[instanceNum].tweet_txt.text = "Bad Tweet";
}
}

This is the code to get Twitter’s ATOM feed into flash, I created a number of movieclips which would contain the posts. I then also in the above code, created some tweens which would animate the boxes moving down as they appeared. Then the blue boxes would fade.

Next was to add the search function, at the top of the code there, there is this line of code:
var searchString:String = "http://search.twitter.com/search.atom?q=" + searchName + "&=en&rpp=11";

The variable in the middle called “searchName” is changed depending what is inputted into the search bar, when the user clicks Search, then this line of code is run and the XML is loaded in.

Special thanks to Ploem to helping me understand this code.

2. Drag and Drop functions

As you know, the movie clips which the text appears in are called a1, a2, a3 etc, I needed to add some code where the user could drag and drop them, as they are added onto the stage, I was able to give them instance names easily and able to drag and drop effectively, using the below code:

info_mc.visible = false;
var clipArray = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10];
for (var i:int = 0; i < clipArray.length; i++) {
clipArray[i].addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
clipArray[i].addEventListener(MouseEvent.MOUSE_UP, stopDragging);
}

function dragMe(event:MouseEvent):void {
event.currentTarget.startDrag();
}

function stopDragging(event:MouseEvent):void {
event.currentTarget.stopDrag();
}

As you can see here, I’ve put the instance names in an array, then run a for loop to add event listeners to the movie clips, I can therefore then start dragging and dropping the movieclips, this part of the assignment was very simple, and so far I’m very proud of the results.

3. Adding the Shuffling Functions

The shuffling function was very easy to make, I simply created a function which would pick a random number between to values, the numbers would represent the x and y co-ordinates. I then used a tween to move to that random number location. This was also a very easy part of the assignment, and I didn’t have too much trouble designing this part.

//shuffle tweets
function shuffle(event:MouseEvent):void {
for (var i = 1; i < 11; i++) {
var instanceNum:String = "a" + i;
var xPos = root[instanceNum].x;
var yPos = root[instanceNum].y;
var xNewPos:Number;
var yNewPos:Number;
xNewPos = randomHoz(100, 660);
yNewPos = randomHoz(36, 450);

var myTween:Tween = new Tween(root[instanceNum], "y", Elastic.easeOut, yPos, yNewPos, 3, true);
var myTween1:Tween = new Tween(root[instanceNum], "x", Elastic.easeOut, xPos, xNewPos, 3, true);
}
}
//generates a random number between 2 parameters
function randomHoz(minVal, maxVal) {
return minVal + Math.floor(Math.random() * maxVal + 1 - minVal);
}

I’m very pleased with the results of shuffling the posts, the easeIn and easeOut makes the application look very flashy

4. Design

All of the applications I have researched for this project, all have a very clean interface, and have kept the same design standards as twitter. They all look very similar. I wanted to keep this design going by creating a very clean interface. There is a website which I love made by a company called GT London, which was designed for the new Audi R8, I think the colours work really well. It can be found here. So I followed the same background colour scheme, as I think it looks very clean, fresh and professional. All the buttons all have very rounded edges aswell to give the feeling of the application being very light and bubbly. I was thinking of adding the names of the posters on the right side of the screen, but I thought that the application would loose it’s feeling of being simple. Having too much on the screen I think would jepordise that.

I also wanted to keep the same theme as twitter with the typography, I searched on google for a place that I could download the twitter font, and I found one here.

Problem Solving

There are a few problem involving this new idea, firstly the main function. Getting data from twitter into flash. There are a number of people across the world who have released source code with how to do it.
The second problem is I have to migrate from AS2 to AS3, I’ve done a little bit in Actionscript 3, however starting a whole new project in it will be a completely new experience and I will expect that a lot of the code I know from Actionscript 2 will not work in 3. So I will have to self teach myself AS3 along the way. Which is a good thing, because I’ve been meaning to learn AS3 for a while now.

I’m sure I will hit a lot of problems a long the way which I will hopefully solve, but I’m one of those people who doesn’t stop working until he gets what he wants! As long as it’s definately possible, the last idea was abit out of my range!

Proposal for New Idea!

The new idea which I plan to develop seems to be a bit less ambitious, it will be smaller and due to the fact that I know flash quite well, it should be easier.

I propose to make a small web application which receives data from Twitter, either through using the Twitter API, or using the Twitter ATOM feed.
The app is based on the idea that anybody can create a poem, as described in the last post, Tristan Tzara gave some instructions to the public to make your own Dadaist poem, I want to modernise this idea, by instead of cutting up newspapers, I will be getting dynamic data from Twitter, once in the application, the users will be able to shuffle or drag to re-arrange the posts to create their own twitter poem. I also want to add a search function which will filter the posts coming into twitter, so the only tweets being recieved are the ones with the search word in it. I think this gives the application another level of interactivity as adding the search will make the application more customisable, you’d be able to create a poem about what you want.

Twitter is the new up and coming social networking platform, however the website is a lot more simple compared to facebook or myspace etc, the tweeters using twitter post recent activities or ideas and therefore can express their love/hate for something, new ideas, videos, images to other tweeters following them. Twitter has an open API where developers can take information from twitter and design their own applications. I plan to design one myself. Culturally twitter has changed how people network over the internet, they can express and bounce ideas off each other as well as let friends / family know what they are up to.

In terms of who it’s for, it can be for anybody wanting to make their own twitter poem. I have not targetted any audiences as this is a unisex, multi-cultural application where anybody around the world can use the application.

Research Take 2!

I’m quite excited about looking into integrating Twitter with Flash, there are a few applications here which I am about to show which look very cool. As far as I know to integrate twitter with flash you need to use it’s API which can be found here. There are a lot of applications out there now, you can find a big list here. A few I picked out which I thought were quite interesting:

• Twittervision which is quite a well known application, uses google maps and displays in the map where people are talking from, there is a method in the Twitter API which allows you to get the Geocodes from each tweet, and therefore you can place exactly where people are tweeting from. I think that Twittervision visualizes this data very well.
• Twuzzer takes the same concept as Twittervision, but you type in your area and you can see the last 10 posts which were posted in your town/city. I think this is quite a good idea, and possibly an idea which Twittervision can develop, as it add’s that extra interactivity to the application. As explained in my essay, there are 3 concepts which define Interactivity (Participation, Customisation and Dynamic data). Twittervision currently only has one of the concepts, Twuzzer on the other hand has some participation and also as the user types in their town/city, it also add some customisation.
• TwitterSphere-Visualiser is a very small application which takes data from the public timeline, this doesn’t use any filters so it shows all the most recent tweets, posted anywhere around the world. I think the animation makes it quite sweet, and something like this would be quite enjoyable to make I think. The aesthetics of the application follows the same design as Twitter it’s self and the bird animations I think go well with the application. I think using tweets from around the world works well with my essay question, because even though the public do not realize they are apart of this application, they are creating the art. I looked into some more applications which use the public timeline in this way:
• Twitterfall again uses the public time line, and as the name suggests, implies that the program makes a “waterfall” out of twitter tweets! I think this is a good idea, especially as it has a constant fall of posts, and works very effectivly. Although this seems quite cool, I’m looking for something a bit more interactive, at the moment this only shows dynamic data, and you can only view the public time line (apart from if you sign in). The next few applications I found has a lot more interactivity and I feel are very interesting.
• Cloud this application is very, very simple. The user writes in what they want to search, and can click on tags, after that it will send to Twitter’s search, which is an HTML page generated by Twitter’s ATOM feed, there are ways to get ATOM feeds into flash, so that is another way of parsing tweets from twitter into flash. I think this idea could come to something, and might be easier to use Twitter’s ATOM feed then sorting out it’s API.
• Twistori, I really like this application. The user picks what mood they are in, and the application receives all the recent posts with that mood in. Again like Twitterfall, it is a constant stream and doesn’t stop which I feel is very effective, it almost looks like a poem, as all the words start on a new line. Could I create a poem application which gets data from twitter, can rearrange and drag the posts around. This could come to something?

As I was thinking about the poem idea, I realized that Tristan Tzara also uses poems as his artwork in his work 25 Poems. He didn’t create any poems, however he gave the public some instructions:

- Take a newspaper.
- Take a pair of scissors.
- Choose an article as long as you are planning to make your poem.
- Cut out the article.
- Then cut out each of the words that make up this article and put them in a bag.
- Shake it gently.
- Then take out the scraps one after the other in the order in which they left the bag.
- Copy conscientiously.
- The poem will be like you.
- And here you are a writer, infinitely original and endowed with a sensibility that is charming though beyond the understanding of the vulgar.

As you can imagine, taking random words out of a bag, shuffling them and re-arranging them would just be a piece of paper with a load of random words on it, but it would be considered a poem. I could modernise this idea, by getting random posts from around the world, the users would then be able to drag and re-arrange or randomly shuffle. I think this could be quite a good idea as it would relate well to my essay.

Change in Idea

I’ve looked into the whole project, and I thought it was slightly ambitious, as I don’t know MAX/MSP very well and would probably produce a better piece of work in a program which I understood and have a lot more confidence in. I have talked to Dan Livingstone, and he said he was surprised by the amount of people using MAX/MSP in their projects. So I’ve decided to take a different look on things and maybe produce a web application of something a bit more smaller, but has a better critical context.

A web application would be very interesting to make, hopefully in Flash. I was thinking of maybe involving Twitter in it, as it is the up and coming social network at the moment. I’m going to do some research into it and see if I can think of a good idea.

Technical Overview

My project will definitely need to use:

1. A camera which will film the audience moving
2. MAX/MSP to track the audience
3. Either Flash or Processing to animate the movements.
4. Projector to project the final dynamic content.

These are the main technical specs I will need to produce my project. I already have my own camera so that won’t be hard to get hold of, and I can download a version of MAX/MSP, I will have to learn how to use this program though, we have been taught the very basics in our Physical Computing module, however I am defineately not confident enough to make my own project in it yet.

I have chosen Flash or Processing to produce the  animations, as they are both very good programs to show dynamic content through. I am much more confident in flash, and I know that there is an object in MAX/MSP which will connect them both together. Processing however can create some stunning dynamic content, however I haven’t used this program before, so I’d have to learn it, I also don’t know if MAX and pass variables over to Processing, I will probably use Flash as I am much more confident in it, and already will have to learn MAX, let alone Processing at the same time.

The other day I found someone who created a tracking system entirely in flash (follow the link)
I thought this was pretty cool, it uses flash and papervision 3D to produce the graphics.

I have chosen to use a projector for my project as I don’t have enough resources to buy a massive screen to put on the side of a wall! So a projector is the next best thing.

Proposal

After doing some research and looking into my essay points, I’ve decided to do something similar to Camille Utterback’s Ubundance. I feel that doing something like this will be a great challenge for me. Installation art is something I find very interesting and would love to try something like this. I’m not really sure how I would do it yet, that’s something I will cover in the technical overview.

I will basically create a piece of art where animations will be drawn dynamically where the user moves to, it will act as a social space so many people will be able to use the installation to create a piece of art work on the wall.