DO: Functions are the basic unit of labor in your code. Take a sketch you’ve already done and re-organize the code into functional units of labor that you define. You can also conceive of an entirely new world of labor. What kinds of labor does it take to make your sketch run?
- I used a p5js sketch I made for my Visual Language class where we had to make compositions using a specific color palette - mine was orange and blues and one of my sketches was this one of a sunset: I organized the different aspects of code into their own functions:
[An orange and dark blue sunset with orange twinkling stars. Link to p5 editor with code: https://editor.p5js.org/zoemargolis/sketches/FX8FXdBfn](https://editor.p5js.org/zoemargolis/full/FX8FXdBfn)
An orange and dark blue sunset with orange twinkling stars. Link to p5 editor with code: https://editor.p5js.org/zoemargolis/sketches/FX8FXdBfn
- The sky gradient I borrowed and edited from this example on the p5js reference website, and while it was already written into its own function, I was not using everything that the example did so I was able to clean it up and simplify it.
- My sun and stars I had originally drawn in the main draw() function, so I moved them to their own separate functions that I could call individually from draw() to clean that up.
Worksheet:
- Organize the example Zoog portrait into functions so that you can understand what it’s doing without right comments and you can easily turn different parts of the sketch on/off by commenting in/out calls to your functions.
- https://editor.p5js.org/zoemargolis/sketches/gGhCv7KYq
- Take one of the functions from your re-factored Zoog portrait and re-write it so that you can call the same function twice and have it draw slightly different versions of the same thing. (e.g. Draw a big eye. Draw a little eye.) Alternatively you can try doing this on your own self-portrait.
- https://editor.p5js.org/mpm9038/sketches/ewnTP4qEo
- Define a portable function that adds two numbers together and returns the sum. You should be able to copy and paste this function definition and only this function definition into a different sketch and use it without creating errors.
- https://editor.p5js.org/zoemargolis/sketches/UrhEgVUg2
- Re-organize your bouncing ball code from Week 3’s quiz into at least 2 functions. Challenge: Create a reusable bounce() function that can be used to bounce positions, colors, anything you can think of.
- https://editor.p5js.org/zoemargolis/sketches/pwYUC-r_A