Katie McCloskey

  https://editor.p5js.org/kmccloskey2/sketches/azOhEfAi2 In my project I attempted to use the random function, conditionals, and Boolean variables. I was trying to think of ideas of something to turn on and I immediately thought about lights and thought it would be cool if I could make random colorful lights on a Christmas tree. I have a box labeled "lights" so the user knows what they are clicking on. When the user clicks direct in the box, the lights turn on and off. My work is different than typical buttons that can be found on website because the box itself is not interactive. For example, when you usually click on a button, the button either changes color or size to indicate to the user that it is pressed. This is something I would add if I could figure that out in the future. Besides that, I think using the random feature for the lights is interesting because it is not just still dots and looks as if it is sparkling. 

 https://www.megayacht.supply This is an example that I find fun and cool. This is from a clothing brand's website that only opens access to look at the clothing on specific drop dates. Otherwise, the user when checking out the website on a different day has a game here to play so it is not just a blank screen telling customers the website it not open. I think this interaction is interesting because it uses mouse pressed to start the game and also uses the up arrow to move the character. I also like the graphics because it looks like an arcade game. 

https://editor.p5js.org/kmccloskey2/sketches/Pua4Q_PE5 For this assignment, I attempted to use all aspects that I learned from the videos for the week. If you move the mouse around, it creates a picture with the circle. I also have 3 squares that move across the screen as the stroke creates a trailing line. The squares are moving across the screen without mouse movement because I used a variable to assign the squares to move only .20 pixels because I wanted it to move slowly. Also, when you click the mouse, the picture erases the mouse movement as well as the path that the squares created. 

https://p5js.org/examples/interaction-kaleidoscope.html Here is an example that I find very compelling. Specifically, it is very cool that the person using the code can save the picture they draw and reset to draw a new picture. It is also very interesting how the picture is drawn 12 times with the same mouse movement. Although it appears as if the code would be very complicated, the main part of the code under the draw portion is surprisingly very short. Although the code is complicated, it is fascinating that the width/ height is simply / 2. I believe that the code looks more simple than expected because the person used a lot of variables to keep it clean. 

https://editor.p5js.org/kmccloskey2/present/0kq1-Kgay   https://editor.p5js.org/kmccloskey2/sketches/0kq1-Kgay      Here is a link to my first project using p5 web editor. To complete this project, after watching the instructional videos, I used the reference feature to find out how to enter shapes to create this face. The majority of the sizing and positioning was achieved through trial and error, to make sure the coordinates were correctly centered and sized proportionally. For the color, I mainly just used the fill () feature and found complementary color codes from Adobe Color.