Developing a web-based artwork during the Covid-19 Pandemic in 2020
During 2019 I became interested in using coding in my art practice to explore abstract imagery that I was using in my drawing and painting practice. I began using Processing, an open-source graphical library and integrated development environment (IDE) which was developed at MIT to enable artists to develop software projects. I developed some basic programs using modular graphic element to generate animations that can be manipulated by changing some basic variables. My goal was to eventually create a simplified visual equivalent of a drum machine which would create shifting visual patterns that could manipulated by a performer like a musical instrument by manipulating a USB midi controller.
Around about the time I began experimenting with coding, I was also thinking back to an earlier artist's book I had made and of the possibility of revisiting it in a new format. The book was based around pairs of binary oppositions such as "life" and "death". For each pair of antonyms a thesaurus was used to build a chain of synonyms to bridge the gap between them. Starting with one word the process was repeated until its antonym was suggested by the Thesaurus. At that point process was continued, without reusing any words, until the original word was returned to. These loops of words were presented in a circular format. I had previously considered the possibility of redeveloping this work as a floor-based installation and it now occurred to me that by adding motion it could be presented as a projection on the floor of gallery where the viewer could stand in the centre as words rotated around them like a whirl-pool.
I decided that rather than creating a very long video file it would make more sense to code an application that could run indefinitely without coming to the end of a loop as would always be the case with video. I originally attempted a version of the piece using Processing however it became clear that the level of computing power that the Processing platform required to display multiple animations was excessive and it was not a suitable means of realising the work. I discussed the problems I was having with a friend, Russell Davies, a software developer who suggested using CSS animation.
CSS stands for Cascading Style Sheets and along with HTML and Javascript is one of the basic technologies used to create webpages. While HTML is used to define the element on a webpage, CSS is used to control the appearance and positioning of these elements by applying a 'style'. CSS animations are an efficient means of create online animation by repeatedly updating the 'style' applied to a webpage element.
Once it became clear that the project could be developed using CSS I decided an online version of the artwork was worth exploring and would take me a step closer to realising a gallery installation as the website could be projected as an installation anywhere in the world. I originally chose the format of an A5 booklet because it enabled the viewer to rotate the work to follow the circles of text but also because it was an affordable and expedient way to distribute the work. An online version was a natural development of that way of thinking. I successfully applied to the Arts Council of Ireland for a Covid-19 Award to realise this project and was successful. Development began in early May.
There are many valuable free online web development resources which I relied on heavily during the development of the website. W3schools contains information on Javascript, CSS and HTML 5 as does Mozilla's MDN web docs. For more specific and challenging problems that can be difficult to resolve with reference material Stackoverflow is very helpful. Stackoverflow is a forum where questions can be posted and developers respond with answers. Before posting a question it is important to search for an existing answer. During my work on this project I did not have to post a single question despite having many as I was able to find the question had previously been asked and answered.Those starting out with Javascript will find the online tutorials at Codeacademy useful. The website was coded using the Atom text editor which is free though there are many alternatives available. While developing a web project it is essential to constantly check your work in a web browser. For this the best choice is Google Chrome due to it's developer tools which highlights errors occurring while running your code. It can also be used to preview what your website will look like on phones, tablets and at various screen sizes.
There were numerous time during the development of this project when I felt I was finished aside from a few tweaks only to find very significant amounts of work to do. The first time this happened I felt I would just need to make a few adjustments so the website would display well on a mobile phone however I realised an entirely different way of interacting with a work was required on smaller screens as the tappable areas were to small. This required the addition of a set of onscreen controls that appear on mobile phones but not on larger screens.
A low point in the development process came after having spent a couple of days successfully changing how the audio works on the website. This involved some major changes to the code. The site was working perfectly and I decided to make what I though were some minor changes to how some elements were positioned. The result was the entire website ceased to function. I tried to undo my recent changes to restore the website to the point where it was working correctly but was unable to and ended up going to bed at half 2 without having solved the problem. The next day I restored the website to previous functioning version I had saved which was four days previously. However I still had the code from the broken version of the website from which I forensically took apart piece by piece and added into the four day old version. Thankfully this rebuilding processing resulted in a rigorous reassessment and clarification of code that had accumulated piecemeal over a number of weeks and resulted in an outcome that was much improved.
This taught me a valuable lesson on the importance of version control. A version control system records changes to a file or set of files over time so that you can recall specific versions later. The most common of these is an open-source tool called Git. While developers often use Git by typing commands Github.com is a way to use the features of Git with a visual interface in browser. It is good option for non-developers such as myself. When using Github your project is uploaded to a repository on the Github website along with any explanatory notes you want to add. Each upload is called a commit and a record of each commit is retained. Should anything go wrong it is possible to access and if necessary restore an earlier version of the project. An additional feature of Git and Github is "branching". When adding a new feature to the site a new development branch can be created. This creates a parallel copy of the project where work can be carried out without overwriting files in the main branch and without affecting the live website. The development branch can be merged into the main branch when the new feature is complete. Onym is hosted for free by Netlify and any changes made deploy automatically once there is a commit made to the main branch in the Github depository.
My original proposal to the arts council involved only the use of animation but early in the development I decided I would add sound by recording myself reading the lists of words used in the piece. By clicking on the loops of text in the piece the user can turn on and off the audio tracks singly or in combination creating overlapping layers of words. I originally recorded the audio using Quicktime and the internal microphone of laptop. An advantage of the Covid-19 pandemic was the reduction in the number of cars on the road which made it easier to record audio. I did this at night when it was quietest and with my duvet over my head for sound dampening. The results were not bad however I realised that I could sync the audio tracks to the animation by coding a function that would monitor the animations and would trigger the appropriate sound when an animation began or repeated. This meant the length of the audio needed to correspond to the length each animation. I was able to borrow a Rode USB microphone from a friend for improved audio and recorded and edited using Audacity a free open-source piece of software that allowed for more precise editing than Quicktime's very basic trim feature.
The name of the original booklet was "Thesaurus Generated Word Loops" however I wanted to give the online version a simpler title not least to make the Url snappier. The name onym is a suffix taken from the words synonym and antonym and is derived from the Greek "onomo" meaning "word". The website went live in the first week of June and is now accessible at www.onym.ie. I hope to use the online work as the basis for a floor-based projected gallery installation in the near future.
A shorter version of the text was published in the Visual Artists' News Sheet in July 2020.
