Creative coding

This week is about arrays & setting up my own function. I know I could have done better in my design but I have way too much work to do lately, so I kept my design simple. A few things I’m really glad about: 1) I figured out how to do gradient background (although it is more related to last week’s thing); 2) I formed the habit of saving the codings more often, because my webpage dies so so so so so frequently ;; 3) I have a deeper understanding about the push/ pop/ rotate/ translate thing now

• Describe what values were stored in the array(s) and how you utilized them. Share your experience while using the array(s).
  • I basically repeated what was taught on Thursday’s class when using the arrays, because I am not confident in my understandings. By repeating this process, I think I am making progress? 
  • Array is very convenient to use, and I really like the circle pattern I produced. One improvement I can make is that maybe I can make it like a rolling ball. But considering my computer (the webpage stops responding so frequently!!!! So sad;;;), I might need to explore it in other codings.

• Explain when/why translate(), push() and pop().
  • I understand the importance of push() & pop() this time!!! ((Maybe the webpage died and I didn’t save the codings, but) When attributing a particular design to the elements, using push() & pop() won’t disturb other things 🙂

• What is the effectiveness of User-Defined Functions?
  • It makes my codings cleaner (especially when I fold it) & easier for me to find what I want to change. Also a lot easier to repeat the actions in the codings, for example, in the “if” function thing 🙂

• What parameters did you added to your functions? How were they manipulate the effects of the functions?
  • I used mouseX/ mouseY when mouseIsPressed, so that my little dog can follow my mouse 🙂
  • One thing I found is that if I put the background in setup, the dog would appear tons of time when MouseIsPressed, because in setup the background would only run once.

• Are you able to identify methods/processes in your programming that are radically changed because of the uses of the functions you defined?
  • Not really (?

 

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.