wmmead logo

Art, Native to the Web Browser

These are my experiments with JavaScript and recursive programs to create random designs on the screen. Can programming lead to art? I think so, and if you look through the pieces displayed here and understand my process, I hope you will come to understand the expressiveness of this work.

I am interested in using the medium of the web itself to create art. While exploring concepts such as randomness, infinity and freedom, I am creating these pieces with elements in HTML, CSS and JavaScript. The browser is my canvas and while this work inspired by many artists, it’s not shown on the web, it’s made of web elements.

The introductory video in this section can give you a good overview of the project.

01

example 1 image

My first experiment randomly places boxes that are black with various amounts of opacity, making some of the boxes appear grey. This is where my work starts and if you want to see the simplest code and the germination of my ideas, this is the place to start.

Read More View 01

02

example 2 image

For the second piece, I decided that black and grey were a bit too limiting, so I added a color scheme as an array of colors that can get chosen randomly each time an element is added.

Read More View 02

03

example 3 image

I enjoy the angles of the rectangles and they tend to generate a lot of very dynamic compositions, but I wanted to add a softening effect, so for this experiment, I added random varying amounts of roundedness to the corners. However, I found the shapes rather disturbing.

Read More View 03

04

example 4 image

I decided that the abrupt addition and removal of elements from the page could be smoothed out with a fade effect. So 04 integrates a fading in and fading out function. These elements fade to full opacity, which also contributes to a slightly different look.

Read More View 04

05

example 5 image

I wanted to try to see if I could get some curves back into the design, so this one brings back some randomness to the corners, but the program only effects two out of four corners, so it is not as pronounced as before. I still don't like the shapes it produces very much.

Read More View 05

06

example 6 image

06 goes in a different direction entirely. Instead of adding boxes to the page, elements with a random letter are added to the page. This is a way of gettign some curves that are nicer than the random corner radii, and provides a whole new avenue of exploration.

Read More View 06

Project Videos

Watch this video to find out more about the artistic goals of the project.

This video looks under the hood at some of the ideas behind projects 6 and 12.

This video looks under the hood at some of the ideas projects 13 and 16.

07

example 7 image

I wanted to get the random amount of opacity back into the project, so for this project, I updated the functions to allow for random ammounts of opacity.

Read More View 07

08

example 8 image

Project 08 is not a very big step forward. For this one, I continue to work on the random anounts of opacity, giving a 3 to 1 chance that the shape will be fully opaque.

Read More View 08

09

example 9 image

09 includes multiple color schemes for the first time, since the project started. When this program runs, it picks a random color scheme then sticks with that color scheme until the user refreshes or reloads the page.

Read More View 09

10

example 10 image

I wanted to get some curves back into the project, so #10 includes a 30% chance of drawing a circle instead of a rectangle. This seemed like a good amount of circles to rectangles to me, aesthetically.

Read More View 10

11

example 11 image

Since making 06, I had inteneded to bring typography back into the project, and it enters here with #11. Now there is a 40% chance that a letter will be added to the compostion, leaving circles at 20% and rectangles at 40%.

Read More View 11

12

example 12 image

For project 12, I decided to persue adding words to the composition. I found a list of over 5000 most used words in the English language, and added a 20% chance that the composition will add a word pulled from the list.

Read More View 12

13

example 13 image

This project makes a small but important change — the potential selection of a new random color scheme at the end of the fade out process.

Read More View 13

14

example 14 image

Randomizing the potential for getting a box, circle, letter or word seemed like the next logical step. Doing this provides for a greater diversity of potential designs in the long run.

Read More View 14

15

example 15 image

This version starts brining in potential borders on some of the box elements. To start there is a very simple small variation that could provide a border. More variation will come in the next iterations of the project.

Read More View 15

16

example 16 image

Big changes come in for how the program is structured in order to lay the ground work for more varied types of elements to be added to the canvas. Rectangles have a variety of border options.

Read More View 16

17

example 17 image

Project 17 brings borders to circles that make the circles look like they have been split in half. This version will generate a lot of them so you can see how they look.

Read More View 17

18

example 18 image

A culmination of all the work with borders, plus eight new color schemes for even greater variety. This is where the design and programming start to become fairly sophisticated.

Read More View 18

19

example 19 image

After putting this project aside for a year, I have returned to it with a new eye. This first step is modest, adding gradients to the mix some boxes and some circles will have gradients.

Read More View 18

20

example 20 image

This version removes the random rotation for each element. It sets a rotation at the beginning and all elements rotate by that amount, until probabilities reset. It also includes the futura font and I adjusted the likelihood that it would add more items to the screen before removing items.

Read More View 20

21

example 21 image

The main difference on this version is the switch to google hosted Montserrat font instead of self hosted futura font. Also further adjusting the chances that more elements will be added to the screen, before the removal process starts.

Read More View 21