Yelena Ye

https://editor.p5js.org/yyyyyelena/full/OP5X5UNlt

#7 R

• What is Object-Oriented Programming (OOP), a Class and an Instance of the Class?
  • Object Oriented Programming means a set of codes organizes around data or objects.
  • A class is a templet for the creation of object. It includes the constructor and the function [my understanding of the constructor: the basic set-ups of the object; my understanding of the functions: the set of code you put to make you object move as you wish]
  • An Instance of the Class contains the behavior you put in the class
• Discuss the effectiveness of OOP. When is OOP useful? In what way can it be utilized?
  • OOP is useful in that it tidies up the code. I feel like it’s a way to write your own function: you can attribute appearance & behavior to a specific object. It is helpful when you are trying to generate a set of objects with shared features but each has differences as well. ((Like the face project we programmed in class) You don’t have to put in the codes again and again to make copies of the object.
• Describe the objects you have created. What properties and methods were implemented? What kind of behaviors did you create by manipulating them?
  • The shape in this project is pretty simple — just a circle. But I varied the circles in size & color randomly. If no key is pressed, the circles can move with the mouse. If “s” is pressed, the circles will explode & if “l” is pressed, the circles will move in a linear motion. If a key other than “s/l” is pressed, the circles will move with the mouse again. 
  • I utilized the array to generate random color for the particles, which I think I will use again for my mid-term project. 
    • I actually googled the methods on how to achieve this, but I don’t have the reference now. It is important to note that RGB color doesn’t work in the array. Instead, I have to use Hex. 
    • A good website to find codes for the color: https://www.color-meanings.com/shades-of-green-color-names-html-hex-rgb-codes/ 
  • For the way of motion it’s basically just updating the x & y position 🙂 At first I didn’t intentionally design the linear motion. It was found thanks to a typo by accident. I feel like if you can press the key quick enough, making it explode while it moves in a linear motion or the other way round generate good visual effects! 
• Please share it if there is any challenging and confusing aspect(s) in the OOP concepts and techniques
  • A few kinda annoying thing: 
    • I have to press my mouse first so that the “if (key ==“s” || key == “S”)” can work
    • If I want to use the keys to control both the color and the motions, they can not happen at the same time. 
• The experiment process during the project:
  • How to let object move with the mouse: https://editor.p5js.org/yyyyyelena/sketches/5hS4StpsF 
    • The color of Pink & color of Green used to be 2 separate arrays, but I decided to merge them together at last
  • 

This week we learned about class and defining our own functions 🙂

https://editor.p5js.org/yyyyyelena/sketches/ucOLeBJ6G

• What is the benefit of your class not relying on any code outside of its own definition?
  • Using class makes everything really clean and straight to the point. I put my codes in “update()” after I have constructed my dancer, so the whole coding logic makes more sense. I put the color changing of my dancer within the display() function because I am employing the for loop here, and it might be too much for me to process for loop with update. 
  • Since the color changing of the dancer is closely related to the position of the dancer’s body, putting it within the display will secure the color changing moves with the dancer. (( I figured it out by putting the for loop into update & display and trying out the result, so I guess that’s another benefit of using class? 

• What make it challenging to write code that has to harmonize with the code other people have written?  
  • If I change the position of my dancer in the setup function, it wouldn’t bounce back again (easily)!!! But if I use variables to refer back to the location, it can’t be “let STARTX = startX”, because the editor shows that the variable startX is not defined in the current scope. I need to put the variable before “  dancer = new YelenaDancer(width/2,height/2);” ((which I think is not allowed (??

• Describe the terms modularity and reusability using the example of your dancer class.
  • [this is what I discovered during the documentation process] by defining different functions on my own, the whole code looks soooo clean and it is much easier for me to detect errors!! 

((Link to my google slides: https://docs.google.com/presentation/d/1xKKlwEH1hX_gtDRcQC2nzbj2MeschxjT6lwpfqY_TPs/edit?usp=sharing

Project Explanation:

This is an interactive project where users can draw their vision of spring 😀

The canna will be 800 in width and 600 in height. The right hand side, a 200 in width and 600 in height area, will be the interaction area where users draw whatever they want there. This part will be projected onto the left hand side, a 600*600 square area, for four times. The first projection is presented with a 45 degree rotation of the original canvas, and the rest will be 90/180/270 degree rotation of the first. The interaction area will be scaled into a smaller size so that the four can form the shape of a windmill. Afterwards, when pressing the key or the mouse (I haven’t decided on that yet), the windmill will be able to spin.

The color for users to choose from will mainly be green and pink. I sourced the inspiration of the project for the piece Serpentine Dance by Cat.Lumière, as shown in the exhibition Women in Abstraction. (https://www.centrepompidou.fr/en/ressources/oeuvre/c6b9k46) The color is from a photo I took during the presentation of the video, while the shape is similar to the dance presented in the video, although the rotation happens in a three-dimensional space. 

Other Notes

• One of the most important things I need to figure out during coding is that whether it is easier to use what we’ve learnt in week#2, the codings to create symmetric effects, or it is easier to use “push/ pop/ translate/ rotate/ scale” to project the interaction area.(or it could be a combo of both?) 

• The process of coding, in my opinion, will start from setting up the interaction area with one single color and single, immobile shape ➾ set up the projection area ➾ figure out how to make the four projections rotate ➾ add the interaction ➾ add the color 

This week is about arrays & setting up my own function. I know I could have done better in my design but I have way too much work to do lately, so I kept my design simple. A few things I’m really glad about: 1) I figured out how to do gradient background (although it is more related to last week’s thing); 2) I formed the habit of saving the codings more often, because my webpage dies so so so so so frequently ;; 3) I have a deeper understanding about the push/ pop/ rotate/ translate thing now

• Describe what values were stored in the array(s) and how you utilized them. Share your experience while using the array(s).
  • I basically repeated what was taught on Thursday’s class when using the arrays, because I am not confident in my understandings. By repeating this process, I think I am making progress? 
  • Array is very convenient to use, and I really like the circle pattern I produced. One improvement I can make is that maybe I can make it like a rolling ball. But considering my computer (the webpage stops responding so frequently!!!! So sad;;;), I might need to explore it in other codings.

• Explain when/why translate(), push() and pop().
  • I understand the importance of push() & pop() this time!!! ((Maybe the webpage died and I didn’t save the codings, but) When attributing a particular design to the elements, using push() & pop() won’t disturb other things 🙂

• What is the effectiveness of User-Defined Functions?
  • It makes my codings cleaner (especially when I fold it) & easier for me to find what I want to change. Also a lot easier to repeat the actions in the codings, for example, in the “if” function thing 🙂

• What parameters did you added to your functions? How were they manipulate the effects of the functions?
  • I used mouseX/ mouseY when mouseIsPressed, so that my little dog can follow my mouse 🙂
  • One thing I found is that if I put the background in setup, the dog would appear tons of time when MouseIsPressed, because in setup the background would only run once.

• Are you able to identify methods/processes in your programming that are radically changed because of the uses of the functions you defined?
  • Not really (?