The 7 Best Monospace Fonts

Here is a roundup of my favourite monospace fonts.

7. Courier

For most people, this will be the first monospace font that comes to mind. Courier New. The poor, tired terminal workhorse has been flogged so long and hard to its death that its also hard to be objective about it. However, Courier earns its place in this list for being so ubiquitous. When you're stranded at some foreign PC work terminal that isn't yours but you simply have to code up something, Courier is your only friend.

6. Monaco

Monaco comes as Mac OS X's default monospace font. It's decent, but not that pretty to be honest. If I had to describe it as a shape, its like a trapezium with a heavy base and a wonky top. I think I would prefer my fonts to feel like something beautiful and symmetrical. As you can tell, the thing that launched me on this hunt for the right monospace font was also my dissatisfaction with just using the Monaco font. Its not bad though, but I don't feel all that inspired, staring at it.

5. Andale Mono

Andale is another one of those default fonts that comes with Mac OS X, but it is still not too shabby. I find it marginally nicer than Monaco, but my only gripe is that the spacing is too wide and it feels too fat and heavy as a result. Dotted zero, might be good for people who like their fonts spaced out.

4. Droid Sans

The Droid family of fonts, including the serif, was made for use on Android platform. I am a little divided on this one. I appreciate its clean appearance but it has something of that "boring" feeling when I stare at it for too long. Also, no dotted or slash zero, so you may get your O and 0s mixed up.

3. Consolas

I like Consolas. Its like a Monaco with a bit less space around it. Crossed zero, round friendly appearance, it was originally designed as a replacement for Courier New, and is one of Microsoft Vista's standard fonts. Don't think its a free font, but I've got Vista and Microsoft Office on my mac so I am thinking it came with either since I only noticed it recently.

2. Liberation Mono

Cleancut and stubby, like a homely sort of girl guides biscuit tin, somehow I like Liberation Mono because it makes me feel productive and yet it doesn't feel boring or dull. Dotted zero adds a nice touch. Liberation Mono was made to be the free, open-source replacement to Courier New with very similar metrics.

1. Inconsolata

This is my favourite font of them all. Dainty, crossed zeros, more compact than others. Makes me feel like I'm getting more done. Inconsolata is an opensource font created by Raph Levien and I find it is the most readable font of all... 100 Marks.

as3isolib, regular expressions

Today's roundup of experiments and snippets:

as3isolib

I downloaded as3isolib some time ago but never had time to play around with it. Today I went back to their site after a long while and realised that all their example swfs on their documentation site were broken. Most of the examples were originally for Flex but I sometimes like to work in Flash IDE itself so this is an example how to use it with as3iso. Credit goes to the documentation wiki as well as various commenters correcting each other on the wiki.

"As3isolib is an open-source ActionScript 3.0 Isometric Library developed to assist in creating isometrically projected content (such as games and graphics) targeted for the Flash player platform."

This is a simple example of an IsoScene with an IsoBox. It uses classFactory to create the shadow below itself, and TweenMax to handle the animation.

import as3isolib.core.ClassFactory;
import as3isolib.core.IFactory;
import as3isolib.core.IIsoDisplayObject;
import as3isolib.display.IsoView;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.renderers.DefaultShadowRenderer;
import as3isolib.display.scene.IsoGrid;
import as3isolib.display.scene.IsoScene;
import as3isolib.geom.IsoMath;
import as3isolib.geom.Pt;

import eDpLib.events.ProxyEvent;
import com.greensock.TweenMax;

var box:IIsoDisplayObject;
var scene:IsoScene;
var tm:TweenMax;

scene = new IsoScene();

var g:IsoGrid = new IsoGrid();
g.showOrigin = false;
g.addEventListener(MouseEvent.CLICK, grid_mouseHandler);
scene.addChild(g);

box = new IsoBox();
box.setSize(25, 25, 25);
box.moveBy(0, 0, 20);

scene.addChild(box);

var factory:as3isolib.core.ClassFactory = new as3isolib.core.ClassFactory(DefaultShadowRenderer);
factory.properties = {shadowColor:0x000000,shadowAlpha:0.15,drawAll:false};
scene.styleRenderers = [factory];

var view:IsoView = new IsoView();
view.clipContent = true;
view.setSize(stage.stageWidth, stage.stageHeight);
view.addScene(scene);
addChild(view);

scene.render();

function grid_mouseHandler(evt:ProxyEvent):void
{
 var mEvt:MouseEvent = MouseEvent(evt.targetEvent);
 var pt:Pt = new Pt(mEvt.localX,mEvt.localY);
 IsoMath.screenToIso(pt);
 var squareSize:int = 50;// 
 var gridX:int = Math.floor(pt.x / squareSize);
 var gridY:int = Math.floor(pt.y / squareSize);
 TweenMax.to(box, 0.5, {x:gridX * squareSize, y:gridY * squareSize, onComplete:completeCallback});

 if (! hasEventListener(Event.ENTER_FRAME))
 {
  this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
 }
}

function completeCallback():void
{
 this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

function enterFrameHandler(evt:Event):void
{
 scene.render();
}

Using regular expressions to parse loaderInfo url name:

I have a folder full of swfs which have an external file / xml entry where they must get their information from. Each swf file is named in the format xxx_0.swf where xxx is a 3 letter suffix and 0 is any number (can be any number of digits). The issue is that when you try to return the url name you will actually get the full directory path. Don't know if this is the most efficient way, but the solution I eventually went with involves putting each URL segment (divided by a slash) into an seperate array item and then going to the last one. Finally we slice off the front 4 characters (xxx_) and last 4 characters off (.swf):

var myFileNameArray:Array = new Array();
var num:Number;
var myFileNumber:String;
var myFileNum:Number;

var myFileName:String = this.loaderInfo.url.split("/").pop().replace(/%5F/g, "_").replace(/%2D/gi,"-");
myFileName = this.loaderInfo.url.split("/").pop().replace(/%5F/g, "_").replace(/%2D/gi,"-");
myFileNameArray = myFileName.split("/");
num = myFileNameArray.length;
myFileNumber = myFileNameArray[num-1].slice(4,-4);
myFileNum = Number(myFileNumber);

How to do Pitch Analysis in Audacity

I should like to make a singing game where people have to sing the tune that's been played to them. A bit like a music memory game. So i thought i'd start by trying to find out how we do a simple pitch analysis.



I used an online tuning fork to generate a tone and then listened to it while recording myself singing back the same note. [At this point I realised my voice was very "pitchy" as playing my voice together with the tone resulting in a discordant sound where the two pitches varied ever so slightly, so when conducting this experiment some degree of inaccuracy should be expected....]

In Audacity, go to Analyze > Plot Spectrum...
Increase the size to 16384 (maximum)
Set Axis to Log (Logarithmic) to see the notes and frequencies present (The "highest" point means that frequency is loudest in that recording).



Frequency Spectrum of myself singing 329.63Hz (E)
Result: Peak Spectrum of 330Hz (E)



Frequency Spectrum of myself singing 220Hz (A)
Result: Peak Spectrum of 219Hz

Sonic Visualiser and Signal Processing

Viewing audio spectrums in audio editing programs like Audacity can be unpredictable as it may frequently crash or hang because the program/computer can't handle the processing required to analyse and display the spectrogram. And after you get the graph, what do you do with it? After the data is visualised, how can we get to the data and break it down?

Sonic Visualiser is apparently a program explicitly built for viewing and exploring audio data for semantic music analysis and annotation. I downloaded it recently and found that it worked incredibly fast and was also full of many useful annotative functions and could also run "feature-extraction" plugins (eg: beat trackers, pitch detection, etc).

I guess I am following this line of thought because I am interested in how we can analyse sound data meaningfully. Detecting beats, pitch, vowel sounds, and other audio features is something that has fascinated me since I once saw a documentary about deaf children in 1970s France, where children were apparently trained to speak using a computer game that made children learn the subtle difference between speaking different vowel sounds. Although the children in this programme were profoundly deaf (often from birth) and could not hear anything at all, they were being physically trained to produce the right vibration and sound through their vocal chords, aided with this motivational computer game that moved the character up/down/left/right according to the sound that was emitted. The vowel sound for "A" would move it up, the vowel sound for "E" would move it to the right, the vowel sound for "U" would move it down, and so on so forth. So it would be, a sort of dream, to find out how to create such a program on my own.

I downloaded Sonic Visualiser and put in an audio file generated by Metasynth which was meant to have a spectrogram that resembled the cover of the Space Voyager record. (Read more about my attempts at converting images to sound)



dBV: "The scale displacement is proportional to the log of the absolute voltage."



dBV^2: "The scale displacement is proportional to the log of the square of the bin value."



Linear: "The scale displacement is proportional to the voltage level of the resulting audio output."

DECIBELS: The dB is a logarithmic unit used to describe a ratio of a physical quantity in reference to a specific level. The ratio may be power, sound pressure, voltage or intensity or several other things.

"In professional audio, a popular unit is the dBu (see below for all the units). The "u" stands for "unloaded", and was probably chosen to be similar to lowercase "v", as dBv was the older name for the same thing. It was changed to avoid confusion with dBV. This unit (dBu) is an RMS measurement of voltage which uses as its reference 0.775 V_RMS. Chosen for historical reasons, it is the voltage level which delivers 1 mW of power in a 600 ohm resistor, which used to be the standard reference impedance in telephone audio circuits.

My Observations/Ponderings:

• are those what we call "noise artifacts" in the spectral analysis process? why are there more colours on certain "scales"? why the fuzzy bits of sound scattered across the graph from what sometimes sounds just like a singular tone?
  
• how should we choose a frequency scale? which frequency scales bring out the most striking visual images? is this like the RGB channels for images? in RGB images we can say that the red channel tends to contain the "human skin tones", the green tends to contain the high details, and the blue tends to have the noise - is there a similar thing in sound analysis, where viewing sound on different scales produces visual graphs that emphasise particular details in a similar manner?
  
• how is colour assigned? there are many different possible colour palettes available, but how do these programs do it? are there also different scales involved in applying colour effects to the sound spectrogram?

for example, this is a portion of the analysis of dopplereffekt's the scientist. the track itself is fairly minimal and it is very crisp and clean, mostly just DUK CHK DUK CHK DUK CHK DUK CHK. still, this spectrogram is pretty colourful and i can't quite yet look at the spectrogram and imagine the sound from it. perhaps it will take more reading to understand why it looks this way or how to optimise and format the spectrogram output.


In other news, I am currently trying to understand digital sound processing by watching this lecture series on Signals and Systems, released on MIT Opencourse Ware. Got to Lecture 2, was promptly stumped by the first equation. First time I saw the symbol phi. Actually, how the hell do you even type phi? Looks like there is no way to type phi in a mac keyboard. You have to copy paste it in or find the symbols panel (greek) and then add it in. ϕ

The lecture begins talking about a continuous time sinusoidal signal but in the real world a lot of the common digital signal processing that goes on apparently involves discrete signals, eg: music on cds, mp3s.

Signals can either be continuous time (eg: analog) or discrete (eg: digital). Digital audio is sampled and the sampling rate determines how many of these discrete signals we record down.The resolution determines how "detailed" the recorded signal can be. An 8-bit code has 256 possible combinations, a 16-bit code would have 65,536 combinations.

Next, this data has to be analysed so it makes sense as sound. There is no "simple" way to do spectrum analysis for sound and most oscilloscopes do not give any information about the timbre of sound which needs to be understood more as differences against the scale of frequencies whereas we record sound against the scale of time with an oscilloscope. The main method used to analyse sound into something that becomes "digital sound" is the "Fast Fourier Transform" which appears to involve a very much more complicated algorithm....

Geometric Sandwich #1

today i tried making an avant-garde sandwich
with an inset triangle of egg

DJ DBBD 2011

Reposting some mixes and tracks I made last year. Now all on one page.

______________________________________________________

MIXES



DJ DBBD // WRKNTHRW MIX N0.2 2011
DOWNLOAD LINK: http://www.mediafire.com/?97e841rwzcvc6x1




DJ DBBD // WRKNTHRW MIX N0.1 2011
DOWNLOAD LINK: http://www.mediafire.com/?xeq5uxfmxjx4w5f

______________________________________________________

VIDEO/AUDIO



=== - yt80s.flv
[track made with youtube videos and 80s samples, pieced together manually in audacity]




=== - 4 P.lpwth 19.C
[track made with string samples]




=== - 0tlk
[track made with samples from opening sound of bbc outlook]

Contextfree - Square Recursion with Pastel Circles

startshape circlepaper
 
rule circlepaper {
    2 * {y 1} {
       2 * {x 1} pastel {}
     }
}
 
rule pastel .2 { 
    CIRCLE{hue 180 sat 1 b 1 a -0.75}
}

rule pastel .2 {
    CIRCLE{hue 0 sat 1 b 1 a -0.75}
}

rule pastel .2 {
    CIRCLE{hue 50 sat 1 b 1 a -0.75}
}

rule pastel .2 {
    CIRCLE{hue 100 sat 1 b 1 a -0.75}
}

rule pastel {
    circlepaper{s .5 y -.25 x -.25 b 0}
}

JPEG Glitch Generators

Found this AS3 BitmapData Glitch Generator. Reading the code to find out how it works. Here is some of the output from this:





The opensource example from soulwire works by altering a few bytes in the ByteArray of a JPEG file, which is loaded back into a DisplayObject using Loader.loadBytes(). You will notice that the corruption starts slightly further down - because the code is trying to avoid the important JPEG headers. It is able to do the same for PNG and GIFs by first converting them to JPEGs then doing the same (PNG and GIF are not saved in the same way and only JPEG's format is suitable for this method of corruption - although I wonder how else we could corrupt PNG or GIF?)

A JPEG image consists of segments and markers. Some of them are important and specify important things like the width, height, subsampling, and quantisation tables. These parts are not to be edited because because this needs to be more or less intact for the JPG to still sorta display, and the part that is altered is the portion from SOS (start of scan) and EOI (End of Image). - See more on JPEG syntax and structure)

EXAMPLE: MANUALLY CORRUPTING JPEGS

The same can be done with any text editor. Here is an example using a random cat picture.



All those characters are storing the information for this picture:



I opened up a duplicate of this JPEG file and pasted in the above paragraph on JPEGs into one of the lines.



This is the effect on the JPEG image:



VERDICT: 400% MORE ADORABLE?

Contextfree - Moireballs

Playing with a simple rule set on Contextfree. Looks even more full of moire when compressed automatically by Flickr - moire being the interference pattern when two grids/meshes are overlaid but small differences exist (kinda like how phase shifts work?). In this case, the moire effect is derived from small variations in the circle rule which is repeated.

startshape MOIREBALL
background { hue 100 sat .2 b -1 }
 
rule MOIREBALL {
 360 * {r 0.999999} 
 START {}
}
 
rule START {
 LOOPY {}
 START [s .99 x .8 r 0.99 a .5 z -.4]
}
 
rule LOOPY {
 CIRCLE {s -.3 b -0.2}
 CIRCLE {s .2 b 0.2}
 CIRCLE {s -.4 b 0.3}
 CIRCLE {s .2 b -0.3}
}

Systems and Pattern Recognition

Selected details from a walk along Bukit Timah Road

The above images were from a walk along Bukit Timah Road on Saturday morning. We had eggs benedict at Hatched and then walked backwards on Bukit Timah Road, exploring a few drains and the construction work for the new Downtown line. Some of the electrical and plumbing boxes had been installed with rope handles. You know what I say; if they put a handle on it, it must be for us to open and look inside. So I opened them and looked inside. Not very interesting though, just a lot of soil, but can't expect to find surprises all the time I guess. We also found a total of 3 mysterious packets of bright green grains, along one large storm drain. Could they be fertiliser, rat poison, mouldy barley, drugs, or something else? Does anyone know what this is?



The other day I did an interview with Tan Pin Pin. She had seen my Yangtze scribbler images in one of my booklets and somehow it had the honour of piquing her interest enough to shoot a 5-minute thing about it. We went down to see the location and do a bit of filming. Amazingly, they were still there exactly as I first recalled them - both the ones on the Yangtze stairwell and the new one on the back of the bus stop on Victoria Street (next to the muslim cemetery). Being at that place always feels intense, like intruding into some other world that I don't belong to. Last year in November, I saw a very similar set of symbols on the back of a busstop on Victoria Street. Seeing the same symbols outside of the Yangtze was the thing that, for me, elevated this from "secret language from a closeted, bubble universe" to "GRAND CONSPIRACY / MYSTERY"!

Since the time me and my old colleagues first encountered it in mid 2010, the foodcourt with the western food stall at the top of Yangtze has given way to a huge KTV bar that has completely reconfigured the space. The typically R-rated Yangtze cinema is going strong once again; it is currently showing World of Geisha with a blurry flyer that has a rave review from Francois Truffaut hastily photoshopped on top of it. One would scarcely imagine that any of the people frequenting Yangtze would be familiar with Truffaut or even care about the opinion of Truffaut, but who knows? For years, these "R-rated cinemas" have always been slipping in the arthouse amidst the raunchy film titles.

Yangtze Stairwell (29 July 2010):





Yangtze Stairwell (3 Feb 2012):





Victoria Street (13 Nov 2011):



Victoria Street (3 Feb 2012):




One of the revelations I had as a result of the interview was that my fetish for collecting photos of signs and symbols might also be described as a general interest in understanding systems and finding patterns. I said there and then, that I had always thought that intelligence was just a matter of being really good at finding patterns in things, because IQ tests are usually about finding patterns. Pattern recognition is probably the most crucial skill in intelligent decision making, and even learning new skills or languages also involves being able to understand patterns, predict the next outcome, and also replicate the patterns on your own. I suppose in my own work and writing I also approach the city in a similar fashion, always desiring to find meaning or patterns in what sometimes may or may not be meaningless data.

QRcodes and Reticulation

From Dante's Inferno:
"In the middle of the journey of our life
I came to myself within a dark wood
where the straight way was lost."




Running some simple, random photoshop filters on qrcodes as an experiment. All these codes work when scanned.

Of note: a filter I had never looked at too closely before - Reticulation. Reading up on it more, it appears that it is actually a term that comes from film photography. During the process of darkroom processing, due to different temperatures or chemical combinations, sometimes the thin layer of emulsion would stretch or shrink at a rate different than the glass or cellulose-based support, causing "termite-like trails". Apparently photoshop simulates this with termite trails and an image that is lightly grained within its highlights. Density, foreground, and background levels can be set.

Since I never really worked with actual film emulsion (or in a darkroom) in my entire life, I never had knowledge of this "reticulation" effect. I suspect that the average layman will have no idea what this effect is supposed to look like, or how it was originally generated - for example, I don't think that many of my students would be familiar with even the slightest notion of film photography. The other day in school we had an encounter with a disposable film camera tied to a pillar, but it seemed that all of my 17/18 year old students had never seen a "wind up film camera" before, so I had to explain to them how to use and wind up a disposable film camera! Incroyable! Despite going digital once digital cameras reached the consumer market, I also had a number of cheap manual windup cameras which I scavenged from the CashConverters and Salvation Army here - simply I couldn't afford a fancypants DSLR and this was the only way I could buy and play around with cameras. The effects that came back were... experimental to say the least. As with all cheap plastic cameras there were light leaks at times and sometimes the film was not wound up correctly. I sometimes accidentally made double exposures and the flash went wrong sometimes. It is always surprising to see the ridiculous prices on plastic cameras today such as the LC-A and Holga (or even the digital hipstamatic equivalent of vintage lenses for iPhone and other devices). I am slightly sad to think that children today might not all have any experience with playing around with film - for me, even if I'm not involved with every step of the film processing, I do try to be aware of the process. Whereas digital processes sometimes erase the need for skill or understanding. Simply pulling some slider along in a dialog box is not the same as having to understand what it would take to obtain the right effect...

But back to the main story. From what I can read on the internet, Reticulation is something that is difficult to produce with film emulsions today as they have been specifically made to withstand even the sudden and dramatic change in temperature that would once have forced the emulsion to expand or contract, causing parts to cluster or clump together in a strange "network" pattern (or "ridges and valleys").

So why did they invent a digital version of a filter that actually mimics an effect that would actually be destructive to the film or be considered an error when developing an image? Well, it seems that reticulation was actually considered "trendy" or "arty" at one point. I guess this is similar to my own interest in compression artifacts. Maybe we could say that a particular format or medium has finally "come of age" when its users start fetishising its "nostalgic" imperfections as art.

Reticulation as a word also means "to mark with lines resembling a network (for decorative purposes)". I think... this could be my new favourite word.