Net Art

How I helped create a generative audiovisual app that runs in your browser

This past two months have been nerve-racking. But we’ve eventually created something to be proud of.

A group of four undergrad students. We’ve build a net artwork, or as programmers like to call it: a web app.

We named it avtest. In a nutshell, avtest is an interactive multimedia web app that gathers textual data via the YouTube API from either predefined or user-selected videos to create generative music and visuals. It’s still a work in progress*, but it’s near enough to completion to be shared to with everyone.

*It works in almost every aspect but its behaviour changes independently from platform to platform.

What does it do

On the surface, the artwork generates visuals and music when clicking on one of the 5 checkboxes or when inserting a valid link in the underlying text-box and checking the relative checkbox to its side. Each checkbox is “connected” to a YouTube video selected by our team. The text-box + checkbox option instead allows users to insert their own link to any youtube video; this has to be a special API link formatted through Google’s YouTube Data API platform. We imagined most people would not be able to retrieve such info, so we’ve added our own links to make the artwork function without much effort.

The 20 most-recent comments from a YouTube video are displayed in a random order below the group of checkboxes. In a similar way, the “waterfall” of letters is generated using random characters from a random comment among the list of 20. The sound composition that starts about 2–5 seconds in (performance upgrades are still on our to do list!) is also generated using text from the comments, first converted into ASCII values and then into notes playing a synthesisers I personally built using the Web Audio API and other Javascript tools (libraries).

Checking into the “About” box will take you to another page where some info about our team and the project are shown.

Details and code

I created and programmed the sound composition and designed the website (HTML, CSS, text, DOM elements, etc). The rest of the team has worked on setting up the data-retrieving system and designing the visuals.

The music composition is created using two javascript libraries: Tone.js and tonal. I have used Tone.js to build the sound of the synthesiser playing the notes. It’s a polyphonic synth with long decay and sustain. A chain of effects — delay, reverb, compressor, limiter — has been added also using the same library. I then created a pattern elements responsible for playing the sequence of notes. Such sequence is generated using of the YouTube comments as input and the tonal library to convert number to musical values.

The list of comments is first “translated” from an array of strings (text) into numeric ASCII values (numbers) and then scanned to find the most recurrent number — which happens to be a value between 0 and 127. Such number is converted first to MIDI and then to a note value (C, D, E, F …) through tonal. From here — using sorting tools, plenty of for loops and arrays, and a list of all possible scale modes, I build a system that automatically defines a custom root note and a scale mode for every input (API link). Such scale is eventually played by the pattern element mentioned above so that sound can be heard on the page.

An almost transparent ellipse shows up when the synth is finally loaded and is playing.

Elements of the visuals and the DOM design may not work/display properly at first try nor instantly. We are not all professional coders and our experience in front-end dev is limited — hence many improvements are still to be made. The project has not yet been tested on every current browser and device. The audio does not work when the site is open on Internet Explorer (IE doesn’t support the Web Audio API).

The entire javascript code, including sound and visuals, is accessible here: https://github.com/francescoimola/avtest/blob/master/machinemusic.js

and here is the main Github page: https://github.com/francescoimola/avtest

> The artwork is accessible here.

Contributors:

Francesco Imola : design + web audio 
Jameel Knight : API + visuals 
Anthony Luc : visuals 
Ryan Nguyen : visuals


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

website| twitter | instagram | linkedin

Internet art is more alive than ever

Digital galleries, online trends and the post-internet world.

Take a peek at Rafaël Rozendaal’s website and you’ll instantly get captured the myriad of micro internet artworks the artist has shared with the world. Today, his website attracts 50 million visits per year.

But, why have I never heard of net.art before, you may be wondering?

You have probably seen iterations of Net Art — a term coined by Sloveian artist Vuk Cosic in 1995 — at least once in your life, but you’ve never imagined it to be as valuable as a Dalí painting. Internet art had an hard time trying to be considered as much as an art form as that which you can find in traditional brick-and-mortar galleries.

Heath Bunting, Irational.org

Internet art was a naive, vaguely defined, art trend that started out in the second half of the 90s. It has its roots in what we now know as Networked Art — even before the advent of the internet, artists were experimenting with electronic interconnectivity (e.g telematics, kinetic art, video art, and conceptual art).

Net Art often evaded museums and galleries and appeared exclusively on the internet or though other web protocols. The Internet was still relatively uncluttered at the time and very few people associated with art institutions were making use of the world wide web. This is one of the reasons why internet art never really crossed the boundary from experimental to mainstream practice.

An important reading on the history of Net Art is Rachel Greene’s Web Work: A History of Internet Art. It includes insights into pioneering examples of Net works by artists such as Jodi, Olia Lialina, Mongrel, and many others.

Jodi — %GoodTimes´

I believe Internet art, after having been overlooked for too long because of its intrinsic portability, to be now more alive than ever. The boundaries between what can and can’t be in a gallery have faded and artists can finally embrace the power of interconnectivity to form their practice. The internet as we experience it today has become canvas to hundreds of non-traditional concepts and ideas. It’s the era of not-very-well self-defining post-internet art.

While Net Art of the late 1990s used the Internet primarily as a medium, post-internet practices build on those earlier experiments using both online and offline formats like social media, mobile technology, digital branding, and infrastructures.

Cory Arcangel — Photoshop CS: 1060 by 2744 centimeters, 10 DPC, RGB, square pixels, default gradient “Spectrum”, mousedown y=1800 x=6800, mouseup y=8800 x=20180. 2015

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