Giddy up
Cycling towards me in Kensington gardens this morning: a woman with a riding crop.
I wonder whether she’s realised that, no matter how hard you whip it, a bicycle will only go faster if you pedal harder!
Take Back Parliament: a demo with pie charts!
Down to Trafalgar Square this afternoon to join the demo organised by Take Back Parliament: a coalition (!) of campaigning organisations committed to pushing for electoral reform in the UK.
I parked my bike at the end of Pall Mall and headed into the square, where a fair group of people were gathered around the base of Nelson’s column waving purple flags and brandishing placards. There had been some sort of megaphone malfunction, so the organisers were doing their best to get us excited shouting over the noise of the fountains and the noise of a group of morris dancers who were vying with us for space in the square.
The megaphone fixed, Billie Bragg came to the plinth and argued against the excuse that a proportional voting system would bring in all manner of fringe parties by reminding us how conclusively the BNP have just been wiped out in Barking, just one term after entering the council. His argument, which seems to me to have much truth in it, was that once extreme groups’ views are given a public airing, and they are given a chance to prove their competence, the public will reject them, and that we have nothing to fear. It was also good to get some good liberal values (freedom of speech &c) aired at this meeting, without interruptions from no-platformers.
Ken Ritchie then addressed us, but for all his talents he doesn’t know how to handle a megaphone, and I only caught one word in seven. I saw him on the news later today, changed from his yellow anorak into a suit, and he made some good coherent points; perhaps next time we can have a better sound system!
Finally, we had a speaker who I did not recognise: a middle-aged black man who called to us “Is this the start?” — Yes! cried the crowd — ”Is this the beginning?” — Yes! — “Of our Obama moment?” — Errm…. Then when he exhorted us to celebrate the fact that more black and minority ethnic candidates had been elected this time than ever before (a women near me called out “What about more women?”), it became evident that he had rather misjudged the occasion: surely you don’t celebrate the achievements of a system you have gathered to decry!
We then had a sing-song from Bragg (I suppose this was inevitable, although his choice of an old revolutionary folk song may have gone down well with the morris dancers), after which he announced that Nick Clegg was in camera in Smith Square, and proposed we take a stroll down there to meet him.
We were a noisy but considerate caravan snaking our way down Whitehall: mauve flags waving and slogans chanted as we studiously stuck to the pavement, and everyone dropping their voices as we passed the ponies at horseguards. At Parliament Square a little rivalry became evident between us and a small group of anti-capitalists protesting against the situation in Greece, but for all their efforts our numbers were greater and they were drowned out until we passed.
And then to Smith Square, a charming, leafy location for a cheery, high-spirited protest. Journalists and onlookers crowded onto the steps of St John’s as we took up our place outside Transport House. This was the purpose of the demonstration: the confront Nick Clegg with the popular support for electoral reform, and exhort him not to compromise in his commitment to changing our political system. After some time, calls morphing from “Make votes fair” to “We want to see Nick” in patterns that were at times Ivesian in their rhythms, something began to happen at the front: several additional police officers climbed the stairs of Transport House and started the encouraging the people on the steps to move away. The cry went round: “Press move back”, as the principle occupants of these steps were camera crews; after a while the call changed to ”Just move Sky”: perhaps someone had seen Kay Burney’s reaction to us as we walked past College Green.
And finally Clegg appeared, to great cheers. He took the megaphone, which was still not loud enough, and made a short speech, interrupted at times by cheers and cries of ”Don’t sell out”, and then he went back into the building. It felt a great achievement not only to have seized such a critical moment for this demonstration, but to have come face to face with the person best placed to set the wheels of electoral reform in motion, although Clegg’s address was a typically political speech and, whilst acknowledging that we were coming from the same starting point, he did nothing to assure us that we were heading for the same goal.
But, whatever the outcome of this weekend’s negotiations, this was a great occasion: noisy, somewhat disorganised, but good natured and positive and, if not the direct catalyst for the change we so need, the beginning of a process that can take us there.
Now, go to the Take Back Parliament website and sign the petition: the work goes on!
Election sleeplessness
A couple of weeks ago, when it became clear that the election was going to become interesting, I decided to take today off in case I wanted to stay up to watch the results.
Just as well: I think I finally managed to catch about 20 minutes’ kip around 07:00, when the pace of results slowed down to a trickle, and the incessant revenance of Fiona Bruce sniggering about Nigel Farage’s aerial fiasco and looking studiously concerned about late-evening voters locked out in Sheffield and locked in in Lewisham began to wear down my resistance.
Absolute high point of the night was seeing Caroline Lucas win Brighton Pavilion, although I took a certain satisfaction in seeing that our local constituency didn’t fall to the Tories, despite my refusal to vote tactically for our lobby-fodder incumbent. (I know it was highly unlikely that mine would be the casting vote, but the thought of voting X and getting Y nags none the less.)
And now I’m sitting glued to the Grauniad waiting to hear the next nugget of news. I have a lovely bit of grouting waiting for me in the bathroom, and an idea for a clarinet sonata I really want to work on, but somehow reading about whether the SNP and Plaid Cymru are considering entering a coalition with Labour is much more pressing.
On which note, why am I wasting my time blogging when I could be reading more idle speculation? Nose back to the grindstone!
i10
The other week, during some time we had off work, Peer and I went to did a cultural expedition to the two Tates to see the Henry Moore, Chris Ofili and van Doesburg exhibitions. The last of these gave us the most inspiration: Peer was transfixed by the animated films, and I found plenty of typography and print design to keep me excited.
So here’s a quick attempt to reproduce one of the designs; it’s César Domela’s cover for the 4th edition of i10:
And here’s my attempt:
http://playground.matthewbutt.com/i10.htm
No terribly exciting techniques in this one: just web fonts and some use of nth-child.
Acknowledgments
Books
- Fabre, Gladis and Wintgens Hötte, Doris eds (2009). Constructing a New World: van Doesburg & the international avant-garde. London, Tate Publishing. ISBN-13 978-1-85437-872-9
Fonts
Constructivism Part III
Today’s study is the cover of Generation X’s 1977 single, Your Generation:
Here is my version:
http://20100217.playground.local/generation.htm
Please forgive any inconsistencies in the font rendering: I couldn’t find an open-licensed font with quite the right geometry, so I fell back on Helvetica, which may render unpredictably on different platforms.
This composition uses a handful of blocks with multiple backgrounds:
- The upper part of the image, which looks a little like the Polydor logo, is a pseudo-element with four backgrounds, from top to bottom:
- The small red circle
- A white masking area, which covers the lower halves of:
- The large black circle
- The red block on the side.
- The title strip is actually an
h1(‘Generation’) with aspaninside (‘X’). The stripes are hand-coded linear gradients, and the cross-hatching in the small square is two repeating gradient stripes laid on top of each other. - The red triangle is another pseudo-element, with a single, angled gradient background.
The key lesson from this exercise was how tricky it can be to get webkit gradients right. The -webkit-gradient syntax is much less intuitive than the -moz-xxx-gradient syntaxes, and the repeated gradient declaration is also something of a fiddle. As to angling the red triangle, I couldn’t be bothered with more trig, so I just used trial and error.
Acknowledgments
Books
- Walsh, Gavin (2006). Punk on 45: revolutions on vinyl 1976–79. London, Plexus. ISBN-13 978-0-85965-370-1
CSS Seesaw
It’s Friday night, so not a big one tonight.
I thought I would have a quick play with CSS transitions, and nothing seemed a better demonstration than a seesaw.
Here it is (warning: this only works in Webkit browsers at the time of writing):
http://playground.matthewbutt.com/seesaw.htm
This little animation uses two transitions: one to tip the seesaw back and forth, and the other to roll the ball from one end to the other. There were only two slightly complex matters here: I needed to brush up on my A-level trig to get all the distances right, and a little sleight of hand was in order to create the triangular pivot (fire up Firebug if you want to see how I did it).
There are a few small bugs: poor aliasing, and a ghost top border on the seesaw element, but they can wait for another day.
And now, goodnight!
Constructivism Part II
Following on from yesterday’s work, another experiment today, and this time I chose a real piece of constructivist design to copy:
The simple lines of this image make it fairly straightforward to lay out in HTML and CSS:
http://playground.matthewbutt.com/why.htm
Here’s how I did it:
My h1 contains the text ‘WHY?’. The h1 is a 200px square absolutely positioned on the page.
To create the semi-circle, I’ve given this element two background gradients: the first uses a linear gradient to draw two blocks of colour on the page: the upper block is solid parchment colour, whilst the lower block is transparent.
In Mozilla this is marked up like this:
-moz-linear-gradient(top, #F1ECD9 100px, rgba(241, 236, 217, 0) 100px)
In Webkit is takes this form:
-webkit-gradient(linear, 0 100, 0 200, from(#F1ECD9), color-stop(0, rgba(241, 236, 217, 0)), to(rgba(241, 236, 217, 0)))
You’ll see that I’ve defined the transparent colour as rgba(241, 236, 217, 0) rather than simply transparent; I found that using simple transparent gave me some ghosting, which is clearly not the intention.
Underneath this gradient is a second background, which this time defines a radial gradient:
-moz-radial-gradient(100px 100px, circle cover, black 100px, #F1ECD9 100px, #F1ECD9 200px)
-webkit-gradient(radial, 100 100, 100, 100 100, 200, from(black), color-stop(0, #F1ECD9), to(#F1ECD9))
In each case, this draws a 100px-radius black circle, followed by an area of parchment colour.
The lipsum content with the inverted red semicircle is coded in a similar way, although I could do away with the linear gradient, as my p tags give me the perfect hooks for a parchment-coloured background without worrying about gradients. The text is shifted down with a simple padding-top rule, and the red line down the side is an equally straightforward border-right.
The large red square doesn’t actually exist: it’s an :after pseudo-element on the body tag, which is then sized, positioned and rotated. I had to give it content(' ') to get it to appear, but otherwise it’s pure smoke and mirrors.
Finally, the three 45° links were interesting to position:
They start off as three li elements arranged normally on the screen:
Next, I rotate the containing ul by 90° widdershins around its top right corner:
Finally, I rotate each li by 45° clockwise around what was originally its middle-right and is now its top-centre:
These are then positioned absolutely on the page.
And that’s my piece of constructivist CSS for the day.
I have one outstanding problem: the edges of my semi-circles are unpleasantly aliased. I’ve tried leaving a small gap between the colour stop points in the gradient to see if that helps, but the effect is pretty unsatisfactory. Any suggestions would be welcome!
Acknowledgments
Fonts
- Great Primer, which is one of the Fell Types digitally reproduced by Igino Marini
Sites
- Original image found at Essential Architecture
Look mum: no images!
One of the downsides of specialising is leaving behind areas of knowledge you used to love. As I have specialised in the programming side of web development, I have found myself getting further and further away from working with HTML and CSS, and letting my markup skills get rather rusty.
Of course, over the last couple of years, all sorts of exciting things have been happening with HTML and CSS, as browsers implement more features of HTML 5 and CSS 3, and the skills and techniques I used to be able to boast of are now anything but cutting edge.
So I thought I should do something about it, and there’s no better way to deal with something like this than to have a good play around. The following pages are rendered entirely using HTML and CSS; no images were harmed in the preparation of these pages.
Note: these pages render correctly in Firefox 3.6 and Safari 4.0.4. They probably don’t work in older versions and are most definitely NSFIE.
Landscape
First, then, I thought I would have a bit of a play with web fonts, gradients and transformations. Here’s the result:
http://playground.matthewbutt.com/landscape.htm
It took a little adjustment to get the rays of sunshine correctly positioned: the key was to position the transform origin at 50% of the height of the text.
Constructivism
Next I thought I would try my hand at a little faux-constructivist design. The simplicity and clear colours of constructivist design are perfect for online material, but the jaunty angles have always posed a major problem: either render the text as images, or give up. With CSS 3’s transformations, this is no longer a problem, and there’s scope for a Russian revival:
http://playground.matthewbutt.com/construction.htm
Again, getting everything to line up took a little getting used to, and it boiled down to the same issue: getting the transform origin of every element in the same place, and then rotating around that point.
A real-world example: Magazine’s Touch and Go
Ok, my constructivist sketch isn’t exactly high design, so I thought I would find something that had already been done, and have a go at copying it.
Here is the cover of Magazine’s 1977 debut single, Touch and Go:
And here is a quick HTML version:
http://playground.matthewbutt.com/magazine.htm
The only advanced technique here is the use of web fonts, although I’ve made liberal use of the :nth-child pseudo-class to apply styles to the coloured panels. I have to confess to using a few non-essential spans for this one, but I think the result is pretty pleasing for an image-free page.
And that’s my lot for today. There’s plenty more excitement in the latest implementations of HTML and CSS, so I’ll post some more experiments when I have a moment.
Acknowledgments
Fonts
- Landscape and Construction use Blackout Midnight by the League of Moveable Type
- Magazine uses Great Primer, which is one of the Fell Types digitally reproduced by Igino Marini
Books
- Walsh, Gavin (2006). Punk on 45: revolutions on vinyl 1976–79. London, Plexus. ISBN-13 978-0-85965-370-1
Two firsts
Yesterday as I left work there was still a faint suggestion of twilight in the clear evening sky and, as I cycled through the park, the gate into Kensington Gardens was open for the first time this year.
Of course, today it’s been snowing, so winter isn’t over yet; but it’s good to know that spring is creeping up on us!
Kämmer Klang, 20100202
Off last night to Dalston for Kämmer Klang at Café Oto for what seems to be a typically diverse evening of performance.
Most intriguing were Kerry Yong’s two solo performances, which were billed as part of a series entitled Cover Me Casio in which he reworks existing compositions on a Casio keyboard with the aid of various effects pedals and electronics. First of these was a movement from Madrigale by Aldo Clementi, the very point of which is the gradually retarded repetition of a handful of short, distinct melodies. Most of the time it was impossible to correlate what Kerry was doing on the keyboard with the noises coming out of the speakers, and, as he was using a delay pedal and a laptop, it is hard to know which piece of equipment was responsible for which effects. The result, however, was charming and fascinating, and I think I’m going to have to do some research on these programming techniques now.
Kerry’s second solo performance was an reworking of Messiaen’s ‘Dance of Fury for the Seven Trumpets’ from his Quartet for the End of Time.The movement is Messiaen at his most muscular, whose highly characteristic melodies use his modes of limited transposition and added-value rhythms, and are gradually metamorphosed by rhythmic distortion and octave displacement. The entire movement is played at the unison or octave, which adds to the starkness of the piece. Kerry introduced his performance by declaring that this movement was a ‘good excuse for a colour trip’, and went on to prove this assertion, using an array of effects pedals to distort l and manipulate the sound of his synthesiser to create an impressive range of timbres and textures.
In both of these pieces I enjoyed the way Kerry used equipment which is usually the preserve of rock bands, but produced new and wonderful noises which seemed entirely appropriate for the pieces he was performing.
The other excitement of the evening was the improvisation set by Roger Turner on drum set and percussion, Alan Tomlinson on trombone and Steve Beresford on electronics. Alan had warmed up earlier in the evening with a performance of a piece by Xenakis, which had already showed off the range of his instrument, and he took this even further in this set, even turning a coughing fit (he was suffering with a chest cold) into a new source of noises and expressions. Roger’s percussion was equally adventurous, and he produced some fascinating sounds by scraping and rubbing various instruments, conventional and un-, against each other. Steve’s electronics provided a fitting counterpoint to the two acoustic performers, but after Kerry’s antics I spent more time observing them than him.
Kämmer Klang has a good format: it’s a little more formal and less gregarious than Non Classical, but the salon style of the evening, with several performers each evening, combining and recombining to play pieces by different composers, gives the programming a sense of vitality and diversity, and contrasts with the more gig-like format of Non Classical. Previous editions had continued past 23:30, so I was rather glad this evening ended at 22:30 and I could catch the Overground from Dalston Kingsland back out West.
leave a comment