Creative Coding Lab

Link to Final Projects:

https://editor.p5js.org/tina06c/sketches/dAiK_crLr

https://editor.p5js.org/tina06c/sketches/_q5qmTxFa

https://editor.p5js.org/tina06c/sketches/LjicPVOK5

https://editor.p5js.org/tina06c/sketches/8QHZa0eOT

https://editor.p5js.org/tina06c/sketches/rDw1sXFw6

https://editor.p5js.org/tina06c/sketches/fpd0uCi-i

https://editor.p5js.org/tina06c/sketches/5GGE_mB2U

https://editor.p5js.org/tina06c/sketches/3dCHb-nCs

https://editor.p5js.org/tina06c/sketches/wjqSjWDVA

 

Description:

For this project I created 9 still images with repeated visual effects through the use of nested for loops. I experimented with the use of the random() function within various variables used in the for loops and also by moving specific functions at different levels of the iterations to see the effect. 

 

Final Result:

 

Coding:

This assignment was really less of trying to achieve a picture that I had in my mind. Rather, I started with my nested for loops for making the rows and columns of circles and started from there. I first attempted to play around with the color so I moved the code fill(random(255), random(255), random(255)); within the different layers of the for loop to see which circles get colored. For the other attempts I tried changing the shape to rectangles instead of circles and used if statements to only have the circles drawn during a specific number of i that I wanted. 

I referenced link 1 to understand how cosine and sine works within angular motion. Link 1 was used to generate the colors needed. 

 

Link 1:

https://www.rapidtables.com/web/color/RGB_Color.html

 

Reflections:

Drawing by hand from observation is definitely easier to find where and how we want t0 draw specific figures. However, with a computer it is hard because we need to first figure out the code for the specific figure we want. Nonetheless, drawing patterns with computers is a lot easier because we don’t have to repeat the same task over and over again, rather the use of nested for loops helps us achieve that. If we were to draw a pattern by hand, we would have to draw the same pattern multiple times.  In the repetition I’ve manipulated the specific iterations at which my shapes get drawn and the color and when the color appears in the pattern. Nested for loops are definitely the key to drawing a good generative patterns. 

Link to Final Project:

https://editor.p5js.org/tina06c/sketches/_zEcwImlJ

 

Description:

This is a generative art where two types of motion was used to create motion in shapes. Angular motion is used in the little circles and the other shapes are moving back and forth through the use of sine and cosine functions. 

 

Final Result:

 

Coding:

The following code is the most important in my code because they are in charge of all the motions that occur. The srx variable is in charge of moving the shapes side to side and sry is for up-down motion. The cosVal is in charge of angular motion in the generative art. 

let freq = frameCount * 0.05;

// motions
let srx = 25 * sin(freq);
let sry = 50 * sin(freq);
let cosVal = 50 * cos(freq);

 

I referenced link 1 to understand how cosine and sine works within angular motion. Link 2 was used to generate the colors needed. 

 

Link 1:

https://editor.p5js.org/MOQN/sketches/9tt43DeDY

 

Link 2: 

https://www.rapidtables.com/web/color/RGB_Color.html

 

Reflections:

 

I used sine functions for sideways and up-down motions and combined those sine functions with cosine functions for angular motion. The functions were not difficult for me to understand. I was able to generate the motions that I wanted without much struggle. I chose not to use the map() function but I do understand the concept of map(). We can use the map function to change the values of a variable within a range to become values part of another range.  The sine function allows our shapes to move up and down when we add the sine values to x and y coordinates. However, to create angular motion we need both sine and cosine value. By adding a cosine value to either x or y and adding sine to the left over coordinate that is not being added to cosine we get angular motion. Hence, the inclusion of both up-down and sideway motion creates angular motion.

Final Project Link:

https://editor.p5js.org/tina06c/sketches/-UPf5vBMD

 

Description:

This interactive project is a puzzle that the user must solve by typing on the keyboard. A tangram is a shape puzzle where the user must figure out where each shape should land on the big square. For this specific puzzle, the user must figure out which keys will return which shapes to the square. There is a hint that shows when the mouse is hovered over the big white square. When the user presses on the screen, the color of the shapes and background changes. 

 

Screen recording of project:

https://drive.google.com/file/d/1vj4KnBhHE9mVjsQjaiTpkHt3UpASUt88/view?usp=share_

 

 

Coding:

My thinking process was to first decide on the rules of the puzzle that I was going to do. After coming up with the basic rules I then decided to first draw lines to see where I wanted the specific shapes to be at on my canvas. Below is my first attempt:

 

I had no trouble with the rest of my coding after I started to officially draw shapes and code for their movements on the canvas. I used link 1 below to find the code for specific colors and I used link 2 below to find functions to draw the shapes I needed. 

 

Link 1:

https://www.rapidtables.com/web/color/RGB_Color.html

Link 2:

https://p5js.org/reference/

 

Reflections:

I used global variables in my code in order to establish the coordinates of my shapes. The use of global variables made it easy to manipulate and change my code according to how I wanted the shapes to move on my campus without too much hassle. In my code I used if statements to detect what keys were pressed and if a specific key was pressed then a specific output would be displayed on the screen. In addition, if statements were used to change the background and shapes’ colors and I used if statements to detect if the mouse was hovered over the big white square. The difference between key and Keycode was that key is related to the specific character keys which Keycode are all the other functional keys of our keyboard. 

Link to final Project’s code:

https://editor.p5js.org/tina06c/sketches/-tceDzTP2

Description: I attempted to recreate a photo of a building at the JinYao Residence Area using the tool P5.

Final Sketch                            Original Photo

Coding Process: 

So I first started out with a hand-sketched version of the photo that I took and it looked like this:

 

After that, I started to draw in the details of the building and labeled every single line with a letter so that I won’t get lost as I coded (photo below).

 

After I labeled the lines it was time to sketch them on P5. The hardest part of the coding process was to guess where a new line should start and end. It was difficult to find out the coordinates of the lines so I did a lot of trial and errors. 

In the end I was able to sketch out the whole photo line by line and it looked like this:

 

Link to first draft:

https://editor.p5js.org/tina06c/sketches/v8f032J3S

 

After my first draft I realized that it  was going to be hard for me to color in my sketch because I drew lines and not shapes. I searched the references of P5 (link 1 below) for a solution and found out that the beginShape() function allowed me to draw any shape I wanted as long as I knew the coordinates of the vertex. Hence, I started to draw shapes using the lines and coordinates I had already established in my first draft. After all the shapes were created it was really easy for me to fill in the shapes with the corresponding colors that I wanted. I searched up a website (link 2 below) that allowed me to come up with colors and returned the corresponding numbers to create that color.

Link 1: https://p5js.org/reference/

Link 2: https://www.rapidtables.com/web/color/RGB_Color.html

Reflections

I prefer using the reference over the exploratory programming because it is easier for me to understand how each function works by using the reference rather than trying to figure it out myself through trial and error. However, I use exploratory programming when there exists uncertainties in my code that the reference cannot help me with. For instance, when I was coding I often found myself exploring different coordinates in order to understand where each point lies on the plane. Drawing on a piece of paper was easier than writing the program in the sense that we didn’t need to find out the exact coordinates of where a shape or line should be on the plane. Finding out where each shape should land on the plane is very time consuming in the case of coding. When we draw by hand we are able to draw anywhere we want without second thoughts. Nonetheless, writing the program made coloring in shapes and drawing straight lines a lot easier which makes the sketch neater than hand sketching.  

For the Conditional Designers, their process in creating art was that each of the four contributors would use their choice of tool to take turn in creating a piece of art. They each have a set a rules that they must obey by. Similarly, artist Bernard Frize’s creations also involve the steps of meeting specific conditions and parameters. Before starting a work, Frize would first choose a way of working and follow his choices throughout his creation period until he gets a result. Hence, Frize’s end results are unpredictable as he himself does not set a goal in that. Moreover, as the article suggests, there exists a difference in the meaning of process for the artist and the designers. As stated in the text, “Process itself, then, is only for Frize, and to a greater extent his assistants, the almost passive execution of a plan where chance has a role to play” (Estèves 3). In other words, while Frize is strict about how his process of creating art should come through, he does not see a significance in the process itself. It is merely just a way of execution and effort that will guide him to a result. On the other hand, for the Conditional Designers, process “is a time for ‘relationship and change’” (Estèves 3). Unlike Frize, the Designers give more significance and importance to the process of their creations over the final result. They see process as not just the effort taken to make art but they treasure the change and the relationships created and shared during the process more than the final art. Nonetheless, their approach in creating art is one that I have never heard of nor tried myself during my creations. Most people like myself have a picture in mind when we start to sketch, draw, or create something. We never set up conditions for which we need to meet as we move towards the end goal that we already have an idea of. However, in their case, they do not have an idea of what their final result should look like. Rather they emphasize on how they should create their final product. As a result, the final appearance of the final product is usually random and unpredictable as there were no prior expectations set for the product. Hence, in this way, I think it is safe to say that since there were no expectations for how the result should look like these artists would not suffer from having results that never met their expectations. 

 

Rules for creation:

1. Gather 3 people to create the art
2. Each person takes a marker of any color (they can all take different or same colors)
3. Each person can only draw one shape (the whole time of the creation process) out of the three in the following list : circle, triangle, square (Ex. person 1 only draws square, person 2 only circles, person 3 only triangles)
4. Each person takes 1 minute drawing on the paper 
5. Take turns drawing until you have a city drawn on the paper

 

When devising my rules I first came up with the number of people who should contribute. In class we did a similar concept where we each drew lines with markers of different colors. Building off of that activity I decided to have my independent variables to be the shapes that each person can draw rather than marker color. The shapes I assigned are typical shapes used in architectures so I am looking forward to see how the artists would create the cities and infrastructures. In my mind I can sort of imagine what shapes can be used for what objects in the city but if I actually execute my process I am sure it would be different than what I have in mind because of the unpredictable factor of the other two partners needed for the task. The part of restricting one person to only draw one shape really makes the end result unpredictable.