Homework
Drawing Portraits

For this weeks homework, I want you to draw a portrait in p5, using the 2D Primitive Shape functions, color functions, positions functions, and order of operation techniques.

More specifically, I want you to either draw a self-portrait (i.e. of yourself) or a portrait of a monster (imaginary or based from someone else’s).

This assignment is your first chance to really dig into programming with p5. It will test you and your ability to comprehend what is going on right now in this class.

How to Proceed

To work on this assignment, I would proceed as follows;

• Play, play play.

Play a whole bunch before starting in earnest this week. Give yourself time to make silly drawings and explore how all of the functions introduced work. Then;

1. Make sure you have worked through all of the past two weeks content, explored the examples, played with them in the browser, and studied the code links.
2. Physically sketch a monster-portrait or self-portrait.
3. In the top level of your Repo, duplicate the empty-project/ directory, labelling it hw-4/.
4. Open this new directory, and the sketch.js file.
5. For each part of your sketch, write next to it what shape functions, transformation functions, and color functions you might use to create the section.
   • get specific with this step. For example, you might break the head down into multiple parts. First identifying functions for the skull. Then figuring out what functions and techniques you might use to create the mouth and eyes. etc.
6. Create a basic sketch.js file, with;
   • a setup() function
     • that also creates a canvas.
   • a draw() function
     • that specifies a background color at the top of the function.
     • comments throughout about where you might write each section fo code (i.e. ‘body’, ‘legs’, ‘head’, etc.)
     • Consider if you should create “sandboxes” for some of these sections, to draw within. (i.e. push() & pop())
     • Consider, whether you want to move the entire grid (x:0, y:0), to the center of the canvas with translate()

At this point, you sketch.js file might look something like;

function setup() {
    // create a canvas to draw my portrait on
    createCanvas( 600, 900 );
}

function draw() {
    // set the background color
    background( 'rgb(78, 249, 135)' );

    // *****************************************************
    // create a sandbox for the entire character
    push();

    // move the entire grid for this character to the center of the canvas
    translate( 300, 450 );


    // ** BODY **********************************
    push();
    // body code goes here

    pop();
    // **END BODY**


    // ** ARMS **********************************
    push();
    // arms code goes here

    pop();
    // **END ARMS**


    // ** HEAD **********************************
    push();

    // head code goes here
    // make skull first


    // **MOUTH**
    push();
    // mouth code goes here

    pop();
    // **END MOUTH**

    // **EYES**
    push();
    // eye code goes here

    pop();
    // **END EYES**

    pop();
    // **END HEAD**


    // ** END CHARACTER SANDBOX *******************
    pop();

}

This work-process is one we will discuss often throughout the semester. Essentially, the above code structure helps your break this BIG PROBLEM into smaller sub-problems. This is done by identifying each sub-section of the code ahead of time, and working just on each sub-section. You of course could go even further, breaking the “body” into additional sub-sections/sub-problems.

After breaking the code into sub-sections, start to work on each section, remembering to check your work often in the browser.

You should also make frequent commits in your repository as you make incremental progress (i.e. after finishing the main structure, after completing the body, etc. )

Be Gentle on Yourself

This homework will take quite a bit of time. Give yourself plenty of time to do it. You should also be gentle on yourself. There is no point in beating yourself up when you get stuck. You will get stuck! How Exciting! Just play around, be methodical in your approach; check the error console in your browser, ask colleagues for help, post to the issues board, take advantage of the lab, and come to my office hours

Be gentle on yourself, this process takes time, lots of energy, and lots more time.

When You Are Finished

When you have finished with your portrait, you should;

• write your weekly readme,
• upload your code to GitHub,
• add you links to the HW-4 homework submission forum via Moodle