Week 4

Functions and Modularity

Intro

This week we’ll be learning more about one of the fundamental structural elements of programs: the function. In the same way that a variable declaration creates a name and binds it to a value, functions associate names with reusable blocks of code.

They allow you to organize your programs as they grow, make your intentions clear through descriptive names, and add a layer of abstraction between the high-level goals of your code and the low-level details that accomplish them.

Sync Up

• P5 & JavaScript questions
• Share your p5-based interpretations of your painting
• Using functions to organize code
  • Code examples
    1. grow
    2. swatches: before and after
    3. returning values
    4. house: before and after
  • P5 functions used in the examples
    • setup & draw
    • push & pop
    • beginShape
    • vertex
    • textAlign
    • textWidth
    • translate
    • scale

Activities

• Read about functions and local variables in javascript
  • What is a function
  • Functions in js
  • Function basics

Assignment

• Adapt your 64-shape p5 sketch to use functions, separating the groups of shapes into logical subjects and layers. These functions should have names that describe the contents they will draw to the canvas and should make use of parameters to control how (or where) they draw.
  • Details: create two new sketches that make use of your 64 shapes
    1. Create one version that replicates your previous sketch as exactly as possible: the code will be different but the image it results in should try to be identical to the original
    2. Create a second version that uses all the custom functions that you wrote for the first, but has a new setup() function. Use it to create something new from the elements you placed in each of your functions. Try experimenting by
       • Changing the order in which you call the functions
       • Using translate() inside of functions that take x and y arguments to control where they draw
       • Using scale() inside of arguments that take a magnification argument
       • Calling functions more than once with different parameters to create multiple copies
  • Starter Code: Use the P5 Editor to “duplicate” the sketch you completed for this week, then delete the draw8, draw16, and draw32 functions — just use the draw64 function’s contents to start breaking things into functions
  • Due date: 10/1 by 6 a.m. EDT
  • Format: Two P5 Editor-based projects: one with the ‘accurate’ recreation of your original, and one with the ‘creative’ interpretation of it
  • How to submit: Paste the links to your p5 projects into this form