Blog

: Basic Blog

First I will test out my initial HTML understanding by adding a small JS project titled Eye Of The Beholder. Here is my Artist Statement:

This is the Eye of The Beholder. To see colour, we determine the reflected wavelengths of the light that falls into our eyes, here my monster reflects that process by pulling the colours from its world to see them. My monster is defined by its impact on the world, removing colour, but without the destruction it cannot see. Is it erasure? The shapes that the monster looks at remain, they are now tones of grey. When I see art, I too alter it and change it, I make copies, share it, it inspires me. This monster is art because it was to demonstrate that the alteration of art by people or processes can also be art. I was inspired by the Beholder a monster from the game Dungeons and Dragons a being that can alter its reality with its mind like my monster. The Obliteration Room, by Yayoi Kusama, a place where the participants use colour to create from a colourless space, also inspired me to explore the opposite effect.

: Adding Some Structual Elements

This week I have been going through the MDN HTML Tutoirals to aid in my fundemental understanding of the structure of websites. I wanted to start here instead of jumping directly into common web frameworks so that I know what the elements of those frameworks are doing under the hood.

: Adding Responsive Images

This week I am learning to add images using the img, picture, srcset and svg HTML elements. So Here I have added an image that will resize depending on the browser.

Tire tracks split a grassy field, forming a road that leading toward a city in the distance.

I also added some CSS into the document to try to make the nav bar and title more functional.

Adding An SVG

Today I added an SVG to the navigation bar in this website. This was to create a nice transition to the content of each page. I was introduced to the tool haihei which creates trasitional svgs for websites like this. I learned about this tool from the an excellent tutorial on adding curves to websites created by Jeff Delaney.

The colours on the website are a colour palette I created for the website using coolors. The website allows users to upload an image and then extract a colour palette from the colours in the image. I use the image of myself that is used in the front page of this website.

Finally I leaned about CSS layouts and used the flexbox layout to style the header above. This allows for the elements in the header to move depending on the width of the browser.

: Styling p5 Sketches

Last year I was introduced to p5, a Javascript library for creative coding. I really enjoyed the easy in creating creative artworks that the library enabled. However, I did not know how to insert the sketches that I had created into the DOM of this website. I discovered that I could place them into an empty div and then resize the canvas by referencing this parent div within the script. Then when applying a max width to the sketch it no longer overflowed the div.

For the sketch I was inspired to create a pattern visualiser. A friend asked for creative interpretations for the pattern AABBC, so I wondered how this pattern could be instructions for moving about a 2D plane. So I created this small JS proof of concept, setting each unique character to a unique direction and then running the pattern like dance instructions. Some good examples to try include:

Try it below.

Game Of Life Demonstration

Mobile Navigation Menu

The initial header for the website before this refactor included the navigational items in a simple flexbox list. The problem was that the header for this website was taking up almost a quater of the vertical space on a mobile screen. In addition to this I was experimenting with a sticky header meaning that a quater of the screen was always being taken by a header.

A solution that I have seen in many other websites is hidding site navigation behind an expandable menu. Many websites use a “Hamburger” button as the standard design language around these menus. My simple plan was to implement this menu such that it vertically expanded from the header.

The checkbox seemed the best HTML element to implement the toggling display of the navigation menu, having the associated checked pseudo-class. This was great for the ability to change the display type of an associated HTML element with just simple CSS. 

<input type=“checkbox” id=“checkbox”>
<label for=“checkbox”></label>
 
label {
  display: none;
}
label:checked {
  display: block;
}

So the menu worked and the flex box layout of the header expanded to contain the menu as required. But there was no animation, which meant a jarring appearance of the menu. Having the menu start from a height of zero then grow worked, but meant that the height of the menu had to be set manually. Thus, any changes to the menu will break the menu layout. To solve this I created a small JS function tied to the checkbox that collected the calculated height of the menu and then placed this in the style of the element resulting in a smooth transition.