Week 1: Hollowed Decoration on the Wall — Repetitive Patterns Drawing

Hollowed Decoration on the Wall — Repetitive Patterns Drawing

Link to my sketch: https://openprocessing.org/sketch/1081542

        For this sketch, I choose a repetitive pattern on one of the buildings in my neighborhood for reference. Here are my reference photo and the paper draft:

        I decide to add some new patterns and colors to make it more visually interesting. 

Coding

 

Fabrication: Drawing Patterns

        I first use two for loops to generate repeated squares. Next, I add two rectangles that cross with each other and a smaller square in the middle in each of the repeated squares. Then, I align four triangles with the edges of the square and rectangles. Lastly, I draw four arcs in the middle of the smaller square.  At first, I try to use the mode function to center the patterns. But since the patterns are created in the for loops, errors pop up. So I switch to calculate the coordinates of vertexes and adjust the size of the square to make the calculation easier. Below is my draft:

        When creating triangles, I found that the vertexes of triangles are sticking out even though I made the correct calculation of their positions. I tried adjusting the vertexes’ position manually to make it look better. But at last, I choose to decrease the stroke weight. 

Fabrication: Exploring Colors 

        I want to apply a graduated color to the squares. Similar to the construction of squares and patterns, I associate the color parameters with “i” and “j” in the “for loop”. In this way, the color will shift automatically when the loop is run. 

        I try to adjust the positions of “i” and “j” and explore different combinations of the parameters. Since I want to apply gentle colors that shift within one color range (red/blue/green/grey), I did a lot of experiments to decide the coefficient before the “i” and “j”. Below are the gradients generated:

        Also, for the inner square, I reverse the gradient colors and to make the graphic more visually engaging.

Fabrication: Interactions

        In the reference photo, the wall and the patterns only have two colors — gray and white, which makes it look very dull. Therefore, I want to repaint the wall with colors to add some vibrancy. I create three buttons that will respectively change the color theme into red, blue, and green. I achieve this by copy-pasting the function that draws the patterns and adjusting their color parameters. And then I associate the function with the button. 

        However, this method of changing the color theme is very dull. It makes my code extremely redundant. I’m still exploring alternative ways (specifically, click_count function) that will make the coding more efficient and simple.   

Demo

Demo of the Shifting Colors

Images of the Four-color Wall

    

Refections 

        In this sketch, I explore the for loop as well as some drawing and button-creation functions. I successfully produce the patterns I want to generate and the visual effect is satisfying.

        However, I still have a lot of space to improve. Firstly, the efficiency of coding is not satisfying as the interactions are created by repeating the draw functions. Secondly, the grey color theme can only appear at the beginning, and after clicking the buttons, we can never come back to that theme. Thirdly, I only apply several polygons in this sketch, and I believe that I shall try more polygons and functions to make the patterns more interesting. 

        In the future, I will try to solve the problems mentioned above and explore more functions.

Reflection Questions on slides:

• Did you prefer exploratory programming, or using the documentation? Why? Could you imagine a situation where you would use the other technique?

I prefer exploratory programming because I found “learning by doing” is a more efficient way to learn coding skills. I will not remember the instructions on the textbook after reading but those functions used in my assignments are now imprinted in my mind. By applying the syntaxes to a specific problem and debugging, I can better command the scripting skills. To achieve my ideal, I have to self learn some functions that are not taught in class, which prompts the learning autonomy. 

• What are some ways (if any) that drawing on a piece of paper was easier than writing the program?

When the patterns are irregular and zigzagging, drawing on paper is easier than writing a program.

• What are some ways (if any) that writing the program was easier than drawing on a piece of paper?

When there are a lot of repeated patterns and the patterns are regular and symmetrical, programming will save a lot of work.