Quantcast
Viewing all articles
Browse latest Browse all 10

2D Primitives in p5.js

Image may be NSFW.
Clik here to view.
week1doodle

My go-to doodles have been a spaceman for a couple of years, so I tried to create a simple space landscape with the sun and some mountains. First I doodled it out on graph paper and plotted the points. I realized that I made the canvas too small and decided to double it when I transferred it to the computer. Plotting them all prior was time consuming and somewhat unnecessary. As I quickly found out the coordinates were imperfect and tweaking them digitally is much easier than tweaking them on paper.

The first problem came when making the middle mountain. I originally thought it should be a triangle, but as I made the bottom points at different y-coordinates it looked bizarre, so I changed it to a quadrilateral. This took some playing around with the numbers as the point was not exact on my sketch. Though as I am writing this blog I now realize I could have made the middle mountain first using coordinates that go into the smaller ones. As long as it was ordered before the others in the draw() function, it would have looked fine.

Most problems I encountered were easy to figure out, and the assignment made me more comfortable with using the 2D primitives. My biggest unresolved issue, however, was how to use the arc() shape. I tried to use it to make the visor for the spaceman, though I could not figure it out and instead used rect(). I hope to talk about this for the next class.

To view the p5.js version of this sketch check it here.

 

 

 


Viewing all articles
Browse latest Browse all 10

Trending Articles