Exercise 1

This was not my first interaction with p5.js as I have experienced it in a prior course. However with this being the introductory exercise into this course, specific towards coding, I did learn new base mechanics which have been showcased here.

With this exercise, I tried to incorporate portions of each of our examples(and them some) that lead up to this exercise. From shapes such triangles, ellipses and lines tracking your mouse, the background with a looping patterns and the color changing text, I think these demostrate useful knowledge towards basics, which is a foundation that all things must be built upon.

Run Exercise 1
See code for Exercise 1

Excercise 2

This exercise introducd new mechanics with new tools and their own challenges. With this exercise, I wanted to definitely try to make something adjacent to a game. So I wanted a moveable character but then based on the my characters movement, it reminded me of an old an old flash game(Fireboy & Watergirl) which had two independently controlled characters. So I wanted to give that a shot.

I made two characters independent of each other, one control with 'WASD' while the other controlled through '↑←↓→'. They each have there own theme which can be toggled between. They also have their own 'TRON-like' tail that follows them(It is visible while on their opposite theme). You can also trigger a key word which is linked to each of their themes.

Run Exercise 2
See code for Exercise 2

Project 1: The Paint Program

In Project 1, we were asked to make a paint program applying our knowledge of the previous two exercises together and what we had learned. We were presented with a paint template which was relatively understandable and adjustable to fit our needs and bring our own concept to light.

I tried to create a variety of brushes that each had their own vibe and would allow users to not be regulated to a single few tools. I have simple pen tools, 'blot' brushes, randomized shape placement/sized brushes.

All the brushes track your mouse's current location and previous location and connects the dots between the two points. The line tools are just individually colored lines. The 'sparkler' tool 6 different colored lines between your mouse's current location and a point within a 200x200 grid centered on the mouse's current location. The RGB cubic and circle create their repestive shapes shifting in color following the mouse. The Inverted tool allows you to draw on the exact opposite side of the canvas, allowing for rotational symmetry. The 'Splort' tools create their repective color variety, placing circles within a 40x40 grid centered on the mouse's current location. And then we have an eraser, fill, clear, and save functions as well.

A surprising challenge was trying to thing up different types of brushes that were not just a straight line. I wanted brushes that had their own flavor. But the success came when the brushes and image ideas got locked down in my head. Once the brush's core had been made it was just a matter of customizing them to give them their flavor. Same for the images. Once a use for a brush came to be, an idea for an image came with it.

Run Project 1
Code for Project 1
img 1 img 5 img 9
img 2 img 6 img 10
img 3 img 7 img 11
img 4 img 8 img 12
tiled panel