Esotropiart

Most forms of design deal in building blocks of rectangles and squares. Even if an irregular shape is added to a drawing, the computer still considers the shape as within a rectangle. The top left and bottom right coordinates or its size "within a box" determine where each shape displays on the screen or in print. The composite drawing is also contained inside a rectangle. We call these screens, pages, windows or the canvas. Virtually every physical display device and every software app is also contained within and formed by many rectangles. Everything in web design is rectangle: always has been, perhaps always will be. Even a circle is a square with extremely rounded corners using CSS rules.

For decades rectangles have bothered me, particularly in design. Granted, they are very familiar to people, and meeting expectation is very important in design. Fringe designs that break the mold are likely to confuse users. We are stuck with rectangles for the foreseeable future. The latest developments in CSS still concern rectangles. Flexbox, grid layout... rectangles.

A side story, but I'll get back to rectangles...

My life is very, very boring right now. I have no one to hang out with or talk to regularly. No significant sentient presence in my life. What I do have is mostly virtual communication via phone, chat and email.

Perhaps my closest "friends" right now (besides my dearest pen pal of course) are fast food employees. I eat at the same places so often that my experience resembles the old TV show Cheers, where everybody knows your name. This happened to me a lot in Beaverton too. Amina was my all-time favorite at Subway, but most everyone there knew me too. Now I frequent Wendy's because of their 4 for $4 deal (can't afford to eat anywhere else). Some of the Wendy's employees that know me are Katie (sp?), Caleb, Gary, Tailor, Matthew, Peiton, and a few others whose names are escaping me.

In my boredom I created a short-lived form of entertainment to further elevate the fun of visiting my Wendy's friends. Instead of giving my name, I gave them a weird word to call out for my order. First was pegasus, then came rectangle. Caleb got Ronald Regan, but I think he might be too young to know who that is. Rectangle was very well received. I couldn't top that, so the fun ended quickly. Besides, since most know me, they can skip my game and call me by name. So yes, even the fast food experience is all about rectangles.

Now to the meat of the post. Tonights changes to the website are...

1. Artwork created using multiple art media were added to multiple galleries. Formerly I created a Mixed Media gallery to accommodate this, and it will probably remain. A few days ago I enhanced my gallery script to keep navigation within the gallery instead of jumping around when encountering art existing in multiple galleries. The web is generally stateless, so no information is passed from page to page. I want to keep my url strings minimal/clean, and I'm not currently using any AJAXy stuff. Therefore for my script to remember which gallery to remain in I had to make use of session variables. Not my favorite solution, but web development always feel like hacking junk together anyway. Fits my style because I'm not the most organized person.
2. Due to the change above, the total number of art was suddenly way off. To avoid an unnecessary database query just to count the art records, I was calculating the total by adding up each gallery as I looped through to build the gallery side navigation. Now that a single image can be in multiple galleries, the sum became artificially inflated. Tonight I wrote a function to directly query an accurate total art count.
3. Removed Miscellaneous gallery. Created and populated new Paint gallery. Painting scares me, so I try to avoid it. I have struggled through a handful over the years. I'll add them to the new gallery when I find time to locate photos of them. So much to add, so little tae bo.
4. Added a CSS zoom on hover effect for image tiles.
5. Tonight's biggest visual change relates quite directly to rectangles. A few hours ago the art gallery tiles displayed images in their native aspect ratios. I am using CSS3 columns, and I allowed the varying rectangle images to responsively fill the columns naturally. This began to bother me. If the grid of images is large (like 30+ tiles), this method looks ok. Unfortunately it doesn't look so great with small numbers of tiles. The bottom edge of the grid is the most irregular, and it gets worse (and better) as the columns respond to different browser widths. Therefore I used some CSS trickery to force all the art tiles to be contained in perfect squares. The images are chopped off around the edges, but I don't see that as a problem. Clicking on them reveals the full rectangular artwork. The perfectionist in me wants to add a field in the database for "focal point coordinates" so I can shift each image inside its square container so the best sections of imagery aren't cropped awkwardly. But I probably won't go that far.

I'm not a huge fan of this squares layout. It is pretty boring and without variety. However, its flow is easier to predict for varying width responsive layouts. If I don't lose motivation in this hobby soon (one can never tell with my changing moods), my pipedream is to create a layout with clean edges like the cover image for this blog post. In such an arrangement, each image can retain its basic aspect ratio and orientation (portrait, landscape and square). The major challenge is to write an algorithm that fits together a group of unpredictable image sizes with no irregular edges or gaps between images (Google Photos and Flickr meet this challenge well). The challenge is further increased as the layout changes for various device screen widths.

All this reminds me of the old sliding block puzzle games. My grandpa once had a bunch of those tactile puzzle games, and I would always gravitate to the end table with its game drawer in the living room (good memories). Rush Hour is perhaps the most famous game reminiscent of my rectangle layout challenge. The hollow, colored plastic pieces didn't appeal to me as much as Grandpa's similar (and simpler) wooden block sliding game. It looked similar to the squares and rectangles in the illustration above, and the goal was to get the big rectangle out by sliding the pieces around.