p5.hweng

Creating your own p5.js library in vanilla JavaScript.
p5.hweng is a library that makes drawing hyacinth weng's frog, egg, and ant motifs easier.

→ link to code

Documentation

Frog

        
frog(faceX,faceY,r,[funkiness],[color]);
        
      

Draws a frog on the canvas.

Parameters:
faceX: x position of the frog, numeric value; point located at inner corner of eye
faceY: y position of the frog, numeric value; point located at inner corner of eye
r: radius of eye form blob thing, numeric value
funkiness(optional): adds a bit of offset; default value is 0
color(optional): frog color; default is "green"

EggyKun

        
eggykun(x,y,r,arm,leggy,[funkiness],[color]);
        
      

Draws EggyKun on the canvas.

Parameters:
x: x position of the egg, numeric value; point located at center of egg white circle
y: y position of the egg, numeric value; point located at center of egg white circle
r: radius of egg white, numeric value
arm: lengh of arm, numeric value
leggy: length of legs, numeric value
funkiness(optional): adds a bit of offset; default value is 0
color(optional): egg yolk color; default is "orange"

Ant

        
ant(x,y,[R],[color]);
        
      

Draws an ant on the canvas.

Parameters:
x: x position of the ant, numeric value; point located at center of head circle
y: y position of the ant, numeric value; point located at center of head circle
R(optional): scale of ant, numeric value; default is 5
color(optional): ant color; default is "black"

hyaBlue

hyaBlue is a variable containing the string "#283077", the hex code for the hya blue, the current background color

Design Process

I couldn't think of anything new or interestingly innovative I wanted to do, so I decided to create a library on my own art, referencing my frogs and eggs from Code 1, and my ant motif appearing a bit in all areas of my work.
The ants would be the most useful for me out of the three as I often looked to have ants in my p5 sketches but drawing each shape out and trying to utilize it as a single unit was too much work.

All shapes are created with arc and lines, using arc() and lineTo() with beginPath() and closePath(); I looked to this page on the MDN documentation a lot for guidance on drawing shapes in vanilla JS.
I initially worked to just get the basic shapes of each function drawn and in the right places with the right variables that would be affected correctly with basic parameters. I then added optional parameters like color to give the option of further customization but also offer a default. After all the basics were completeled I moved on to adding further personalization on my end with funkiness in the parameters. What the funkiness parameter does for each was kind of arbitrarily set, just making small modifications to certain points, as I had no idea what I was looking for specifically anyways.
I also added a color, hyablue, that is a specific shade of blue, because I've recently found myself using this color as the go-to blue for my personal branding. And it's a color that is nicely deep, calm, and bright from certain angles that I think reflects my personality well.

Reflection

Drawing shapes with vanilla JS has a degree of difficulty. I didn't have to use the bezier curve, and could do everything with the arcs and lines, but it was still a lot. But still a good learning experience, starting to work outside of p5 and with pure JS to accomplish these tasks.