Revenge of C.H.A.D.

Cover Art: 8bit Hoodie ninja confronting C.H.A.D. with 8-bit volcano erupting on the distant horizon

I celebrated the end of my eduvacation by publishing a piece of music. It’s titled Revenge of C.H.A.D., a reference to Super Meat Boy—a diabolically difficult but fun modern-retro platformer. The piece was also inspired by vintage games I enjoyed playing when I was younger (I hear echos of Mario in there, Tetris perhaps?).

This creation helped me practice techniques I’ve been learning and get to know Ableton (I bit the bullet and bought Live 9 Suite). It also let me indulge a hidden passion, I’m secretly a drum and bass (and even Wubstep) fan, please don’t tell anyone. I’ve always been obsessed with rhythm and as an ex-Tuba player, drum and bass is the perfect combination! 😉

Dubstep’s use of timbral variation to create rhythm I find compelling. Traditionally almost all rhythm is created using discrete articulations (i.e. separate notes), in Dubstep rhythm is just as likely to be the result of a series of throbs or wubs without starting a new note. I’m sure there have been pockets of use before—indigenous Australians playing didgeridoo mastered the concept thousands of years ago—however DubStep has taken the idea well beyond the niches, such that it has now become a mainstream musical technique.

There’s also something really special and charming about chiptunes. The sound of the old hardware is charming, and their limitations meant that retro game music composers were forced to be really creative to get the most out of devices. There are still people avidly composing chiptunes. More than a gimic, many create really interesting and exciting music.

I gave myself a deadline, just four days to produce something from scratch. The time flew by! There’s so much more work in pulling a piece together than you’d think, it catches me by surprise every time. I feel like I could have easily spent another four days just tweaking. I’ve just uploaded it, and there are already aspects about it that make me cringe. But a deadline is a deadline, I need to move on. The artist’s dilemma?

Melodically it’s deliberately trite, trying to tap into some of the inanity found in the genres for humorous effect—to be fair, I’m sure there’s inanity to be found in most genres. The challenge was then to try to generate interest from the combination of the melodies and genres. There are a lot of ideas in the mix, too many probably for such a short piece, I’ll remember that for next time.

At any rate, I had a lot of fun creating it, I hope you enjoy listening to it.

Posted in

WIP—Ebb

An early work in progress, just playing with some new techniques I’m learning, synthesis, spatial effects and automation mostly. It uses the Cthulu arpeggiator and Massive synth.

The inexorable descending bass reminded me so much of Koyanisqaatsi that I kept hearing bold trumpets in my head, so I added them in, for a laugh. If I ever finish this as a piece I think it will sound quite different, it won’t be so Philip Glass-like—which is kinda’ a shame, I very much like his music.

Cover art: Hoodie ninja standing on a small moon in space

While pulling the piece together I had flashbacks to the electronic music I created when I was studying music—in my youth. So the artwork is a reference to a piece I created back then. It was a (quite theatrical) electronic music performance-piece involving myself and four friends dressed in black robes with white masks. An underlying soundtrack I’d created played over a loudspeaker system, they paraded boom-boxes around the audience blasting a series of electronic sounds (somewhat randomly) while I issued seemingly cryptic symbolic instructions from the front. It was deep, I promise 😉

I might use this little guy again, it certainly ties into that vintage irama symbolism.

Posted in

Eduvacation

Still on holidays, have some time set aside for projects, which is nice.

I wanted to create some music but have been feeling frustrated by limitations of my knowledge around digital audio production. In the past I’ve muddled through and learnt bits and pieces as I’ve needed them. Unfortunately this breaks your creative flow and makes the entire process rather stilted.

I would find it hard to justify tertiary musical/creative study (again), but every now and then I get The Urge To Study (you know, that concentrated type of learning). Especially when it comes to detailed technical/hard skills—it’s been a while.

I watched a few freebie tutorials and even purchased some, but struggled with a lack of detail/passion from presenters. Earlier this week, I was lucky enough to stumble across Tom Cosm. His content, pace and humour have been working really well for me. His premium content is amazing value. Big thank you to Tom!

I’m learning a lot, it’s exciting! I love the feeling of knowledge rushing through your hair as you blast through the self-paced video tutorials in your open-topped… wait, I may have butchered a methophor in there somewhere.

All of his tutorials (and most of the others I’ve stumbled across online) are based in Ableton Live, which I don’t have. It looks like the right tool for the kinds of techniques I’d like to use. After investing in Pro Tools 10 and 11 (time and money), it seems that the universe is encouraging me to switch to Live—I should have listened to Incrementalist, he gave me that tip a long time ago.

Hmmm, I sense another musical investment in the near future.

Posted in

Custom app icons updated

Spent a little time revisiting the Custom app icons plugin for WordPress.

It was well overdue for a revisit, since initial release in 2010, Apple have released a bunch of new devices of differing display resolutions and with them a range of different dimensions of app icon to support. This plugin update allows you to specify a different sized app icon for each device.

I’ve also added the ability to specify if you’d rather Apple didn’t add the glossy effect on top of your icons (select ‘My icons are pre-composed’) in the configuration screen.

Thanks to Stephan S for saying hi and suggesting the idea!

Posted in

Pure CSS ‘tags’—ala SoundCloud

For the recent irama.org realignment I wanted to emulate the cute little ‘tags’ that sit below a track on SoundCloud.

I wanted to try to do as much as possible using CSS alone—without background images, too many extra elements, or general hackery. Ideally, the markup would be:

<a href="…">Tag text</a>

There are lots of posts around the interwebs about CSS triangles, but it’s hard to find a concise tutorial for putting an arrowhead on the end of a box. So I started by pinching borrowing a technique Ben pulled together for a site we were working on.

I noticed the negative margins were not playing nicely with iOS so I switched to relative positioning to offset the arrowhead. This also simplifies the padding/margin calculations, makings the final solution easier to tweak.

.tags a {
	float: left;
	background: #c5c5c5;
	color: #fff;
	text-decoration: none;
	margin: 0 0 10px 18px;
	padding: 2px 10px 1px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	position: relative;
	transition: all .25s linear;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
	line-height: 21px;
}

.tags a:before {
	content: "";
	border-style: solid;
	border-color: transparent #c5c5c5 transparent transparent;
	border-width: 12px 13px 12px 0;
	position: absolute;
	left: -13px;
	top: 0;
	transition: all .25s linear;
}

Hover states need to cover the anchor background and the triangular border colour…

.tags a:hover {
	background-color: #39F;
}
.tags a:hover:before {
	 border-color: transparent #39F transparent transparent;
}

For the ‘hole’ punched in the tag, I thought I’d have to rely on a background image. Ben made a good point about reusing the bullet from a list item (which worked, with some negative margin trickery).

I finally thought to check the approach that soundcloud actually take and I was pleasantly surprised… clean minimal markup and a CSS-only solution!

Why didn’t I check their implementation sooner??

In the end, I borrowed their approach for the hole…

.tags a:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 1px #737373 inset;
    content: "";
    height: 5px;
    left: -1px;
    position: absolute;
    top: 10px;
    width: 5px;
}

Which ends up looking like this…

Screenshot of two tags in situe next to a blog post

Hats off to the designers and front end devs at soundcloud, they know what they are doing!

Posted in