My major is Communication Design. My work involves illustration and graphic design. I really enjoy looking at outstanding brand designs and website designs, especially the interesting motion graphics and interactive effects. I believe that computation can help me better understand the principles and code behind some of these interesting motion effects.
Is there a way to add rounded corners to a shape? Like in Figma, where you can freely adjust the corner radius? I really want to make some smooth transitions but I don’t know what code should I use.
//ears
fill("#305FD7");
//Bézier curve looks great, but I don't know how to use it.
triangle(80,135,70,25,170,80);
triangle(180,80,260,15,270,125);

I want to draw a mod design for the Felyne Cat from Monster Hunter: Rise. It’s really cute and fun, and can be drawn using just a few simple geometric shapes. I’ve roughly envisioned a Felyne holding two strings of rice balls. First, I put together the basic shape using shapes in Figma. This step was to determine the order of the code, the colors, and the categories. After noting down the color codes, I used some basic functions in p5js—such as “ellipse,” “triangle,” “arc,” and “quad”—to complete the illustration.

(screenshot from Figma)

(screenshot from Fp5js)