Art, Native to the Web Browser
The introductory video in this section can give you a good overview of the project.
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
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
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
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
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 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
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.
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
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 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
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
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
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
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
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
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
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
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
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
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
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
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