Through the screen, we can see a simplified overview of my desk cleared for the new semester.
The main sructure is the bookshelf and the tabletop with various things on and in. As we can see, here are obviously a table lamp, a perple mug, and some books; the tiny green rectangle on the lamp is a moisturizer, the green bottle in the right cell is filled with facial lotion, and the big green box in the shelf is used to contain smalls learning tools which was originally the packaging of my skin care product mentioned above:D ; The light green one in the left cell is actually a pen bag; the light colored box above is a candy box put on the lid of another box which is on the top of the shelf, right of a clock; the blug one on the right of this picture is a half-used napkin 😛
Above is an overview of my description for the project.
Demo/Visual Documentation:
Development and Technical Implementation
Coding:
it was a pity that I haven’t take any screenshot of my failures and bewilderments.
1. the lamp’s head
Firstly I asked the LA for the way to realize a oblique ellipse. After knowing that it will be learnt in the future but not so early as now, I come up with the idea to replace rotation by shaping. However, I misused “curve” to locate points and failed to reach my goal. Luckily, with the help of the professor I learnt “curveVertex()” and finally understand how it works as well as “curve()””bezier()”.
After understand how “curveVertex()””bezier()” work, the ideas to use them came into my mind when I was drawing the napkin. With the help of https://p5js.org/reference/#/p5/bezierVertex, I managed to draw an abstact napkin 🙂
After using “curveVertex()””bezier()” and so on, I thought there must be some ways to make round egdes easile(especially when working with regular shapes ). Therefore, I found the guidance from reference(https://p5js.org/reference/#/p5/rect) and succeeded.
From the lessons, I started the journey of creative coding though p5.js for the first time. It is quite interesting to see the code I typed down transferred into concrete figures. It also inspired me to think how I can made shapes better ones and how I can use codes on the first stage to replace something we would learn much later; For example, the oblique ellipse on the lamp is drawed by “beginShape/endShape” and “curveVertex”. And later, I was inspired to use “vertex””curveVertex” even “bezierVertex” to draw the napkin. The process was tiring but amazing! The bigest problem here is that I chose such a complicated picture and eagered so much to do it well that I spent too much time on it. Although next time I might change my way of learning and practice(try to be not so strict to myself ), the plenty of practice did make me quite familier with the p5.js 😀
