Interesting! My First P5.js Project.

Well, this is my first time using P5.js to build something. I know nothing about this tool, though I had some C programming experiences few years ago. OK, now let me show you how did I do it.

Firstly, I went through some basic courses which created by Dan, he’s really funny and interesting, I will never get bored watching his video.

After 4 courses, I think it’s time to think some ideas that I can play with and get my hands dirty. At that time, my girlfriend called me from HongKong, and we had a long talk. She always said that “why you are so stupid”~Hmm, well, I don’t think so.

After the phone call, I want to do something that could prove I’m not an idiot, so I made a sketch which looks like the “Emoticon package” in Message.

I am worried that I may not be able to draw the pattens which are too complicated, so I choose to use some simple outlines to do that. I made a picture in Sketch because I can easily get every point’s coordinate from it which will save me some time.

I try to figure out how to make beautiful curves and then I read some blogs.

But I still have trouble with the ‘bezierVertex’, I input the points’ coordinate in turns, but it turns to be wrong... I don’t know why, so I had to switch to ‘quadraticVertex’.

And after 2 hours, I made it~

Also, I add some motions on it~

You can see the fullscreen here:

You can see my code here:


  1. Is there any easy ways to deal with the coordinate? I’m tired of those com+c & v.
  2. How to use bezierVertex correctly?