Week 3 Homework Tae Nim 3170229



Influenced by Amy Goodchild’s Blog Post¬†

Before continuing my journey, I was inspired by Amy Goodchild’s blog post, ”¬†How Does it Feel to Make Generative Art?” I agree that the design process is a discovery rather than a creation. Therefore, I have been expressing my homework as a “journey” based on the “Becoming and Being Approach.” I saw the YouTube video by UI/UX designer that new artists tend to think the design process is something that creates a whole new idea, but in fact, good design comes from several trials and discovering the best match and connecting them like a spider with considering previous artist’s historical practices. Likewise, the journey we are stepping toward the future is a discovery since we believe in the potential of finding our custom-made way of becoming one.

Journey Based on the process that Goodchild Took

Based on my previous post, I also started with an idea based on a specific image: a galaxy. After I had set the concepts, I stepped forward, but I “let the process take me wherever it goes.” I used to think it was a failure since it always did not come out as my expedition, but putting Goodchild’s lens, I could look at my whole journey differently; it was the”best-laid plan.”



I started my process with the first project for week three, and I decided to use the second background as a background. Even though it was not intentional, the shader surprisingly gave me a magical and surrealist mood. Even though the second picture was part of the process, while re-mapping the work, I decided to use the second picture as a background source. The shader was almost like a creation without a “roadmap,” created under the experiment of combining week one code and noises.



For this week, we need to get involved with shape and pattern. Even though I am going with the flow to find a “Happy little Accident” during the journey, I still started with the specific concept and image. When we think about the shape or pattern, we used to think of it as a stylized, repeated, identical, or structured way of expression, but I wanted to portray something different, which is a natural shape and pattern with curvaceous lines and randomness into it since my practices are influences our daily life or seeing which is from the nature. Consequently, the concept of the universe also came from that process. Therefore, I started with the week three practices and changed some coding to the circle. However, it only creates one big middle circle rather than the random pattern and composition of the various circles. Therefore, I needed to find another way to come up with a building design and print by harmonizing the variety of the creation of the circular shape with coding based on the inspiration of the “Balance, Dance, Collaboration” from Goodchild’s blog post.

This is where I started after I went through some office hours before I began the experiments.

vec3 hsb;
hsb[0] = random( vec2(i, 20)); // hue
hsb[1] = 0.9; // saturation
hsb[2] = randomRange(vec2(i, 30), 0.45, 1.0); // brightness

// convert to rgb
vec3 shapeColor = hsb2rgb(hsb);

// mix color where shape == 1.0
// otherwise keep previous color
color = mix( color, shapeColor, c);

First of all, I was trying to change the by applying the colour based on the week three shader example, with putting “float randomRange” before I put those on the “void main().” However, it did not work out because how the example code was created and how my code was created were different. Therefore, this function was not working, but it still gave me a hint that I needed to use the float function to direct the randomness of the colour if I wanted to apply each circle’s colour variously.

After all, I tried to use a different tutorial link: https://www.youtube.com/watch?v=dhuigO4A7RY. In the video, he multiplied the colour: “vec3(.05, .07, 0.8)” on the “float size,” which is placed inside of the “i,” but it did not work. However, this process caused me happy accident of seeing the unexpected result. So I changed the line like, “c += circleBlur(st, vec2(x,y* vec3 (0.5)), size );” this way, surprisingly, it creates the depth by tilting the angle in y value and makes it more like a galaxy-like scene.

However, I realized my code has a difference of having one more line or step that is saying that “color = vec3 (c);,” rather than this c value going directly to the “gl.Fragcolor = vec4 (color,1.0);.” Therefore, I changed the plan to multiply the colour value by the “c” value, and it worked. For the further step, by using the “u_time,” I have decided to add the colour change, but the equations are getting too long, so by following the tutorial, I added one more line: “vec3 colour = sin (vec3 (0.1,0.2,0.4)*u_time)*.5 + .5;,” so that I can simplify the line that direct the information of colour by “color = vec3(c * colour);.”

Nevertheless, I still could not figure out how to randomize each circle. According to the tutorial, he used the “fract” in the ShaderToy, and the book of shaders also uses the “fract” tool, but of course, his and my way of coding was different, so I needed to find another way. Consequently, I tried to change this line: “float size = random(vec2(i, 202))*0.01;,” which looks pretty similar to the bar in that he added the “fract” function in his tutorial, but it did not work. Likewise, I am still curious about how to use the “fract” to change the individual circle’s colour.

In my final steps, I tried adding those circles in the foreground of the shader I worked on in last week’s homework. Based on my previous coding experience, I organized the code to combine multiple coding.

vec3 colour = sin (vec3 (0.1,0.2,0.4)*u_time)*.5 + .5;
vec3 frontc = vec3(c * colour);

vec3 chole = vec3( smoothstep(.7,.75,fract(DF)) );
vec3 gradback = vec3((angle/TWO_PI)+radius*sin(u_time),1,1);

color = chole*RGBcolor(gradback)*frontc;

gl_FragColor = vec4(color,2.0);

However, I did not know how to put the two different values of angle and radius for two additional codings, and it caused them to combine rather than put those two coding in separate layers. However, P5.js can create different layers, so I can investigate and find more ways to solve the issue in the further weeks.

Even though it caused of unexpected ending, I am satisfied with the result because I also made the discovery that Goodchild highlighted. Significantly, the shader creates line movement, and it reminds me of “Time Flies” presented in her blog post since I also think my outcome shows the harmonized rhythms within the dynamic movement. Therefore, this week’s activity was a valuable experience that taught me to see things from a different perspective and accept various discoveries.




Leave a Reply

Your email address will not be published. Required fields are marked *