Using the shape functions in p5.js that we learned in class, I created an abstract geometric piece of art based off of a landscape photograph I found online.
I started off by quickly sketching a geometric representation of the photograph. The photo I chose is already broken down into horizontally divided spaces: the blue sky, the yellow grass, and the green grass. I simplified these spaces into rectangles separated by solid color. The green parts of the grass were then taken into account; I represented these with long, thin rectangles.
I knew I wanted the tree to be cartoon like. I ended up abstracting the tree’s form into three parts: a rectangular trunk, two lines for the branches, and three circles for the leaves. The clouds were represented entirely through circles. I decided to play with transparency here because clouds are not solid. I wanted to allude to their wispy, semi-transparent nature so I set their opacity to around 70%.
The most time consuming part of this exercise was plotting out the points of where all these shapes are placed. I used graph paper and a calculator to make sure the pieces all worked together. I established a canvas size of 600×400 pixels because that was roughly the same dimensions as my original photograph. Next, I established a ground for the tree to sit on. I decided this would be 255 points down. The tree was where I had to be most exact. You can see from my sketch that I tried a few options out.
What I realized from this exercise is that sketching and planning where things lay on the grid is extremely important because you need to know what your end result is going to look like before you start entering in code. Without taking the time to measure out where the different elements will lay, it would be very hard to control what your image will look like in the end.