COSC 231 Project #1 Painting Mosaic

Date distributed: 31 January 2015
Date due:11 16 February 2015 (extra credit on 11 Feb)

Create a mosaic of a painting or photograph that is interesting to look at using divs and CSS styling.
See an example here. (Gaugin and me).

Choose a painting or picture.
Divide the painting into rectangular blocks that approximately captures the structure of the painting.
Show the rectangles overlayed on top of the original picture.
Style each rectangle separately to give an artistic interpretation of the original. When styling, you can use different colors, different images, the original image, parts of images, text.
Display (1) the original art, (2) the rectangles, (3) the styled artwork vertically or horizontally.

Use between 5 and 11 rectangles. The rectangles do have to cover the complete image.
Limit your color pallete for style="background-color: ... ", whether transparent or opaque, to between two and seven colors.
In the Gaugin example, I used four colors.
The three pictures must be arranged vertically or horizontally.
You must use both solid colors and images. The images do not have to be the original image -- though that is allowed.
CSS should be internal or external. Use inline CSS only when it is specific to the particular element -- that is, avoid unnecessary redundancy.
Upload the code (html and css) to /231/Projects/pp1.html, pp1.css .

Your choice of rectangles, colors, images and placements must relate to the original artwork in some obvious way.
Your goal is to create something people want to look at.
- People don't like too much complexity, for example, limit # of rectangles and # of colors.
- People like regularity -- for example, make your rectangles' borders line up.
- People like a little surprise -- for example, make one or two things different from the rest. E.g., the goose is replicated from the original in the example above.

Lay down and size the original image.
Lay down two "container" divs. Each container div has the original image.
The container divs have style="position: relative;"
In the middle "container" div, lay down the rectangles. Each rectangle is a div. The borders of the divs form the visual rectangles on the original image. Each rectangle div has style="position:absolute;".
Adjust the top, left, width, height of each rectangle div, one at a time. I did this via a combination of measuring (calculating) and trial-and-error.
Once the rectangle divs look good on the middle picture, copy the whole thing to make the third picture.
In the third picture, don't change any positions or sizes. Only change colors, opacity, text. If you want to put a picture in a rectangle, do NOT change the size of the rectangle div. You can use opacity:1.0 to completely coverup the original background image.

Hard copy of (1) html, (2) css (if external), (3) color screen shot of art.
HTML and CSS must have your name, course number, project number, original artist name and title of work, and source (URL, citation, or private collection) of original work.
Screen shot of art must have your signature on the bottom.

Choice of painting -- personally, I find strong colors and simple shapes make it easier to find rectangles. Mondrian would be boring -- don't do that! Kadinsky or Miro are too complex to be satisfying for this project. You want the composition of the original work to be obvious in order to make rectangle placement relevant.
I messed up on the borders a little. Notice the girl's head is not properly bordered. Also top and bottom have pixel width 4, but sides only have pixel width 2. That looks wrong.
Notice use of opacity to bring out the goose and girl.
The composition of the original picture looks very horizontal to me. That is reflected in my choosing the rectangles to line up horizontally,
Color choices, especially for lower right and upper left, were not too great. Decreasing opacity might have helped.
My use of text is minimal. Modern art seems to have a lot of text pasted around -- to my eye, more or less at random. More text or other visual effect (gifs? animated gifs?!?!?) might work.
I got crunched for time, so I did not optimize my div styling to reduce the line count. A good programmer WOULD HAVE AVOIDED unnecessary repetition.
From start to finish -- this took me about two and a half hours. K I S S !!!!