Archives for February 2023

 

final piece:

This week we learned about “for loop”, “push/pop”, “translate”, “rotate”, “scale”. 

• • • “for loop” makes coding a lot easier when creating repetitive patterns! 
    • “translate” & “rotate” is a bit challenging for me because I need to have a general idea of the coordinate before using them ((which I am so terrible at 🙁 but good news is I managed to figure them out when answering prompt 2!!

These nine pieces actually took me a long long time because my computer stopped responding serval times, so I lost my codings ;; But I did enjoy the process 🙂

I didn’t use the triangle shape here because it is a little bit complicated for me to figure out 3 coordinates in the for loop. So that could be something for me to explore in the future. 

Prompt 1: Difference and similarities between drawing by hand from observation and programming the computer to draw 

• • One major difference is the certainty of the strokes. When observing drawing by hand, you cannot tell accurately what’s the painter’s next step. But if you program the computer (and not using random), you already have a general scope of what the picture to come out will look like before running it (in most cases). Using computer programs to draw also makes repeating certain elements and aligning the elements easier. 
  • The similarity I can think of is that both involve planning before drawing in most cases:)

Prompt 2: Properties in the repetition

• • I employed the “for loop” in almost all of the nine paintings. The most noticeable (and challenging) one for me is to understand how to generate grid patterns in the paintings. (Although I didn’t end up having any grid patterns in the final piece because my webpage literally stopped responding six times when I was so close to get the desired result ;;) Using two variables instead of one is very important in generating grids, and changing the increment can change the size of the grid.
  • Another one is the “rotate()” function. I really enjoy the spiral created by rotate. & here’s my exploration on how it works:

 

 

 

 

 

 

 

 

 

Prompt 3: a good generative pattern?

• • I think a good generative pattern has certain elements that are repeated again and again, and have nuances. I really enjoy the visual impact those examples in the ppt give me. It’s random and abstract, but at the same time very aesthetic.  

This week is about generative motion. We used a lot of tools that can generate random motions.

• One important thing I learned this week in general is that when coding, we can start with definite numbers to generate the shapes, and if the codes work well, we can change certain parts of them so that variables can be added in. Here’s how I applied it in the exploration stage:
• I was (and still am) very obsessed with cleaning up my codes and cutting the variables I used, but things didn’t work out as I expected:
  • Previously it was: xPosition; yPosition; xPosition1; xPosition2; y Position2; but I forgot what xPosition1 is for so I deleted it, and put xPosition/ yPosition in both of the circles
    • It generated an overlap between the loop and the moon-shaped thing first, and later was the moon-shaped thing inside the loop

• It’s important to differentiate sin & cos as well, if in all of the yPosition I still put sinValue, I can only generate linear motions

• For the entire project, one thing I regret is that I don’t think I fully understand the function of sin/ cos and those angles. I will try to employ them in later projects more. But I did learn how to use the ‘map’ function 🙂

---

Answers to the prompt 

Prompt 1: math functions

• • random(): 
    • to generate random degrees
    • This is def one of my favorite functions, because it can generate something unexpected and make the whole piece more random
  • radians(): 
    • to turn the angles in degree into angles in radians so that I can put them in the trig functions
  • sin() / cos():
    • to get numbers within the range of (-1,1)
    • challenging because I might forget turning the degrees into radians 

Prompt 2: motion

• • I explored: linear motion; circular motion and oscillatory motion
  • If I combined two motion or more in one shape, the whole piece will look like a total mess, so distributing them onto different shapes would be better xp
  • I wanted to explore the oscillatory motion, so I gave the horizontal frames a oscillatory motion

Prompt 3: sin(); cos() & map() function

• • I set the sin/ cos value as inputs so that I can generate shapes in different positions
  • Map function is really effective because I don’t have to use “ [variable] = 300 + (sin()* 300)”
  • One interesting thing is that:
    • • “ let xPosition=map(sinValue1,-1,1,100,400); ”
      • “ let yPosition=map(cosValue1,-1,1,100,400); ”
    • if i change cosValue1into sinValue1, the xPosition and the yPosition will be the same and the shape will move in a linear motion 
    • if i change the lower/ upper bound of the value’s current range:

Prompt 4: generating circular/ angular movement by sine and cosine

• • using map function
    • eg: y= map(sin(xRadians),-1,1,100,300)

This week’s project is about interactive drawing. Initially I intended to design a project where player can decide the weight of the stroke by pressing key 1~9, but I failed. 🙂

Then I started to work on symmetries. I first succeeded in programming up-down symmetry and left-right symmetry. (( The link to the first sketch: https://editor.p5js.org/yyyyyelena/sketches/39WlXCnnr)

 

 

 

 

 

 

Later I realized the patterns bore a resemblance to traditional Chinese paper-cuttings, so I created this project (which is my final piece). https://editor.p5js.org/yyyyyelena/sketches/iQRH91bWO 

(ps: real Chinese paper cuttings should look much much prettier than what the program can do 🙂 

• codes I used: 
  • up-down symmetry:    line(m, 400 – n, x, 400 – y); 
  • left-right symmetry:     line(400 – m, n, 400 – x, y);
  • diagonal symmetry:     line(400 – m, 400 – n, 400 – x, 400 – y);

I also explored how to show texts and how to change the fonts of the text. In this project I mainly used TimesNewRoman and fantasy. More exploration is needed regarding how to make them bold/ in italics. 

 

Answers to the Prompts:

• Prompt 1 — variables
  • “  let loc = 410; – title location”
    • this is for the texts, loc refers to the location of the title: design your own Paper-Cuttings!!
    • I put this bc if I want to add/ delete anything in the instruction below, I will have to calculate and change everything again and again, but with this variable, things are easier to change 
  • “x = mouseX;  y = mouseY;  m = pmouseX;  n = pmouseY;”
    • • I set these variables to make the codings for drawing easier
  • “  a = random(0, 150); ” 
    • • this variable is for changing the color red when drawing, i figure a random number in G and B would make the red prettier (?; but G has to equal to B otherwise it won’t be reddish 
  • “ rad = 200”
    • • this is the radius of the circle in the guideline function, it helps to decide the location and the size of the squares

 

• Prompt 2 — conditions
  • keyCode === “up-arrow & down-arrow”
    • help player to choose between red and green
  • key === “s”
    • help stop the stroke, so that player can replace the mouse and start another stroke
    • the function “stop()” doesn’t work very well(? I kinda need to learn more about how to use this
  • key === “c”
    • help player to clean the canvas
    • I copy and paste the canvas set-up after cleaning everything otherwise it will be a blank canvas 
  • key === “g”
    • help to show guideline for a certain pattern
    • I couldn’t code for a more complicated pattern now, but hopefully one day I will get there 🙂

•  

• if (keyIsPressed == true && keyCode === “UP_ARROW”) is not a good idea bc the player will have to press the up arrow all the time to draw

 

• Prompt 3 — key & keyCode
  • key refers to keys like: a, b, c, 1,2,3…
  • keyCode refers to keys like: up arrow, left arrow, blank, delete ….

•  

This week’s reading materials are about the Conditional Design and Bernard Frize’ s art work. For conditional designers, the process, but not the final result, is the product. Painters’ communication and collaboration during the process is very important, and they focus on things that adapt to their environment, emphasize change and show difference. On the other hand, Bernard Frize argues that process painting doesn’t exist, and “every good painting shows the seamless transition from process to product”. 

Their approach of painting differs from my previous design in the following aspects. First of all, they involve collaboration among different painters. In my previous experience, even if it was a piece done by a group of people, we simply just split each other’s part and worked on our own, with little communications or collaboration. Secondly, conditions and events lead to their paintings, but what led me to my paintings were more like instructions. These instructions included what the final outcomes should look like, what techniques should be involved, etc. In my opinion, the conditions are added into their personal styles whereas for me, it is my personal drawing habits (I can’t say it’s my style because there is no such thing as style for me as a learner :)) that were added to the instructions. 

The set of rules I’d like to try is: starting from the middle of the paper, use triangle only. The starting point should be where the last end point is. I hope to generate something like a kaleidoscope. (see in the pic below, pic 1) The collaboration can happen when deciding which color to use next or what the size of the triangles should be, etc..

 

Below is a pic (pic 2) resulted from my rule: 

start from the middle of the paper

use triangle only

colors blueish and orangish

the starting point should be where the last end point is

During the process I realized where to put the next triangle is important to, especially when I use a thick strokes because the stroke may overlap each other.:) Rules like “size of the stroke starts from 10, and minus 1 point when producing a new triangle each time until it reaches 1; then add 1 point till it reaches 10” may produce interesting results as well. (see pic 3.)

During the process of pic 3 I realize the shape of the stroke matters too. I used smooth line this time to better illustrate the change of sizes, but if I use other strokes, the lines can vary based on the pressure we employed.

After my exploration process, I read this website: https://conditionaldesign.org/workshops/vitruvian-paint-machine/. In this piece the artists employed more shapes, each given a set color. The outcome seems more abstract whereas mine is more predictable. 

link: https://editor.p5js.org/yyyyyelena/sketches/hN2xCN3US

My first creative coding piece!! It is a pic I took on my way from dorm ➾ AB, I found the convex mirror really interesting so I took a picture at it. I simplified it into circles, triangles, ellipse and rectangles. There is a stadium in the back and there are trees and bushes around. In the very middle (well, I tried to put things in the middle) stands the pole, a mirror and a sign with 5 written on it.

Important takeaways:

• At first I found it very difficult to control the color of my creation, but later I realized that I need to use “fill()” before crafting a shape. Another thing about the color is written on the screenshot: 

• I tried to use the “beginShape()” this time, this is really helpful when creating something irregular!! ((check out the branches and the stadium 🙂
• I didn’t tidy up my codings in the very beginning, so I had great trouble working out the sequence of my shapes. I also put so many redundant codings.

 

• Things to remember: color capacity goes after the RGB numbers  
• Things I am really confused about (and need more exploration): how to rotate my shape/ arc and how to make a perfect arc as I expect. ((esp. the lower part of “5”, I couldn’t adjust it to the angle I like.

Reflections:

• I personally prefer consulting the reference before I start my exploratory coding. It makes things more productive because I know the name of the code. I usually use exploratory coding to test what each argument is for, like the width or the height. 
• I can control almost each of my stroke when drawing on a piece of paper, but when it comes to programming, I need to calculate the position and the length of the strokes. I also have to figure out what colors work best. 
• When you grab the basic structure of the program, replicating similar shapes becomes very easy and convenient. Also, the sense of achievement after finishing the piece is way much more than drawing on paper. 😎