bradreeder / stained-glass-window

Stained Glass Window

Stained-Glass is a design experiment originally inspired by a pixellated stained glass window made by Gerhard Richter and video noise.

The page is currently hosted here: http://bradreeder.github.io/Stained-Glass-Window/index.html

What

Three column grid-design. Each box of the grid is composed of hundreds of smaller divs that intermittently change colour in a random pattern. When any of the coloured boxes are clicked on, that colour is removed from the overall palette. When all the colours are removed, the user can click again and it refreshes to its initial state.

How

Currently this is done dynamically. The entirety of the grid is generated by javascript and then coloured (through assigning the individual divs a random colour class) from a pre-defined array of colours. A timer is set so that every 100ms it fills again randomly from the same array. When one of the boxes is clicked on an event fires that removes that colour from the potential palette. When the colour array is empty it refreshes to its original condition.

Current Goals

• Use canvass/sass/css3 to create a rose-window
• and to add semi-circles to the top of the current windows to shape them more.
• Proportion the window's sizes better and perhaps increase their length so you can scroll down them.
• Work on more interesting colour patterns to implement.
• Look into Perlin Noise algorithm and processing

Stretch Goals

• Consider extending the basic design into an idea for a hypercomic.