Ones and Zeros

Brits love to talk about the weather, so what better thing to write about for my first blog-post in many moons, than you guessed it - a big fat Arctic vortex that has landed over the USA.

The above is an annotated snapshot I created of an interactive visualisation created by Cameron Beccario - inspired by a hint.fm wind-map, and based on his previous work in visualising a wind map of Tokyo.  The visualisation employs the D3 JavaScript visualisation library, and runs out-of-the-box on modern browsers - a triumph among the reams of applications that require the client to install special software that is clunky and annoying for the average user.

The snapshot focuses on the current polar vortex 'drop' that is hanging over the USA, created by a rare event last seen in the Winter 1985 Arctic Outbreak, whereby the polar jet stream that is of an elongated shape and usually centered over Baffin Island in Canada (with the other end centered in NorthEast Siberia), extends further South, bringing Arctic weather conditions that would usually be seen over Northern Canada and Greenland downwards over North/East USA.

People might wonder what exactly a jet stream is, and I'm certainly no meteorology expert, but by thinking of the Earth and its atmosphere contained in a rotating slightly-stretched globe, with the space between the land and the container being filled with a fluid, one can picture a pretty messy situation, with fluid being pushed around by mountains, forming regular currants within the globe.  Its actual wind-dynamics are similar to fluids - in fact, the actual mathematical dynamics of a jet-stream are calculated with a component being fluid shear-stress, with Rossby waves and the movements of the jet-stream it creates accounting for the weather we experience - shaping the direction of the wind into spiraling structures also known as cyclones and anti-cyclones.

Sometimes Maths Can Be Beautiful

I've always been interested in the visual aspect of mathematics.  Beyond simply drawing something out on a graph, I'm talking on a much larger scale.  The idea of fractals.  

Patterns, where their detail changes according to the scale that they are measured at.

Fractals appear in a variety of places: they can be found in nature - vegetables for example the Romanesco brocolli (pictured above courtesy of Jon Sullivan) resembles a repeating spiral pattern that is totally symmetrical and repeating.  Also in nature - the typical lightning pattern or 'Lichtenberg figure', forking indefinitely - this can be seen in the two examples pictured above (courtesy of Bert Hickman), one where an electrical discharge is being directed through clear acrylic, and the other showing what is left over after the discharge has passed through the material.

In terms of computers, complicated mathematical formulae can create fractal images - stunning patterns akin to something that could of been drawn by a famous contemporary artist.

The following website created by Jock Cooper hosts a large array of intricate fractal patterns that have all been produced through this idea.  Some are zoomable - showing how the pattern repeats infinitely the more you zoom in on the pattern.

http://www.fractal-recursions.com

I have selected a few examples (all courtesy of Jock Cooper's huge repository of pictures) of what I personally think are the finest examples of what can be achieved by the process of computing fractals. 

Today marks a turning point in the very special long-term relationship between medicine and computers.  Yet on the flip-side a potential breakthrough in Alzheimers research.

The unprecedented relationship between medicine and computing through the Folding@Home project (and of course the other @Home projects) over the past 12 years has been phenomenally exciting to watch.  The Folding@Home project, for people who haven't heard of it before, is a 'distributed computing' or 'cloud computing' method for utilising the vast amounts of untapped processing power that lays dormant in peoples computers and games consoles all around the world.  

The Pande laboratory at Stanford University are the creators and developers of the Folding@Home project, which was first released back in October 2000 (meaning it's over 12 years old).  It utilises the unused processing power of a computer system and dynamically borrows this power while the user does not require it, to simulate the folding of proteins.

The project had moderate success up until Sony decided to implement the project into its own Playstation 3 console, which sky-rocketed the project into unimaginable heights and success.  Pande said the introduction of the Playstation 3 and its multi-core processing capabilities were a "turning-point" for the project - offering massive inceases in processing power.  

At the height of the project it was computing over 9000 TeraFLOPS of data (please excuse the meme).  That's 9 with 15 zeros after it, floating-point operations per second.  

Wikipedia user "Jesse V" created the below graph from a dataset of the processing power that the Folding@Home project had accumulated from 2005 to the present day:

It can be visibly seen that as soon as the project was launched on Playstation 3, the idle-time workload that the system computed directly correlates to a major increase in project productivity.

The exciting thing here is from the period from early 2007 - mid-2011, the Folding@Home project as a whole totally outstripped the processing power (measured in TeraFLOPS) of all bleeding-edge Supercomputers at the time.  It's only until recently that Supercomputers have taken the lead back from the project.

The news today from Sony (source: http://blog.eu.playstation.com/2012/10/22/ps3-system-software-update-v4-30-view-ps-vita-trophies-on-your-ps3/ via Kotaku) that support for the Folding@Home project will be withdrawn by the beginning of November as part of tomorrow's firmware update, could be taken in two ways.  It is most certainly the end of an era.  But on the other hand might not necessarily a bad thing.  Reading Sony's blog post: 

>

Vijay Pande, Folding@home research lead at Stanford University, had this to say about your contributions: “The PS3 system was a game changer for Folding@home, as it opened the door for new methods and new processors, eventually also leading to the use of GPUs.

“We have had numerous successes in recent years. Specifically, in a paper just published in the Journal of Medicinal Chemistry, we report on tests of predictions from earlier Folding@home simulations, and how these predictions have led to a new strategy to fight Alzheimer’s disease.

“The next steps, now underway at Stanford, are to take this lead compound and help push it towards a viable drug. It’s too early to report on our preliminary results there, but I’m very excited that the directions set out in this paper do appear to be bearing fruit in terms of a viable drug (not just a drug candidate).”

>

I can only assume, based on the positive language that is used here hints at something beyond simply dropping support.  Read into that what you will.  Looking at it from the surface however, I personally can't understand why such a major player in the project would simply drop support without any proper justification - Sony aren't due to announce their next console for some time yet, and although fluctuating, support is still strong from PS3 users.  I can only think that some form of breakthrough or game-changing outcome has been produced from the project recently, and support of Playstation 3 horsepower isn't required any longer.  The last paragraph definitely hints at the development of some kind of viable Alzheimer's drug being within reach.  Although of course, it remains to be seen what will actually come of this.

As an interesting side-note, the graph also shows the varying Playstation 3 usage over the years - assuming the majority of the processing power is in fact still coming from Playstation 3 consoles.  What factors are involved in this usage is debatable (admission onto the project has always been optional, but factors such as advertising Playstation Home, and even game releases will probably contribute to the fluctuations in the graph) - the general trend being heightened use towards the end of the year and diminishing use towards Summer.  It also seems to show a high point in users in early 2009 to 2011 and from the a general trend downwards (the two latest dips bottomed out progressively lower).  I'm not going to try and make any assumptions from this data, but it is a least interesting to note.  

There are no arguments when it comes to the best way to lay out a website.  The endless scalability of a fluid design means that legacy users with lower than usual resolutions and even tablet users and mobile users can see the same website that fits neatly to their screen.  

The following link shows how the screen resolution of users viewing the W3Schools website over 10 years has changed

http://www.w3schools.com/browsers/browsers_display.asp

Of course, that is a specialised website that may not represent the generic Internet user, and in my own experience being a student seeing people with less than desirable low-resolution laptops and even my own University having the majority of its thousands of computers having low-resolution displays, the 85% statistic for displays over 1024 horizontal pixels could be seen to be not all that representative   Nevertheless for the purpose of wide-ranging usability, scalability and futureproofing my blog I thought it best to optimise my blog to be viewable on more or less any resolution.

This (as if everything) was not going to be as simple as I thought, however.

I got my head around using the CSS element 'max-width', changing the previous implementation of a 1200px (horizontal) wrapper to an automatic selection using 'max-width: none;', i.e. it is infinitely maximum as wide as your screen will go!  Excellent.

Then I simply removed the rest of the set widths and applied only a 250px margin to the right-hand side (which actually only worked out at 233px to allow for the scroll-bar); added some padding here and there and hey presto we have a fluid design!

I tested the new design on a 1024px resolution and to my dismay it didn't work!  Quickly realising that the video elements I have in some of my posts also had fixed widths instead of going back and manually changing them all I tried to find a way to automatically change them as the resolution changes - a fluid video.

http://css-tricks.com/fluid-width-youtube-videos/

I found the above page, which had a CSS solution (fantastic!), it is incredibly clever - using the relative/absolute trick I even wrote about a few months back, it uses a small amount of set padding on top and a fixed percentage (56.25% for widescreen (16:9) ratio videos) of padding on the bottom to create a little 'bubble' element, which the video element (iframe element) that is absolutely positioned (inside) of the bubble element, so the video sort of sticks to the bubble and is automatically adapted to fit inside whatever the bubble is sitting in.

That's fantastic; if you're using your own layout engine  But unfortunately I couldn't make it work on Tumblr, as it uses its own methods of setting out and naming objects, and after some effort it still didn't work.  So I opted to use the jQuery method.

jQuery is of course a JavaScript library that introduces lots more powerful things into the language, and again I found a neat little workaround for using this on Tumblr.  Google's cloud API hosting.  

https://developers.google.com/speed/libraries/devguide#jquery

I tweaked the jQuery code to try every single possible 'parent' element that would contain the video, but to no avail.  

I am stumped, I am now stuck with a website that is beautifully fluid, but has ugly tiny little videos that cater for legacy low-resolution displays, which ruin the rest of the design!

Indie pop band 'The XX' recently did a pretty neat little computer graphics inspired web-launch for their new album 'Coexist'.

One single fan was chosen, and sent a link containing the entire album preview (which can be seen at this link: http://coexist.thexx.info/).  This person was told to share the link to as many people as they wanted, in an experiment that would map the geography of where the link was sent.  Subsequently over the course of a week this was mapped onto the globe using pure HTML5 and the mark-up languages' powerful 'canvas' element.  The course of the sharing can now be viewed via a slider on the website.

The widget was programmed by Microsoft, and in an interview with the developers (source: http://www.ubelly.com/2012/10/under-the-hood-of-the-xx-coexist-album-sharing-visualization/) they said how they were inspired by (among many other applications), the mapping of flight paths in the USA by Aaron Koblin (see link below and secondary images), which provides some extremely detailed, and ubdoubtably pretty graphics, detailed enough to see each individual flight via the websites zoomable map.

It's been quite a while since my last blog post, spare time has been a precious and limited resource as of late, but now I'm settled back into my second year of University, I feel like my creative juices are flowing again and I am finding quite a few interesting things to post on here again.  I also hadn't forgotten about this beloved blog of mine, and I've made a few tweaks over the Summer and got a whole host of bookmarked pages that I'm queuing up to write about in a timely manner.

So without further adieu; something again related to computer graphics and the ever increasing power and sheer ferocity of modern computers, something quite fantastic - a real time simulation of a galaxy, and the collision (interaction) of two galaxies, using Nvidea's new (2012 released, 28nm process) Kepler architecture.  The interesting thing here is the fact that the video seems to be in real-time.

The above video shows some incredible ray-tracing effects running in real-time on the newest computer hardware.  I've been interested in ray-tracing or a while now, as it is by far the most capable technique to create realistic objects using light 'rays'.

I've been wanting to write a post on this technique for a while now, so I might as well go all out and post this incredible picture of some ray-tracing I found a while ago and often show people to show the technique off.

Having followed the development of Valve's efforts to port its software to Linux for quite a long time now (since I became interested in Linux) - todays (freshly announced) news of a successful port of all the major features of the Steam client, and a working version of Left For Dead 2 ready for beta testing is very welcome.  The official Value Linux blog has just inaugurated the project that has been rumoured for such a long time, with the aptly named first blog post 'Steam'd Penguins' being a worthy and information filled post that makes the project sound like it has a bright future.

The project does seem to be just a 'vanity' project for Valve however.  The company clearly doing very well financially and having spare time and resources to develop such a big project as porting the Steam client and library to a totally different Operating system, which is a huge task in itself to be done successfully - especially with all the driver optimisation problems and general slower unoptimised workings of hardware on the Linux operating system, it is going to be a huge challenge for Valve to get big GPU intensive games like Left For Dead 2 working on the OS.  

I can see great rewards for Linux distributions (or at least Ubuntu for now, which already has got at least a small gaming community) having Valve's resources; the company already having ties with major game publishers, and its own links with graphics card makers providing driver updates through the Steam client, this can only be a good thing.  Providing Valve class the driver update feature of the Steam client to be a "major feature", I am assuming (hoping) that this is the case, then this means that there should be a renewed interest in providing updated and optimised drivers for Linux distributions, so I no longer have to use Windows for any graphically intense (or even moderate) applications, that are not usable at the moment - streaming TV for example is out of the question, with obstructive lag for basic Youtube videos for example, let alone trying to play a game!

I've known for quite a while now that every browser has its own preset CSS rules that it applies to any page that is loaded into its browser.  

This - among other things - is what causes web pages to display non-uniformly within different browsers, because this file not uniform for every browser.  

I've never actually known where to find the actual file that these default style-sheets appear from however.  Until I came across this interesting page that has compiled all the default stylesheet for all the main browsers.  Chrome's link doesn't seem to be working unfortunately (it's my favourite browser as well, so I am going to have to hunt this file down).

http://meiert.com/en/blog/20070922/user-agent-style-sheets/

This is relevant to me because when arranging my colour blocks for my University coursework - I found that in Firefox the boxes didn't align properly, compared to all the other browsers.  I found the answer to this problem after quite a lot of searching, and found that it was because Firefox automatically adds 2px padding around content within an <img> tag.

Any browser will implement every single one of the rules within its default stylesheet, unless the user writes their own CSS rules to overwrite it.  

Default stylesheets seem to be a necessary evil, because not everyone is competent in CSS and won't make correct rules for their websites. But in the case of Firefox I think they should not add automatic padding around images.  This is obviously not the only issue, but it's the one I've found so far that broke my website on Firefox and caused me grief.

I think that browser default stylesheets should be as least intrusive as possible to people who are competent in writing CSS, and should be more uniform and maybe even standardised by the W3C, so websites are rendered the same.  It would make life a lot easier for developers!  

It's been a while since my last post.  I've had trouble with my eyes, but I'm back in the game now, and while these posts will be scaled down significantly while I'm concentrating on other non-Web-related things for the duration of my University exams I'm sure there will be many times when I will feel the need to write a post on here upon finding interesting web-sites or other such things.

I recently came across what I would dub a "holy grail" of an explanation of website layout:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

This has consolidated my understanding of the positioning elements within CSS - 'static, relative, fixed, and absolute'

Static is where the elements position is fixed to the place it would usually appear within 'normal' page layout.

Relative is where upon adding 'top, left; right, bottom' elements, the position is set relative to where the element would appear within 'normal' page layout.

The two more tricky positioning elements that I've only just understood fully...

Fixed positioning is where an element will be placed somewhere within the browser window upon adding 'top, left; bottom, right' positions, relative to the window where the web page is produced. I.e this would be natively be relative to the <body> element, as everything that is displayed in a website is inside the <body> element.

Here's the interesting bit though, which has radically expanded the possibilities of positioning, and given me an idea of how to align the colour boxes from the University coursework, which I will have to try again when I have more time...

Absolute positioning positions an element relative to the parent element of the element that contains it!  By affixing the parent element with a 'position: relative' value and no further positioning values - any child elements within that element that are given an 'absolute' position with subsequent positioning values will be aligned relative to that parent element!  Obviously the parent element would be the <body> if no other was specified as being the 'relative' parent.

This is fantastic, because it means I could do something like make a div for my entire set of colour blocks; set its position to 'relative', and give all the individual colour blocks within that div an absolute position, and hey presto everything should work.  This would eliminate all the issues with floating the images and having to deal with all the computed style/padding/margin that go around all the elements before and after the colour blocks, which was causing me all the problems.

-------------------------------

Two fascinating websites I've also come across, that I'm sure will be invaluable now I have a decent knowledge of HTML and CSS:

This fabulous little website provides an interactive CSS playground, where things can be seen working as they are written on the screen.  This is absolutely fantastic and it will no longer mean trawling through lots of code on my text-editor and refreshing a page that is bunched in between a load of tabs on my browser!  This is something I've always wanted to find, and I assumed something that would be integrated as part of a proper web development package (which I do not use).  This certainly looks like the bridge that will go over the gap between using a text-editor and into full-blown website design.

http://dabblet.com/

Another brilliant website that will no doubt save me hours and hours of time-consuming, and I'd self-proclaim as petty tasks for trying to work CSS problems out myself, this website will no doubt have a lot of things on it that will shed new light on problems that I've come to a standstill with - and show me better and shorter ways of doing the same thing that I've already done, but implemented better.  Like my University coursework placing images in a tile pattern down the page took days and days of work, using floats and then finding new CSS3 rules for positioning them directly as a table-esque design.  

http://css-tricks.com/

---------------------------------

I've found this with anything I start to learn of become interested in.  There is always a very steep learning curve as one understands the very basics ground-up of an industry/technology/discipline, and once those basics have a good grounding all sorts of other brilliant resources come out of the woodwork as these ones linked above.  

It proves to me time and time again how brilliant the Internet is, and what an never-ending source of knowledge it is - if you know where to look and put the time into finding good learning resources, vastly more resources and points-of-interest come flooding out.

While searching for inspiration for a better layout for my blog I came across many lists of innovative websites by a great many people - but the following website really caught my eye above all others.  The author has created a website that is awe-inspiring as to what can be done with scripting and HTML/CSS, and for me it shows just how daunting the Web Design world is, and how much I still have to learn to even get to a stage where I could create something so beautiful.  This is how all websites should aspire to be like (innovation-wise... I doubt a blog or other functional website could work with the exact same design as this).

http://davegamache.com/

I love the way the font fades out as the screen is scrolled, and the author of the website writes a brief philosophy on what he believes "Happiness" to be.  A bit too arty-farty for my liking, but still the web-design is simply beautiful!

---

Other news I have updated the font for my website yet again, to make it more readable.  A font that has a permanent 'bold' weight was never going to be attractive or be easy on the eyes.  

I went for a Helvetica lookalike.  A free one of course (I'm not prepared to pay £20 per font-weight for Helvetica Neue or any of its derivatives at this point in my career!  As lovely as it looks).  I found a font on Google Web-fonts (with an Open Font license so I can use it freely on here) called Lato.  

http://www.google.com/webfonts/specimen/Lato

I liked this font because it seems to be somewhere in the middle between Helvetica and Arial, but has slightly more rounded edges to the ends of some of the letters.  The best way to describe it would be a steep trapezium shape compared to the blunt square edge to Arial and Helvetica.  I analyzed the font by zooming the page in about 500% - it's amazing how well a computer can scale fonts on screen, with no aliasing in sight.  The letter spacing also is perfect without me having to alter it.  

I went for a font-weight just below 'normal 400' - I went for '300' or 'Book' as it is described, which is thinner and I think a lot easier to read on a very wide range of font-sizes.  Even tiny letters are visible quite easily.

I've updated the layout pretty drastically again.  It's been minimalised with a lot of design stuff taken out.  I like minimal.  It has still got a long long way to go however.

Following on from the post below (that is still relevant in many respects), I've done a lot of digging and found CSS3 actually has an inbuilt font function for automatically downloading and displaying a web-hosted font directly onto the end-user's computer - without them even knowing about it or having the option to use the font or not.  This is fantastic news, and ironically it has been implemented into Internet Explorer since IE5...  Microsoft have always had more emphasis on the pretty things and pointless things - animated cursors is something else I've noticed only IE have working on their browser.  The reasoning behind that is something I'm not going to even begin looking at, as there probably is no real reason for it.

Anyway - the CSS @font-face is a CSS 'rule', and you simply add it to any style sheet along with the URL of the acompanying font file (this blog explains what browsers are compatible with each type of file extention) - typically .ttf (TrueType Font) being compatible with Chrome, Firefox, Safari, Opera; but not Internet Explorer (surprise surprise..), IE going with .eot (Embedded OpenType Font).  So by linking the @font-face to both a .ttf and .eot font-file, you've got most browsers nicely covered.  I'm not sure if it's required or not, but it seems good practise to also use a format('') after the url('') to define the type of file in use (much like text/css or whatever other meta-data is used in <link> tags).

I'm not going to lie - I'm only right at the very beginning of understanding fonts and how they are implemented on computers, but below is what I have come across so far - so without further adieu.

The standard library of fonts pre-installed into browsers is nothing more than a slap in the face for the world of Typography, and Web-designers alike.  It is neglected and bare.  

Through my University course we learnt about Google Web-fonts.  With fonts stored on an external server, they can easily be implemented by simply linking to the stylesheet on Google's servers just as you would your own stylesheet, using the <link> tag.  Google does all the work. Although the downside to Web-fonts, is of course it takes precious lag-time for the end-user to have to connect to Google servers to implement the font every time the website is loaded, which may be undesirable for users with slower connections of low bandwidth limits.

What's more - the library of fonts that Google host seems to be constantly growing, which is definitely a positive thing for the future.

http://www.google.com/webfonts

Of course, Google is not the only company to offer such a service.

Then I found another handy website, with a much wider range of fonts, and a more commercial side, if you want to spend a bit of money on some nice fonts.

They even allow for writing CSS and selectors directly on their website, and output the font by linking through Javascript.  Though, this adds an annoying watermark at the bottom of your website, that cannot be removed as far as I can see (I've tried), and it takes quite a while to update the CSS and HTML on Tumblr, as the change has to be updated on the fonts.com website as well, so there is a delay that outputs a broken blog while it is being updated.  So this option is not totally desired, but it has served me well since I started up my blog.

http://webfonts.fonts.com/

Today I found another website that inspired this blog post.  Inspired by the font I saw used on this website I found the font was called "Folk", and via this Free Typography website I found the MyFonts website, which again has another range of fonts, with a selection of free ones as well. This time however, it allows you to directly download the fonts and host them on your own website.  So I'm going to fiddle around with the feature on Tumblr that allows you to upload certain files (strictly only for use in custom Themes) and see if I can get this font working on this blog - I think I've falled in love with "Folk".  

I've discovered that the majority of what I post or write about uses a lot of visual aids (pardon the pun), as with my University Coursework having a lot of images all over the place and not much writing.  All my designs seem to be very image orientated, so in the end I aim to design this blog so images are the most prominent objects, and size does not matter (again... pardon the pun).  Something akin to what I have seen on a few other blogs, with a verical flowing design.  

One of my favourite website designs, which uses this kind of idea is the record label "Numbers'" website http://nmbrs.net/, which has a flowing, colourful design flowing down the page.  This does not however solve the problem of resizing images - as all the images on the Numbers website are at one fixed width, which makes sense really.  

The age old problem of having an image that needs to fit into a space on your website, but you don't want to have the image skewed or deformed by resizing it - i.e. you want to keep the same aspect ratio of the image?  I found this very simple app that allows you to input the original resolution of then image, and then set the output to whatever you want, with the corresponding dimension changing automatically, and keeping the aspect ratio the same.

A pretty nice/simple little workaround for a problem that should not exist on a site like Tumblr:

http://andrew.hedges.name/experiments/aspect_ratio/

Confession of a lifetime - I love Japan and its extraordinary culture - especially when I find beautiful arty creations such as these colourful bento boxes with coloured rice and quirky designs.