IDAT 102: Arch-OS bouncing ball visualisation

For my visualisation, I have decided to do a bouncing ball, which is influenced by the values of the first digit of the data captured from Arch-OS's Atrium A Heat Flow sensor in the Portland Square Building of the University. Because I wanted the illustration to represent the flow of the heat (hence the name of the sensor that I chose to use in my visualisation), I looked into pre-existing examples of data visualisations (http://vimeo.com/15088939) before deciding to go down the simpler route for my visualisation.

The data is first taken from the RSS feed using XMLElement in Processing, then the value of the data is taken from the 'description' child of the RSS using "value = xml.getChildren("channel/item/description");". The term 'child' in this context refers to a subsection within a 'parent', which in turn refers to the root of the RSS. The colour also varies according to the values of the RSS data, which varies between darker shades of red and grey depending on how high or how low either values are in each of the RGB attributes of the circle colour property.

The values are then parsed as floating-point integers, which is then used to create values which will be used for the random positioning and the colour properties by getting the content from value and then using charAt to obtain the indexes of the digits:

    float v = int(value[i].getContent().charAt(1));
    float v2 = int(value[i].getContent().charAt(2));
    float v3 = int(value[i].getContent().charAt(3));
    float v4 = int(value[i].getContent().charAt(4));

Then, the values are added to the attributes:

   fill(v,v2,v3);

   ellipse(ceil(random(0,v)) * 8, height/2 + 20, 50,50);

Note that the ellipse uses 'ceil' to round up a random number and the number obtained from the first index of the value (v) to the nearest whole integer, then it is multiplied by 8 to create the X value, and then the Y value is created by dividing the height by 2 and adding that by 20. The result, depending on the RSS value on a given day, is a ball that bounces left and right in rapid motions.

This is the entire source code of the project:


import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] value;

void setup(){
  size(600,100);
  background(0);
  smooth();
  String url = "http://x2.i-dat.org/archos/archive.rss?source=.AtriumA_heating_flow";
  XMLElement xml = new XMLElement(this, url);
  title = xml.getChildren("channel/item/title");
  pubDate = xml.getChildren("channel/item/pubDate");
  value = xml.getChildren("channel/item/description");

}

void draw(){
  background(255);
  for(int i=1; i<value.length; i++){
    float v = int(value[i].getContent().charAt(1));
    float v2 = int(value[i].getContent().charAt(2));
    float v3 = int(value[i].getContent().charAt(3));
    float v4 = int(value[i].getContent().charAt(4));
    fill(v,v2,v3);
   ellipse(ceil(random(0,v)) * 8, height/2 + 20, 50,50);
 }
}

IDAT 102: The completed result of Flennis!

After days of trying to weave my way through thousands and thousands of code, and then trying other solutions (in terms of pre-existing examples that are similar to what I'm already doing) online, I've then found an excellent solution that worked better than mine. It turned out that the game needed a bit more of a 'hands-on' approach, and the keyboard input didn't work out good for the game, so instead, I've changed to a mouse-based input that works by moving the mouse up and down on the tennis court to move the racket to hit the ball to the opponent. I've also made a few changes to the original design, which mostly involved moving the game's logo to the bottom left of the screen, rather than in the middle, to accommodate the 'Round's up' text, which occurs after either the player or the opponent reaches a score of 5. I've also included a clock at the bottom right-hand side of the court, which uses the system's time as external influence.

Also, the colour of the court has been changed to a warmer shade of green to match the astroturf/grass colour that most tennis courts have, and proper court markings have been added, in addition to a backdrop for the scoreboard to increase legibility of the numbers. I've also decided to ditch the graphical movie clips in favour of ActionScript-generated shapes because I wanted the game to be more lightweight, whilst at the same time maintaining the replay value of the original. As for the rest of the detail, I've done improvements to the game's source code to make it more challenging (smaller ball with a higher score limit, but at a slower FPS than the original to avoid it becoming a 'speed run', where the game is finished quickly without even realising the outcome).

In conclusion, the game came out as a result that I've expected from the start, but at the same time, it improved on what my original specification included.

You can play the game here: www.elnormo91.co.uk/Flennis.html

INSTRUCTIONS ON HOW TO PLAY: To move the paddle, move the mouse up or down. Try and get the ball behind the opponent to score.

Enjoy!

IDAT 102: Flennis concept drawing

Here's a drawing of my Flash game project so far:

As I've discovered that the collision test points would not be realistic on the handles of the tennis rackets, I decided to remove them, leaving only the upper part of the racket, which is the most obvious point of contact that rackets have when the ball strikes it. However, I don't think that the user would notice as the game is still as addictive as the Pong game was, and still is, in the domain of basic online games worldwide. The custom logo I designed for the game is just a backdrop of the court's astroturf surface, and therefore, does not affect the ball.

IDAT 102: It's pong! No it isn't! It's tennis! No it isn't! It's Flash tennis! Oh yes, in fact, it's Flennis!

As part of an assignment for IDAT102, I decided to go old school with a game that takes the classic side-scrolling table-tennis-based game to another level. As far as I know, I haven't seen any examples of existing Pong games that are themed around actual tennis. Yes, that's right, I've decided to create a game called 'Flennis', which is basically Flash tennis, but maintaining the simplicity and addiction of the classic game that used to grace arcades and homes back in the days before we had PlayStations, Xbox 360s, Nintendo Wiis and the like, but in the time of Atari, its originator, of course. The game uses keyboard control to move the bat up and down to deflect the ball towards the opponent by using collision detection to then make the 'bounce' effect. When the ball hits either the enemy's end or the player's end, the collision detection then registers a score for the enemy and the player, respectively.

At the same time, I'll be combining the look-and-feel of an actual tennis court with the retro look to fit in with the Atari heritage of the game's basis, but also making the game unique in style, and friendly to browser gamers, who like to play games inside their browser because of the convenience that web browsers offer, and the fact that in a work environment, during one's well-earned break, restrictions mean that everything may be restricted to a web browser, provided that Flash and JavaScript are turned on.

Back to work: things to come

It's been quite a while since I've done an update, but rest assured, I had been busy working on the essay for IDAT108 and the phonics game for SOFT131 (both of which are now complete and are being submitted as of the date of publishing), in addition to starting off the IDAT107 animatic. Christmas has been very good, and although I do miss those homemade chili con carnes and quality Indian takeaways (although I'm pretty sure that somewhere in Plymouth could fill in the gap), I'm glad to be back to uni for many things which will be interesting, and talking of which, there are a lot of things to come, including, but not limited to:

• Bumper video for IDAT107 after the animatic
• Life-sized board game project for IDAT106, crossover with Year 2s
• Beginning work on 3D
• Practicals in IDAT108
• Custom Flash game for IDAT102 (the racing game was just a taster)
• ...and much more

Also, I will start sailing soon, every Wednesday (since there is now a huge gap between SOFT131 on Tuesdays and IDAT107 on Thursdays) and some Saturdays. Looks like 2011 is set to be very eventful and interesting at the same time.

IDAT 102: Flash, boxes and things to come

Re-igniting old flames from the times that I've experimented with Flash back at college, we flock to Flash for the next assignment that will be coming up soon: developing a game.

In the meantime, we had a bit of a refresher. We made a box that flies around the screen (the software uses 'the stage' as a metaphor) by using a path. When publishing it to HTML, we discovered that it automatically creates a line of JavaScript that is extensive (not to mention confusing, unless you're fluent in it!) in the code, below the piece of code that references the source file in the same directory. We'll also be soon covering ActionScript 3.0 (I can hear more movie industry metaphors, best boy grip anyone?) during the course of the coming weeks.

IDAT 102: It's here! The completed result

The specifications of the website consist of a conventional layout with a navigation menu to the left-hand side of the page and the content in the main body of the website, with a header consisting of the title and a footer consisting of validation information and links to my Twitter, Facebook and my blog here. The layout is defined by using Cascading Style Sheets (CSS), which is referenced externally in the HTML code, but stored locally in the folder and on the server the website is hosted at. The website is constructed using XHTML 1.0 Transitional and CSS2. The colour scheme, which matches my personality of minimalism and Apple, will result in less issues regarding colourblindness due to the fact that when there are less colours (especially when they clash), there are less problems, and because the text is bright on a dark background, it's easier on the eyes and because my website did not rely heavily on text-on-images (especially if it had paragraphs on it), my website will not have problems with screen readers.

After ironing out a few things (mostly regarding the validation of the email submit form on the Contact Me page), I now have a completed result of my personal website, which is at http://www.elnormo91.co.uk.

IDAT 102: Almost there!

Progress is smooth on my website (which will be at elnormo91.co.uk) and the end is in sight, ready for more on Facebook API stuff and other projects that are upcoming

IDAT 101, IDAT 102, IDAT 107, IDAT 108, SOFT 131, IDAT 106 and sailing

Last week, we was busy at work on many things ready for more stuff to come: IDAT 102 saw us looking more into CSS, IDAT 101 saw us starting to think about public spaces (our group's example was again the nightclub scenario), IDAT 108's lecture turned into a quiz about computer history and the seminar saw another debate; this time it was about our favourite social network, Facebook (all of us, like myself, were pretty much pro, so an anti-argument was very difficult), whilst IDAT 106 was different in the other weeks that the Y2s weren't there, so instead we looked more into the use of Processing and a prosumer HDV camera until the fire alarm saw us evacuating the Babbage building (our domain for most of the time) and disrupting the session for more than 20 minutes, until we finally returned. IDAT 107 was cancelled last week, but we will be doing more with Adobe Illustrator in the coming weeks until we move onto the next bit. SOFT 131's tutorial started last week to a hot room in the Smeaton Building when we then started to explore the world of NetBeans and PHP on Windows Server 2003 workstations, courtesy of Lord Sugar's Viglen (like most of the Windows PCs in the University are). This weekend, I went sailing in Roadford Lake with the Sailing and Powerboat Club (Sailpower) and it was such a good experience, until the tent got damp! That's all folks, more will be coming soon!

IDAT 102: By no surprise, Apple is my favourite website

After a quiet weekend relaxing, I have thought of a favourite website, and by no surprise, it is Apple.com.