Week 2 Exercise
PART 1
1. Why doesn’t this sketch work? Duplicate and rewrite it so that a circle draws on the canvas. Try to come up with at least two solutions. Add comments to your code explaining your answers.
2. Create a canvas that is 800px wide by 600px high. Draw a rectangle in the middle of the screen that is half the width and half the height of the canvas without using any hard-coded numbers in the rect( ) function.
3.Moving circles:
Part 1: Move a circle from the middle of the screen to the right side of the screen.
Preview
Code
Part 2: Add 3 more, 1 moving left, 1 moving up, 1 moving down.
Preview
Code
Part 3: Add 4 more, 1 moving towards each of the 4 corners of the canvas.
Preview
Code
Part 4: Make one of your circles move 10 times faster.
Preview
Code
4. Duplicate and rewrite this sketch using object literals. The result on the canvas should be the same.
Code
5. Revisit the code example from Question 1 of Week 1’s exercises. Rewrite the code such that the rectangles are responsive if the canvas dimensions change.
Code
PART II- Creative Exercise
Experiment with a sketch that includes all of these:
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
Code
Preview
- What did you do?
- -For the one item controlled by mouse movement, I added a mouseX,mouseY property to the pupils and eyebrows so that it can create the look of the eye looking around and also creating more expression through the movement of the brows. I also added clouds in the background as a constant moving element by using object literals as well as speed and direction. For the elements that change every time you play the sketch, I added a random color property using random r,g,b values in the background as well as the hair and the colour of the clouds.
What worked? What didn’t work, and what steps did you take to try to solve this issue?
- -I think that the items controlled with mouse movement turned out really well- I tried to experiment with the range that the object can move a lot and also making the objects not work separately but together to still keep the image making sense. I really like that it now looks like the person is looking around and creates more facial expression through movement of the brows. I also think that the random color property for the background and hair was a simple but effective change to the sketch that makes it more interactive. In terms of the moving clouds in the background, I definitely wish I could have done more because I feel like I went through unnecessarily long steps because I could not figure out a shortcut solution. I began wondering if there was a way to better group elements of a complex shape and apply properties such as speed and direction to them all together. I also wanted to play with more properties of shapes and color such as opacity, value, etc. One of the problems that I ran into was that linking a random r,g,b property to multiple objects creates a blend of them and essentially erases one of them from the sketch which is something that I had to play around with to figure out.
Did any code-related questions come up for you?
- -I think a lot of the code-related questions that came up were resolved through trial and error, especially with adding the mouseX,mouseY properties and figuring out mapping. I think the biggest issue I had was with the clouds because the code for these shapes became really extensive and confusing to keep track of. Throughout the process, I also just became interested if any more traditional digital drawing tools that can be used in Photoshop or Indesign can be used in p5.js as well because I definitely started to feel constrained by working with mostly shapes and lines.
︎︎︎ BACK TO ITP BLOG