In Week 5 we expanded upon our p5 skills, including adding images and draw functions.

In the above gif I made it so when the user moved their mouse, the image would follow the mouse, copying itself over and over again, creating a worm-like appearance. When the mouse was clicked, the image changed and as such, so did the worm colour. To add to this the opacity of the background, similarly to week 4, changed so that the worms would disappear over time.

We then took our code and understanding from above and used it to create a dot to dot! We experimented with the different ways in which users could input data to the website. Including clicking the mouse button or a button on the keyboard, and the difference between just clicking or holding the button.

For the dot-to-dot, when the user clicks a keyboard key, a number is placed, the counter function increased the number that appears each time the button is pressed, creating a dot to dot outline of numbers.

To complete the dot-to-dot, using the mouse pressed function we used above in addition to a draw line function, we can allow the user to hold down to draw! I did a couple of dot-to-dots with varying degrees or neatness/success. My favourite is Ron the teddy bear!

We also examined how shapes could be used in p5 to create drawings or art. Below is a portrait I made of my friend Claire. It was difficult at first to work out where to place stroke and colour elements so that they applied to the correct shape or line element, so it took me longer than I thought. However, despite the steep learning curve, I understood the basics of p5 and I'm very proud of my drawing!

As you can see, even to draw a simple face required lots of input, but this was mainly the placement of elements such as eyes and hair. Though I did run into some trouble trying to make a semi-cricle and had to consult p5.js.com to get a broader understanding of the size and shape inputs needed to create a semi circle.