© 2019 Mengzhen Xiao

Get start with p5.js

September 12, 2017

It was in the third year of my undergraduate study in industrial design, I participated in a workshop which had the theme as Design Reality through the Virtual. In that workshop, I knew coding for art for the first time. I learnt some basics of processing in that one-day workshop and finally wrote my first program demo. It was a demo of a VR animal feeding facility in zoos, by which the visitors could feed the animals virtually to avoid the injuries of animals caused by over-feeding or mis-feeding problems.

 

Here is the gif of that demo. As you can see, it was a really simplified prototype which was linked to Leap Motion as sensor, since I only had one night to make it, but this experience raised my great interests in coding and programming.

 

As an industrial designer, I got stuck in product modeling and appearance. However an elegant and nice exterior alone doesn't make a good user experience. When I met with coding, it was like a door of a brand-new world was open to me. With coding, things can become active and interactive, which brings more possibilities for product design and user experience design, and contributes to optimization.

 

That's why I'm interested in learning programming now and push myself to the machine languages that I have never known.

 

When I started to learn p5.js, I found the 2D primitives parts were quite similar to Processing. I tried to draw a self-portrait, and the first step I could think about was drawing a sketch on the paper. Then I drew a canvas in 600 *400, and I defined the center (300,200) as the bottom point of the character's face.

 

 

 

 

Before I start coding on the p5.js editor, I thought I had better draw a blueprint about what function I should use for each part of the character. So like a surgeon, I dissected the character and write down the functions. But things always won't work out as what you thought, during coding, I gradually found out that some shape I dissected didn't work in 2D primitives code. I had to modify some parts, which is shown in purple. And I also found it was a little bit difficult to draw the bangs in one function, so I had to drew an arc in brown first and then covered it with a small triangle. 

 

What really made me confused was the curve function. I used it to drew the eyelashes, but I was not very sure about the exact coordinate of the control points. So I had to change the coordinate time to time to find the most correct number, which made me drew many odd eyelashes, such as the one flies on the nose.

 

The following is my sketch and my code. It is gratifying to see the outcome is not so bad, although I still have two questions that I can't figure out. 

 

 

One question is how can I figure out the coordinate of the points I want to know like in 3D modeling software, such as Rhino. It's really hard if you have to make a precise sketch and don't know the exact coordinate, since almost all the 2D primitives functions use coordinate as the arguments. And the other question is that can I write my sketch in fewer codes? I think my whole code is long, and there might be a way to write it in more clear and shorter codes.

 

In general, writing codes with the p5.js web editor is a pleasant experience. The feature I love most is that I can play my codes and see the results immediately, which gives me a sense of accomplishment. (Of course I felt frustrated when bugs came out.) In this term, I'm wondering to make something really interesting with p5.js, may be a game which can use Kinect or Leap Motion as the sensor controller. And I also would like to optimize my first programming demo, the VR animal feeding facility. I haven't made up my mind yet, and hope I can get some inspirations in the future class.

 

Written by Mengzhen

With great proud of my first p5.js sketch.

 

Share on Facebook
Share on Twitter
Please reload

Archive
Read Another Post