This week went better than last week, my brain is starting to understand what code needs to be written to get the desired outcome. The Coding Train YouTube channel was a huge help in understanding the step-by-step instructions and then implementing his steps in the p5*js online editor to see what happened. The p5 online editor was a huge help this week in playing around with my design first before doing the final tweaks on my desktop in GitHub. I also came across the Happy Coding website and this website was helping in walking through some tutorials to understand how the code works.
Day 1: Emoji – this exercise was a lot of fun, but maybe over my head just a little bit since I picked the heart emoji to replicate. It was very time-consuming since I used the curve Vertex to create the angles of the heart and had to figure out how to mirror the left and right sides of the heart. The purple heart means love and support and the growing pink heart means an outpouring of love or joy. The pink hearts took me a lot of time to create the 3 hearts layered on top of each other, with the 1st and 2nd heart being smaller than the 3rd heart, I’m still not entirely happy with the curves of the 1st and 2nd hearts, but I couldn’t quite find the right variants.
Day 2: Circle Gird – this was a really fun exercise that I played around with way too much, but it was fun to try out different shapes and figure out what random was going to create with colors – I can understand why people like this kind of code as art – reminds me of filling up balloons with paint, attaching them to a board in a grid pattern, and then throwing a dart at them to create a beautiful paint masterpiece. I created the second grid with random colors using the quad shape and then adjusted the x and y coordinates of the quad until I created the two triangles that faced each other and kept the random colors for the fill and stroke, but kept the stroke weight at 5 instead of the weight being random to create a more uniform pattern.
Day 3: Quilt Patterns – I got lost a little bit in the International Quilt Pattern website because there were so many beautiful quilts – some I had grown up seeing, but others were new to me. I ended up choosing the Squares pattern and interpreting my own pattern of colors by using squares and rotating them. I also added a border around my pattern and then watched the Coding Train in figuring out how to use if and else to change my colors. For the second variation, I couldn’t find the exact quilt pattern on the International website, but I do remember this quilt from my childhood. The squares pattern has a lot of different variations, which allows quilters to be very creative with their colors and patterns. Figuring out how to replicate it was a little bit of a struggle, but after adding another if and else for the x and y and then adjusting my % number, I was able to recreate another variation of the squares pattern. In looking at the pattern below, I should have changed the 4 center turquoise blocks to another color – maybe the dark purple from the border or a lighter turquoise.
Day 4: Emulation – trying to choose which art piece to emulate, was very hard – and I couldn’t decide at first between Molnar’s 8 Orange Triangles, Cinq carrés rouges, or 18 bleus. I went with 18 bleus mainly because of the colors, but I also liked how clean the black palette showcased the blue squares in a very simplistic layout. I tried to re-create the square colors using an array to recreate the original artwork, but I couldn’t figure out how to get the code to work for each square, so I had to use the random option for the colors.
Final Project – Custom Pixels – this was very gratifying to accomplish once I got the basic code written and an image uploaded. I used a picture of a rose that I had taken in Seattle Washington a few summers ago at Point Defiance Park. I thought this picture would be able to provide a lot of creative avenues to go in from using shapes as pixels or changing the pixels to text because of the varying shades of greens, yellows, and pinks. I included 3 different variations below that I created before coming up with my final larger version in purples and blues below. The first version on the left used circles in place of the pixels and then in the middle, I changed the circles to the word “ROSE” which overlapped slightly. Then I started messing around with the R, G, and B colors on the right to help add contrast and kept the text closer together. The final version went higher on the B pixels than the R and G, I think looks better from a distance as the pinks in the rose and whites of the leaves just seem to pop better
