Introduce

This lesson showed me many possibilities, such as the effect of this cool interactive website. I think it is possible for me to achieve it in the future, which makes me very excited🤩.

3cbd301cd9bb6a45c78798fb5f7114da.gif

Self Portrait

iShot2021-09-13 22.17.10.png

This is my portrait. I hope this image is more like me and strives to use more knowledge.

In this assignment, I encountered some problems. For example, in the beginning, I didn't consider the proportion of the portrait on the canvas. So when I finished it, I found that it was a bit small, but I didn't want to re-modify every value to adjust the scale and position. I hope that the graph can be a group, which becomes larger and smaller together or adjust the position. So I tried to set x, y, w.

In my opinion, if x is set to 250, that is, between 500 canvases, I only need to add and subtract values to flip horizontally, which is very convenient for me. Secondly, I also set the value of y to 250 in the middle, and finally moved it slightly down to 255. w represents the size, and the value of 1 is the size I made at the beginning, and I enlarged it by 1.5 times. I don't know if this is the most formal way, but I tried my own method and it worked.

function draw() {
  portrait(250, 250, 1);
}

function portrait(x, y, w) {
}

iShot2021-09-13 23.58.26.png

function draw() {
  portrait(250, 255, 1.5);
}

function portrait(x, y, w) {
}

iShot2021-09-13 22.17.10.png

Another problem is the triangle at the end of the portrait hair. At first, I wanted to make an equilateral triangle, then rotate it and move it to a suitable position. However, due to the limited time for the plane to New York, I did not solve it, so I still used the original method and found three x, y coordinates.