Creative Coding

Obfuscated code and weird programming practices

Modern computer programs are textual languages written in a way that is meant to be understandable — or at least readable — by virtually everyone.

For those willing to get their hands dirty with coding it is essential to be able to “read” a computer program. This means developing an understanding of the computer’s behaviour, and interpreting the significance of the structure of the program when this runs the code, even when this code is purposely intricate and very difficult to read— i.e. obfuscated.

As defined by Wikipedia, software obfuscation “is the deliberate act of creating source or machine code that is difficult for humans to understand. It may use needlessly roundabout expressions to compose statements. Programmers may deliberately obfuscate code to conceal its purpose or its logic or implicit values embedded in it to prevent tampering, deter reverse engineering, or even as a puzzle or recreational challenge for someone reading the source code”¹

Yet, while a computer system may compile code even when this is obfuscated, I believe it is crucial that code should be written in a such a form that can be easily interpreted by people as well. This is a typical perspective on writing code that follows rules of clarity and elegance. It is, in fact, very easy to find programmers praising the beauty of well-written code online. It represents such a common practice which cannot be unseen, and both the web and programming textbooks are inundated with tutorials and tips for writing elegant code.

However, as investigated by Nick Montfort and Michael Mateas with their paper A Box, Darkly: Obfuscation, Weird Languages, and Code Aesthetics, how do we explain the existence of obfuscated programming — either as a software development or as an aesthetic practice — in a world schooled with intelligible coding in mind?²

Some languages, often referred to as weird or esoteric languages, are often specifically designed to make legibility of a program arduous. They aren’t geared towards real-world applications neither are designed for any educational use. Weird programming languages exploit the concept of obfuscated code to “highlight the importance of the human reading of code in software development.”(Montfort and Mateas, 2005)²

With the rise of weird language programming, professional programmers and hackers alike started to organise obfuscated code contests as a mean to get creative with coding, rethinking the way most people perceive this practice (often idealised more as technical and structural, rather than artistic).

We shouldn’t be afraid to associate developers with artists. And yes, while some branches of programming are aimed at “fixing” and “posing the foundations” for the work of other coders (i.e. not what one would usually define as creating coding); there will always be creativity involved in writing code.

The aim of obfuscated code contests is never just about programming software through hard to read code (this is often achieved by introducing layers of complexity into the structure of the code) — they are about pushing the boundaries of the semantics of a language, creating art by playing with the syntax of code itself.

“In 1984 Landon Curt Noll and Larry Bassel held the first International Obfuscated C Code Contest. The contest was a success that has been repeated many times. […] The contest’s stated goals include demonstrating the importance of programming style. […] There is also an Obfuscated Perl contest, run annually by The Perl Journal since 1996.” (Montfort and Mateas, 2005)²

Common theme to all obfuscations is their intent to explore “the play in a language”², eliminating boundaries — or creating new ones — in programming language design.

The code snipped above is written in INTERCAL, a language that parodies other programming languages.

Coding in the realm of weird programming languages is often referred to as multiple coding. An example of multiple coding is Perl Poetry — “often little more than an exercise of porting existing song lyrics into Perl” which “does little to articulate the language of Perl itself”²

Black Perl, a famous example of Perl Poetry

On the other hand, the aim of Minimalist languages is to achieve “universality” while providing the programmer a very limited range of language constructs.

This code is written in Brainfuck, the esoteric minimalist language for excellence. Brainfuck consists of only eight simple commands and an instruction pointer. (Wikipedia)

Other weird languages, rather than simplifying and minimalising code instructions, they play with the syntax to produce literary artifact that can also run as valid programs.

The structure of the Shakespeare language exploits this “play” aspect in all its forms because it actually follows the structure of a stage-play.

Obviously the list of esoteric programming languages doesn’t end here. There are hundreds of weird languages out there, some trending while others almost abandoned.

I find that a useful way to grasp the way these languages work is to read their code snippets for compiling “Hello, World”. Try looking at the length, complexity, structure, and syntax of esoteric code here: https://esolangs.org/wiki/Hello_world_program_in_esoteric_languages


References:

  1. En.wikipedia.org. (2018). Obfuscation. [online] Available at: https://en.wikipedia.org/wiki/Obfuscation [Accessed 9 Mar. 2018].
  2. Montfort, N. and Mateas, M. (2005). A Box, Darkly: Obfuscation, Weird Languages, and Code Aesthetics. pp.1–10.

Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

How I made a synth running in the browser using Web Audio API

This is the story of my three-days quest into understanding what is the Web Audio API and what are its capabilities. During this time I have also experimented with creating an extremely simplified synthesiser using the Web Audio API and p5.js.

The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications started out by the W3C Audio Working Group in 2012. It has now developed into a solid JS interface for building music-specific applications, like drum machines and synthesisers, or complementing modern in-browser game engines.

The Web Audio API involves handling audio operations inside an audio context, and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. […] This modular design provides the flexibility to create complex audio functions with dynamic effects. (Mozilla Developer Webpage)

Here I could be taking time to explain how the basics of Web Audio work, but (thankfully!) other more experienced folks have already had a successful go at that which I would rather not replicate. I recommend following Greg Hovanesyan’s tutorial and Boris Smus’ Getting Started with Web Audio API, as well as the project’s official website if you want to learn more on how to implement Web Audio into your projects.

Here’s how my synth works

The synthesiser I created using Web Audio API

Available here is my modest attempt at building a simple “multi-waveform” synthesiser. It is composed of 3 main groups of elements (excluding other HTML components such as buttons, sliders, or text):

Oscillators, Filters, and LFOs.

First step to creating your own sound with this synth is choosing a waveform among the four available. The frequencies of the two oscillators can be set using the first two sliders. Once you are happy with the pitch you’ve chosen, you can play with the speed of the LFO which is connected to two inverse filters — a low and a high-pass — opening and closing simultaneously following an inaudible sinewave. You can also control the upper boundary of the filters by setting a frequency, which I named Contour, using the slider at the bottom— “opening up” the sound by doing so.

I used p5.js to automate the movements of the sliders, as well as positioning the elements on the page. Basic CSS styling has also been added.

A more precise approach would make use of other Web Audio elements to modify audio parameters. In this case I only needed to test the capabilities of the API. Therefore, I settled on using a simpler approach —p5.

Below is the Javascript code that runs behind the scenes:

https://gist.github.com/francescoimola/227872dd3f3374da323a6d9c71a31e5a

This synth is not playable via your computer keyboard, nor via MIDI. Frequencies cannot be set and parameters cannot be saved. It is only a minuscule example of the power of Web Audio.

It took me three entire days to complete this synth, but one can only imagine what impressive projects could be achieved in Web Audio if more time, and experienced hands, were to be used.

Few examples of things that can be done using Web Audio

Omnitone: JavaScript implementation of an ambisonic decoder that also allows you to binaurally render an ambisonic recording directly on the browser.

[embed]https://googlechrome.github.io/omnitone/#home[/embed]

Babylon Synth: a mini 3D visual interactive experience of Gershon Kingsley’s Popcorn.

[embed]https://googlechrome.github.io/omnitone/#home[/embed]


Source Image: Scott Schiller https://www.flickr.com/photos/schill/6839260527/


Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

A brief look into Form Art

Alexei Shulgin’s Form Art (1997)

Once web art at its peak, Form Art now seems like a forgotten achievement in the infinite world of new media.

Yet, the innovative thinking that came along with the short development of Form Art as part of the net.art “movement” has inspired a plethora of contemporary artists.

Alexei Shulgin was one of the prominent members of the movement. He “created” Form Art, but also collaborated with many net artists such as Olia Liliana, Natalie Bookchin, Heath Bunting, and Vuk Cosic in projects which marked a turning point for new media art in the 90s.

In his perfomance Cyberknowledge for Real People (1997), he handed out printed collections of critical texts, previously distributed only online, to shoppers in Vienna. This showed that net art was not medium specific at all, which until then was the predominant theory; it did not have to be experienced online.¹

Shulgin has also organised several software arts festivals, spent time in Moscow collaborating with the creative arts collective Electroboutique, and gained a reputation with his “386DX” performances.

Form Art was commisioned to Shulgin during his residency at C3 in Budapest in 1997. He affirms to have started developing what became his most popular project at that time out of a simple need to experiment with the formal interface of internet technology and reshape it something different.

“I had those buttons, test areas, checkboxes in my mind for a while. The initial idea was to use them not as they were supposed to be used — as input interfaces — but to focus on their shapes, their position on a page, and to try to animate them.” (Alexei Shulgin)

Rhizome describes Form Art as “an interactive, formalist art site navigated aimlessly by clicking through blank boxes and links”².

The power of Form Art comes from its “misuse” of the browser aesthetic and HTML conventions imposed to users interacting with the web. Unknown behaviours, glitchy checkboxes, and patterns of textboxes are characteristic of Form Art.

By playing with combinations of these “forms”, Shulgin manages to create an abstract work of contemporary art which updates itself over time, in tandem with software’s constant evolution. In fact, the work’s appearance relies largely on whichever operating system [and browser] the viewer is using to access it.²

My extremely minimalistic attempt at Form Art

Giving And Taking, Francesco Imola, 2018

Giving and Taking is a short project I realised in p5js (a JavaScript library for creative purposes). I took inspiration from Michael Samyn’s “1001 checkboxes”, an artwork which won the Form Art competition organised by C3 (Hungary’s Center for Culture & Communication Foundation) in 1997.

Not much needs to be explained about its concept and operation. “Giving and Taking” is an endless loop between discomfort and relief.

This project can be visited here (via GitHub).

This is a snippet of the Javascript sketch which makes the artwork run:

let checkbox = [];
let centerwidth = innerWidth / 2;
let centerheight = innerHeight / 2;
let fr = 120;
let animY0 = 0;
let animY1 = innerHeight;
let isOn = false;

function setup() {
noCanvas();
frameRate(fr);
Checkboxes();
}

function Checkboxes() {
for (var i = 0; i <= 1 ; i++) {
checkbox[i] = createCheckbox();
}
}

function draw() {
let velocity = 2;
let speed0 = velocity;
let speed1 = velocity;

checkbox[0].position (centerwidth - 20, animY0);
checkbox[1].position (centerwidth + 20, animY1);

animY0 += speed0;
animY1 -= speed1;

if (animY0 > innerHeight) {
animY0 = 0;
}

if (animY1 < 0) {
animY1 = innerHeight;
}

if (animY0 == animY1) {
isOn = Check();
}
}

function Check() {
if (isOn) {
Uncheck();
}
else {
checkbox[0].checked(true);
checkbox[1].checked(true);
return true;
}
}

function Uncheck() {
checkbox[0].checked(false);
checkbox[1].checked(false);
return false;
}

You may encounter some issues — which I have not yet figured out — if trying to resize the browser window after loading the page. Try resizing the window first and then reloading the site.


References:

  1. Bosma, J. (2017). A Net Artist Named Google. [online] Rhizome. Available at: http://rhizome.org/editorial/2017/jan/12/a-net-artist-named-google-1/.
  2. Rhizome. (n.d.). Form Art. [online] Available at: http://rhizome.org/art/artbase/artwork/form-art/.

Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

Generative art: a practice in constant change

“Floating Lines in the DeepSpace”. A generative artwork by Miguel Neto & Rodrigo Carvalho.

To “generate” — as described by the Merriam-Webster dictionary — is to define or originate (something, such as a mathematical or linguistic set or structure) by the application of one or more rules or operations.

For generations, artists and scientists have helped reshaping this term into an abstraction:

Generative art takes place in a structured system – such as a set of natural language rules, a computer program, a machine, or other procedural inventions¹ – created by the artist and aimed at producing multiple, and potentially endless, results from the manipulation of an initial form.

[When we talk about generative art], the term (generative) is simply a reference to how the art is made, and it makes no claims as to why the art is made this way or what its content is.¹

Development

Despite its modern approach, generative art is “as old as art itself”¹. Since Wolfgang Amadeus Mozart, and throughout history, artists have designed complex and simple systems — as in the works of Elsworth Kelly or John Cage — for the creation of new generative artworks.

Set aside Computer Science and AI, several art practices have contributed to the development of generative art. These include Electronic Music, Computer Graphics, Animation, VJ Culture, Industrial Design, and Architecture.

The youth culture and audiovisual artists, in particular, are bringing generative art to the eye of the media as no one has ever done before.

To bring generative art to a club night is to expose and showcase the potential of such practice to a massive crowd. Max Cooper, Alva Noto, Ryoichi Sakamoto, Squarepusher, and many other A/V artists are currently basing most of their work and live shows on machine generated art.

Systems

Complexity science is a relatively young discipline aimed at understanding how the systems that rule the generative world work.

Complex systems are called so because they (typically) have a large number of small components that interact with similar nearby parts.²

Local components will interact in “nonlinear” ways, meaning that the interactions act in a non-sequential or straightforward manner. These local interactions are dynamic and in constant change, leading to the system organising itself. Scientists define these self-organising systems as complex systems.

Examples of complex systems are the human brain, Earth’s climate, living cells, the stock market, etc.

Order

It is important to remember that complex systems may act in a chaotic manner, but never do so randomly. There is a somewhat clear distinction between chaos and randomness, especially within the field of generative art.

Philip Galanter provides us with a great example of the difference between chaos and randomness:

“…even though it is difficult to predict the specific weather 6 months from now, we can be relatively sure it won’t be 200 degrees outside, nor will we be getting 30 feet of rain on a single day, and so on. The weather exists within some minimum and maximum limits, and those expectations are a sort of container for all possible weather states.”

Generative code

There is an aspect to code which goes beyond its pure written form. Its execution constitutes what we experience.

[However], to appreciate generative code fully we need to ‘sense’ the code to build an understanding of the code’s actions. To separate the code and the resultant actions would simply limit our experience, as well as the ultimate study of these forms.²


References:

  1. Galanter, P. What is Generative Art? — Complexity Theory as a Context for Art Theory, Philipgalanter.com. Available at: http://www.philipgalanter.com/downloads/ga2003_paper.pdf.
  2. Cox, G., McLean, A. and Ward, A. The Aesthetics of Generative Code, Generative.net. Available at: http://generative.net/papers/aesthetics/.

Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

Deconstructing functions

When thinking of code as a set of instructions is it useful to assign a name to those chunks of instructions. The two fundamental ones (in programming) are called procedures and functions.

Functions and procedures share many similarities — in some programming languages procedures are seen as a special type of functions — but generally speaking, functions return a value, whereas procedures don’t.¹

Functions are self-contained modules of code that accomplish a specific task.² The aim of a function is to “acquire” data, process it, and “return” a result (or value). To streamline and maintain modern code, functions are now usually limited to performing a single task and are kept as short as possible. [To some programmers], the idea that functions should be small is something that is almost considered too sacrosanct to call into question.³

The power of functions resides in their virtually infinite modularity. They allow programmers to shorten code, reusing it instead of rewriting it.² A function can be written once and used over and over again at different points within a programme. It is also possible to call functions from the inside of other functions. Some typical examples of functions would be arithmetic operators like “plus,” “times,” and “square root,” which can be combined with other arithmetic operations to compose expressions.⁴

To announce a function we firstly need to assign this a name (or identity) and declare any argument that it will require. When a function is called the programme “leaves” the current section of code and begins to execute the first line inside the function.² Once inside the function, the code is run from top to bottom. The resulting value is sent back to where the function was called in the code and is used in place of this.

Additionally, functions can be seen as look-up tables that map from a certain symbol, the look-up key, to a value associated with this key.⁴

Most modern programming languages — Javascript is a classic example — often allow for predefined (or built-in) functions to be called. In such languages, a function can be assigned as a value to a variable, or can be passed into arrays (lists) just like any other data type.⁵ Such type of procedures is often employed in functional programming, a language design that mostly relies on functions, rather than variables.

A function eventually represents the simplest machine design. However, completely functional programs can only recreate an ideally logical data in-data out machine, not the one which we usually have to deal with. Every variable that lives inside the workspace of a function is only usable during the execution of the function. Good designs are to be based on a reversible logic — one which a function-only driven programme will not be able to accomplish.

This intuition is at the heart of logic. If repeating the same operation with the same input gives a different output, you know without a doubt that something changed: it isn’t the function you thought it was, it isn’t a simple machine.(Derek Robinson, 2008)

Implementing functions into my coding projects

For the past week I’ve been working on an extremely small and simplistic program that develops on the concept of text and type, and uses functions as main building blocks.

The project is called TEXTBOX. Its aim is to generate an artwork out of the text the user writes in the actual textbox when hitting the submit button. It is inspired by this example — which I have encountered while leaning more about using Input and Buttons on p5.

Javascript code behind TEXTBOX

I’ve called the greet function through the mousePressed action/built-in function in p5. In greet is placed the for loop which generates the copy of the text, and changes its colour and position randomly. Simply reload the page to reset the background to white.

An nice update to this would be adding a refresh button inside the actual webpage, as well as the ability to save the artwork (with different aspect-ratios) as a picture on your computer.

The project can be accessed here https://alpha.editor.p5js.org/full/SJvi1DzrG


References:

  1. BBC Bitesize — GCSE Computer Science — Functions, procedures and modules — Revision 1(2018). Available at: https://www.bbc.co.uk/education/guides/z9hykqt/revision.
  2. Programming — Functions (2018). Available at: https://www.cs.utah.edu/~germain/PPS/Topics/functions.html (Accessed: 19 January 2018).
  3. Sridharan, C. (2018) Small Functions considered Harmful, Medium. Available at: https://medium.com/@copyconstruct/small-functions-considered-harmful-91035d316c29.
  4. Derek Robinson (2008) Software studies by Fuller, M. Cambridge, Mass.: MIT Press.
  5. Goldberg, O. (2017) Javascript and Functional Programming — Pt.2 : First Class Functions, Hacker Noon — Medium. Available at: https://hackernoon.com/javascript-and-functional-programming-pt-2-first-class-functions-4437a1aec217.

Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

Online drawing and first steps with p5.js

Take Processing and Javascript, put those in bowl, add some HTML5 and CSS, mix them, and here you have a shiny new tool for creating easy-to-interact shapes, text, video, sound, and a myriad of other online objects.

In an attempt to put onto use the very elementary functions of P5.js that I have learned in the past week, I sat down and built an half-ever-moving drawing formed of text and lines. I was well inspired by Picasso’s minimalist portraiture.

drawingsxdrawings, Francesco Imola

I made use of a Javascript array to initialise the words to be displayed and added 4 Random functions, each one receiving the array as input and outputting the words in a different order, following the frameRate fps to set the speed. The rest of the code consists of the actual drawing of lines and positioning of the text.

It can be viewed here https://francescoimola.github.io/drawingsxdrawings/

The P5.js script used to build all of drawingsxdrawings

Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

A difficult relationship between algorithms and code

As algorithms gain their prominence in our daily lives and start to affect us to a degree still unknown to many, we should start seeking to understand them a little bit better by drawing on the history, social relevance, and definition of the algorithm itself.

First of all, algorithms are not code. They are two separated yet well acquainted entities in the way that one completes the other. “Algorithms are a finite number of calculations or instructions that, when implemented, will yield a result.” Code is the practical implementation of algorithms, described as set of instruction for a computer delivered via the use of specific programming languages.¹

It is important to remember that an algorithm does not live only within the environment of Computer Science but is firstly a set of mathematical operations. One can think of algorithms as step-by-step formal instructions to solve a problem that are only abstract until implemented on the machine. As suggested by Andrew Goffey in the chapter “Algorithms” on M. Fuller’ Software Studies, we can interpret algorithms as if they were sentences (term firstly used by Michel Foucault) in a language — one which does not cohere with the idea that words can’t do things. A language that is self-sufficient and can transversally communicate with itself without the need of actual “speakers” if engineered to do so.²

Languages base their existence on two basic delivery methods, speech and writing (memorisation being a result of the formers). However, we can see the power of speech diminishing when, in society, “the volume of knowledge quickly increased to a point at which there was too much [knowledge] to pass in the form of dialogue”³. To reason about the nature of the very first algorithm known in history — the instructions for factorisation and finding square roots developed by Babylonians in 1600 BC — we need to imagine dealing with the volume of congested information required to be processed to get the job done. To tackle this issue of “big data” it became crucial to develop written rules and instructions aimed at managing such “ill-defined network of actions upon actions”⁴.

Later in history, Turing’s abstract mechanical machine condensed the logic of virtually any possible algorithm into bits on an infinite strip of tape. Here the algorithm, while occupying a crucial role in the computing process, becomes nothing but a set of data fed into the machine to yield a result. But even a cardinal concept like that of the Universal Turing Machine assumes a degree of abstraction in that it supposes a precise set of inputs (1, 0, and Blank) and outputs (move tape left, move tape right, go back to the beginning state, etc.). Without such structure of data the algorithm is broken.

“Although computer scientists reason about algorithms independently of data structures, the one is pretty near useless without the other. In other words the distinction between the two is formal.” (A. Goffey, 2008)

In a sense, we need algorithms to be broken, “machines to break down and systems to be hacked”⁵ because unintended side-effects are the foundation stone for most creative applications known to us today. I believe the study of algorithms needs to escape the shadow of code, and the much worshipped process of learning to code. This means taking a step back to find the patterns that connect data, before even writing a single line of code.


References:

1–3. Horan, C. (2017). The future is algorithms, not code. [Blog] Hacker Noon. Available at: https://hackernoon.com/the-future-is-algorithms-not-code-64cacca3b908 [Accessed 28 Nov. 2017].

2–4–5. Fuller, M. (2008). Software studies. Cambridge, Mass.: MIT Press. (Respectively on pages 17 and 19)


Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

Building my first Pure Data patch.

I’ve been an hardcore fan of open-source software (OSS) for years but never relied on it to the point where I felt confident in using an OSS as a tool to build my work on.

And there are good reasons to be scared of using OSS professionally. Especially if the outcome of your work as an artist depends on that of an unknown community of non full-time developers who don’t have time to take into account your level of IT knowledge, learning curve and, in particular, your time, when building and upgrading a software.

It is a well known issue that using OSS is often more time consuming and daunting – both as a first time and as an experienced user – than using proprietary software. Pure Data is a very good example of this.

Pure Data is an open source visual programming environment that runs on anything from personal computers to embedded devices and smartphones [..]. It is a major branch of the family of patcher programming languages known as Max (Max/FTS, ISPW Max, Max/MSP, etc), originally developed by Miller Puckette at IRCAM. (Pure Data Website)

Don’t get me wrong. Pure Data is a brilliant programming language with an endless potential and a relatively stable community of developers, most of which are also artists.

But sometimes this is not enough.

A part-time community of developers will never be able to manage the large scale upgrades that lead to a stable product, which should be canvas to the work of professionals at all levels. Hence the reason why the old-fashioned proprietary software Max/MSP has become a standard against Pd for artists and engineers in the creative industries.

“I have to wonder how anything actually gets done in the open-source community. In general, the collective crowd has to be a royal pain to work with. And that’s why any large-scale project within that community goes so slowly […]. But I wonder if all open-source projects will eventually go the way of all software. Upgrade after upgrade adds more and more complexity, to the point where the software begins to get bogged down under its own weight. How many open-source projects have you seen in which the code gets leaner and meaner rather than fatter and fatter?” (John Dvorak, PC Mag, 2007)

Example of a typical PD patch.

I still gave Pure Data a go and, after just about three weeks of trials and errors, I decided to build a simple FM synthesiser with a few additional features. Besides having to download three different versions of the software before I could stick with a definitive one (Pd-extended in my case), everything else went fairly smoothly.

For the core of the synth, the Frequency Modulation, I took one of the built-in Pd examples as a first building block and created the rest from there.

Screenshot of my first Pd Patch

The synth features a table (pitchmod) modulated by two frequencies, Modulation deptht and Carrier frequency, through multiplication and sum of numbers to the original wavetable. The signal is sent to the oscillator, which output is split into two: while one signal goes into the autopan subpatch — responsible for shifting the audio from left to right at a controllable rate — the other goes into the next multiplication object. I’ve also created a simple dry/wet slider that controls the depth of the auto-pan.

Auto-pan patch

Before the signal is sent to the final output, this is directed through the freeverb~ object, a Pd in-built reverb with some controllable parameters. Final touches are the visualisers for the resulting waveform, as well as RMS meters, play and mute buttons.

After all, I’m quite satisfied with the results. The patch does what I’d expect it to do and there are no unwanted clicks and pops (I’ve done a good amount of work with line objects!). However, the synth still lacks a few fundamental functions that I am planning on studying and implementing soon, such as the option for playing notes trough external midi, randomising parameters, and saving presets.

The patch can be freely downloaded here. Feel free to test it out and make upgrades.


Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

Using JavaScript and HTML to build a collection of Sound Trademarks.

“(h)over.me” is an ongoing collection of sound logos and sonic trademarks built out of a simple idea and a willingness to learn more about coding with CSS and JavaScript. Currently counting just more than 30 elements, the page is designed with interaction at its core. Visitors are given no implicit instructions on how to navigate the work because of its practical immediacy: hovering over the text — or clicking on it when on mobile — will highlight the name of a brand/company/organisation and play the audio sample of its relative sound trademark.

Possibly, over the next few months more content will be added. Some other features currently under development are:

  • A shuffle function that randomises the order of the words each time the page is reloaded.
  • Cross-fades between sounds.
  • A search feature.

UPDATES: Due to server issues, this project is now discommended and cannot be accessed anymore.

Here you can take a look at the HTML behind (h)over.me — it includes JavaScript functions to play and stop audio, basic CSS styling, and HTML5 <audio> elements (thanks to instaudio for the free hosting):


Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

What it’s like to use Facebook without numbers.

5 years later and Demetricator add-on is still key to productivity.

How Ben Grosser’s Facebook Demetricator works (Before and After)

Popularity on social networks is addicting. Those at Facebook know this well. It’s the reason why every post, share, notification, and interaction we experience on Facebook is accompanied by metrics: numbers that show how many people have interacted with us, or how many new friend requests or notifications we have received.

From a practical perspective, metrics are rather useless. We don’t need to know when exactly a friend has shared their last post and how many people have liked our new profile picture.

Or do we?

It all comes down to social interaction

A recent report by GlobalWebIndex shows that the top 3 reasons for using social media are staying in touch with what your friends are doing (42%), keeping up-to-date with news and current events (39%), and filling-up spare time (39%).

Most of us use social networks to connect with friends and share with them our achievements and, sometimes, pitfalls in life. We want others to know where we’ve gone on vacation this year and what song we liked on the radio the other day, while also keeping ourselves updated with what’s going on around our area and beyond. The greater the response, the more motivated we feel.

On this matter, Facebook developers are playing with our self-esteem, constantly making us conscious of what we’ve missed and what we’ve gained through metrics, a careful design choice aimed at increasing interactions with the website, other people, and companies through advertising — and here’s where Facebook revenue comes into place.

Facebook Demetricator

Quality over quantity

5 years ago, Benjamin Grosser — artist and faculty member at the University of Illinois — published a tool that would wipe away all Facebook metrics and replace those with less quantifiable data. The Facebook Demetricator plugin can replace, for instance, “51 people like this” with “People like this”, or [person] posted this “2 hours ago” with “Recently”. In an interview with arts organisation and new-media platform Rhizome, Grosser states:

“Would we add as many friends if we weren’t constantly presented with a running total and told that adding another is “+1”? Would we write as many status messages if Facebook didn’t reduce its responses (and their authors) to an aggregate value? In other words, the site’s relentless focus on quantity leads me to continually measure the value of my social connections within metric terms.”

Originally released as an open source browser extension, it is still under constant development by users trying to keep up with Facebook’s mysterious news feed algorithm.

Quality instead of Quantity (Facebook Demetricator: before and after)

How the software works

On a simplistic level, the Demetricator plugin “runs within the web browser, constantly watching Facebook when it’s loaded and removing or replacing the metrics wherever they occur. […] The demetrication is not a brute-force removal of all numbers within the site, but is instead a targeted operation that focuses on only those places where Facebook has chosen to reveal a count from their database.” (Ben Grosser)

In order to efficiently search the site’s HTML for any metrics, the Demetricator makes extensive use of Javascript libraries. This does not interfere with Facebook delivering data to its users because it runs above every other layer of the website.

The source code for the software is open source and available on GitHub.

Is the Demetricator a tool for me?

I found out about Grosser’s project just this week and was instantly eager to try it out myself and see how the experiment would have turned out in my case.

As a heavy social media user, I spend on average more than 1 hour a day between Facebook, Twitter, Instagram and other platforms. Anything that is designed to make my eyes shy away from social networks can only be openly welcomed.

After a couple of days using the Demetricator, I found myself reacting less to posts and actually focusing on what people would write or share. Like counts and timestamps have demonstrated their inutility to establishing meaningful connections. That being said, I will be definitely sticking to it, at least for a good while.

Ben Grosser’s latest Facebook interactive tool is called Go Rando: a browser extension that automatically chooses for you one of the six Facebook reactions each time you react to a post. Find more about Ben’s work on his website.


Francesco Imola is a London-based musician, photographer, and Sound Design student at the University of Greenwich.

http://francescoimola.com

ASCII art is fun

Filling the blanks with character(s).

Screenshot from “whorunow”, ASCII piece inspired by JODI

The American Standard Code for Information Exchange, abbreviated with ASCII, was designed in 1963 to be used with teletypes. A few years later became the Standard Code for Information Exchange for all computers in the United States. Although new character encoding schemes — such as Unicode, ISO/IEC 2022, or Mac Os Roman — have since been introduced, ASCII still remains an internationally accepted character code for the interchange of text in the electronic domain.

When did ASCII become art

ASCII artworks are probably something we associate with less-known internet forums and obscure Read_me files. Often used to refer to all text-based visual art, “ASCII art is a graphic design technique that uses computers for presentation and consists of pictures pieced together from the […] characters defined by the ASCII Standard”(Wikipedia).

Since its early uses, when printers and emails still lacked graphics abilities, ASCII art has gone a long way. Today, the aim of artists like Andreas Freise at asci-art.de is to collect and catalogue a number of text-based visual works which have never before experienced public recognition . ASCII artists have not yet made it to physical art galleries because of a profound connection to the net as original exhibit space. In addition, due to ASCII’s easily editable nature, the artist signature gets often lost in the way, which makes it difficult to get to know the people behind the canvas.

My attempt at ASCII art

I approached the ideas behind an ASCII artwork from a contrasting direction to most net artists. While text-based pictures are made to be seen from a distance because of the object they represent, we rarely appreciate ASCII in detail. With whorunow, I wanted to draw the user’s attention to the shapes of symbols and letters — which more than often are typed using a monospaced font that retains its space between characters such as Courier New — as an homage to both typography and digital designers.

First step to creating my own ASCII piece was processing a screenshot of my Facebook profile through Picascii. Tools like the this let users upload their pictures and then automatically convert pixels to ASCII characters through recognition of luminosity and pattern complexity in an image. The resulting text-based image can be saved as .txt file for further editing.

Here, I used my Facebook profile as a canvas to represent people’s image of their online identity: a mirrored version of their persona in a constantly changing state, unconsciously reflecting an inborn search for new interactions.

Second step was creating an HTML page where to link my piece. A very simple structure was necessary, with the only addition of the <pre> tag. This tag is useful for formatting text that needs to retain spaces and line breaks as it is written, and it is the key element to display ASCII art correctly on a web page.

Overview of the code behind “whorunow” (continues to the right)

Set the monospaced font to a pretty big value like 12px or more and your ASCII is displayed as if it is being zoomed in (mobile browsing may vary, especially on iPad), letting you move around the page in any direction and actively explore the artwork. Key element to this piece is the addition of text, difficult to spot amongst the myriad of characters on the page. I believe it makes the experience engrossing, as people will scroll through the canvas in search of something, that may or may not be there.

Take a look around whorunow here.


Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola

What I learned #01

Building a “program” without code

As a first year university student there’s a lot going on in your brain. Strong expectations and mixed feelings arise as you walk into each new class. Foreign faces, and maybe some familiar ones, you’d have to approach, interact with, and make connections.

Last week Creative Coding class was all about making connections. We — as a group — were asked to describe an everyday action or situation as if it was to be executed by a computer program without the use of any code nor technical terminology. Plain, simple steps. Written down and then reenacted in form of performance, which would have given us the opportunity to see the process in action, and perhaps pick up on errors or steps we didn’t think of.

We thought survival was an interesting theme to work on. Intended as victory upon a lifelong fight between individuals.

Presented with an external attack, an individual can — at a very simplistic level — either fight the enemy or fly away. Choosing to fight could result in two different outputs: victory or death. However, the individual also has the option to run away. Despite the hiding skills, no species has ever made it on this planet without fighting for survival at least once. In such case, at some point the individual who has run away will eventually incur in another fight without escape as an option. For both instances, if we assume that winning a fight equals survival, then our sequence would keep running in an endless loop until the energy of the individual is exhausted. When death occurs, the sequence would stop running. A simple, logical process, which in reality is actually affected by an endless number of variables.

After all, it posed challenges to how we think of computer programming. Coding is nothing but directing an orchestra of bits, with data as instruments. The only difference? Machines are the best trained players you can ever find and they are never wrong. They respond to what we tell them in ways we can predict, manipulate and make work for our own purpose.


Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.

w. http://francescoimola.com/

tw. https://twitter.com/francescoimola