W2 – Create ur own paper-cuttings!

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 ….

•