Recitation Exercise
- Deciding to do something totally new instead of using the one I worked on last recitation.
- Developing the idea of using keyboard and mouse to make a figure of a person move.
- I first wanted to apply the bouncing ball code we made in class and creating a game of player controlling the person to avoid the bouncing ball. However, I find that none of the functions we had learned could be used to detect if the ball had hit the person. I asked Young for help and he gave me a hint to use the “dist()” function. I successfully figured out the proper way to use it by referring to references for Processing. However, it seemed not working well and correcting it is far too complicated for me. After several attempts, I decided to have a change.
(source:https://processing.org/reference/dist_.html) - So, I changed my ideas. Still using the person figure, I made a model of crossing the road. By pressing right and left, the player can make the figure move. By pressing the mouse, the person will be controlled to cross the road.
(This is my first attempt. One problem is that as soon as the mouse is pressed, the person would go straight forward even when the mouse stop pressing and the light turns red again.)
(So here comes the modified edition. I add several lines to make the person stop going forward when the mouse stop pressing. I also made some changes of the items in the picture to make it more like a road.)
code: https://gist.github.com/Ellie-1809/fe03cb09b33005c92b506c71829c2810
Recitation Homework
- Create a Processing sketch with a circle or square at the center of the screen.
- Next, modify that Processing sketch so that the circle or square periodically expands and contracts.
- Then, modify the Processing sketch so that the outline changes color smoothly.
- Finally, modify that Processing sketch so that the circle or square moves around the canvas based on keyboard’s arrow key input.
- *Bonus: I tried to make a border by setting a certain range for x value and y value of the center point of the circle.
code:https://gist.github.com/Ellie-1809/8e89c4f4738ebfb0569c5dab1da1dfa8
Things I learned: the most valuable experience I had during the process of making my little game is learning to use the function of “dist()”. Though it did not work well, my experience of reading the instructions and trying to figure out how to apply it prepares me better for future exploring and self-learning. Also, I learned to use multiple ways to display the same result(for example using for() function as substitutes for repetitive coding), which is an important thing in modifying the code(e.g.showed below).
Meanwhile, I also figured our one thing that I failed to fully understand in class – how Processing makes figures seem like moving. Many frames result in a seemingly “moving” picture and that is why we have to reset the background color at the beginning of draw() to avoid multiple frames existing on the same canvas.
Functions: self-defined functions(drawPerson(), drawTrafficlight(), etc.)
For(){}(loop function)
If(){}function
keyPressed(){}function
colorMode()function
stroke() (this may not be much interesting but definitely useful and basic)
other resources used: color reference: http://tool.oschina.net/commons?type=3