For this assignment to draw an alien using p5.js, I am purposely trying to code based off of my drawing. The reason I am doing this is because I am hoping I’ll learn more if I try to code the actual result that I want, instead of creating a jumbling of shapes as I go along.

So, here’s my rough alien sketch before I started coding. Let’s try and recreate this with p5.js!

Starting to draw with p5.js and I am having to constantly remind myself of a couple of notes:

1.) “Think like a computer.” I keep placing objects underneath other objects. Ex: I have put the background statement as the first command in the function statement, therefore my objects are all hidden. Need to remind myself that commands read from top to bottom.

2.) Trying to remind myself to also not use the same method each time. Ex: I want to try out different ways of drawing ellipses with the different ellipseMode(). I just want to make sure I know of all the different techniques/commands, even if it takes longer. Hopefully this will help in the future.

3.) My struggles with making a unique, organic shape (the alien body)

Reading the beziers page to help me get that cylindrical shape of the body. Finally got the cylindrical body shape, but am struggling to have the color fill on the inside not outside of the shape. Ex below:

So bezier command doesn’t work for making an organic shape. Thankfully stumbled upon the beginShape() and vertex () function. It’s still not curved. Here is the vertex version:
 So, I think I should apply this concept to the curve vertex function. However, I am very confused as to why the number of curveVertex() points and the number of points() are not the same. Should there be a curve for each point.

Ok, well despite not knowing, still was able to get a little closer using the curveVertex() function.

5.) Throughout the building of the alien, I did wonder if there was an easier way to do things. Example, instead of having to draw a vertex point for the foot I was hoping I could just rotate a ellipse. When I tried to do this, it would end up rotating the whole alien. Also another example, making each polka dot took time, wonder if there’s an easier way. Trying to find an easier way to do things/ “shortcut” will be key for me.

Though there’s probably an easier way to do some of these steps, I still managed to Updated version of the alien with all the body parts I had envisioned.

6.) Added color! Easiest part!

Here is the final result + code: https://editor.p5js.org/elinsterz/sketches/SygUGrhPm

 

Reflections on this assignment:

Only after finishing my alien did I realize we were only supposed to use basic shapes for this assignment. So, I didn’t follow the guidelines exactly but I do feel like a learned a lot.

It’s exciting to see the results. Throughout doing my alien, I did ask myself many times if there was a more systematic way of doing things. Instead of putting in individual dots, is there a way to make a pattern? Also, I found myself becoming more comfortable with using the p5.js reference page in order to figure something out.

I also kept itching to understand other commands, such as how to make a gradient background. I discovered lerpColor(), but couldn’t quite understand how it works. I can definitely tell I’m only scratching the surface of this program and I’m antsy to be more well-versed in it.