Set 01 (Due 9/3)

This is an eight-part homework. (Don’t fret, the parts are small.) The readings, assignments, and projects below constitute the Week 01 Deliverables and are due by 11:59pm EDT on Thursday, September 3rd:

  1. Enrollment Questionnaire & FERPA Waiver
  2. Reading: Course Syllabus documents
  3. Reading: First Word Art / Last Word Art 
  4. Reading: Chapters 1,2, and 3 in GSWp5js
  5. Looking Outwards #01 [Blog]
  6. Assignment-01-A (Mondrian) [Autolab]
  7. Assignment-01-B (Family Composition) [Autolab]
  8. Project-01: (Self-Portrait Face) [Blog]

1. Enrollment Questionnaire & FERPA Waiver

Please read and complete the Enrollment Questionnaire and Waiver.

2. Reading: Course Syllabus documents

We’d like to make sure that you have a clear understanding of our course policies. Please read the following documents carefully.

3. Reading: First Word Art, Last Word Art

Please read the one-page essay, “First Word Art / Last Word Art” by Michael Naimark, a new-media artist who has been active in experimental cinema and virtual reality since the mid-1970s.

Contemplate technical novelty in relation to the arts. Naimark’s opposition is one attempt to understand how culture accommodates new technologies, delineating a spectrum from the well-understood to the utterly novel.

  • Where do you locate your interests along this spectrum?
  • What are some ways in which new technologies shape culture?
  • What are some ways in which culture shapes technological development?

There is no submission due for this reading, but you may be called upon to discuss this article in recitation or class. 

4. Reading: Chapters 1, 2 and 3 in GSWp5js

Please read Chapters 1,2, and 3 (pages 21-61) in your copy of Getting Started with p5.js.

Optional (but recommended!) Reading:

5. Looking Outwards 01.

Topic: Some Technological Art or Design that has Inspired You

This deliverable is your first Looking Outwards report. (To better understand the expectations for Looking Outwards reports, which you will be posting to this WordPress web site, please refer to this document.)

Think about an interactive and/or computational project (from anywhere, by anyone except yourself) that you knew about before starting this course, and which you find inspirational. In a blog post of about 100-200 words,

  • Please discuss the project. What do you admire about it, and why do you admire these aspects of it?
  • How many people were involved in making it, and how did they organize themselves to achieve it? (Any idea how long it took her/him/them to create it?)
  • To the best of your knowledge, did creating this project require the development of custom software/scripts, or did the authors create the project using “off-the-shelf” (commercial) software?
  • What prior works might the project’s creators have been inspired by?
  • To what opportunities or futures does the project point, if any?
  • Provide a link (if possible) to the work, and a full author and title reference.
  • Embed an image and a YouTube/Vimeo video of the project (if available).
  • Label your blog post with the Category, LookingOutwards-01. (You can find these Categories already made for you in the “Categories” section of the WordPress editor.)

Please refer to these instructions for information on the mechanics of publishing to this WordPress blog.

6. Assignment-01-A (Mondrian)

In this assignment, which will be uploaded to Autolab, you will use code to create a static image (in this instance: copying a Mondrian painting). Our objectives are to refine our control of the use of graphical primitives in p5.js.

Perhaps you are wondering why artists copy paintings in museums, as I am doing. The answer is to study, to learn, and to find inspiration from the great masters of the past. Copying directly from works of art gives the artists insight into the creative process — insights which cannot be learned from any other source. [From Gerald King]


  • Using p5.js code and simple visual primitives, reproduce the painting shown below by Piet Mondrian (1872-1944), Composition no. III, with Red, Blue, Yellow and Black, 1929 (oil on canvas, 19¾ x 19¾ in. / 50 x 50.2 cm). [Photo © Christie’s, 2015.]
  • Note: Your code must use synthetic graphical primitives such as rect(), fill(), etc. and not not simply load a JPG/PNG/GIF image file of the Mondrian image.
  • Tip: You can measure the size and color of the painting’s components using Photoshop* or another image editor, such as GIMP or Pixlr. In Mac OSX, a built-in utility called “DigitalColor Meter” may also be helpful.
  • Put the following information as comments at the top of your program:
    • Your name.
    • Your class section or time.
    • Your email address including
    • Assignment-01-A
  • Your reproduction should fill the canvas, and your canvas size should be 600 x 600 pixels.
  • Name your project UserID-01-A, e.g. if your Andrew ID is placebo, then your project name should be placebo-01-A. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-01-A.
  • Zip (compress) and upload your code to our course Autolab tool, using the provided instructions. For simplicity, please zip your entire sketch folder (including the p5.js libraries subdirectory). Your zip file will probably be named something like, but this name is not important. The directory name inside the zip file is important, so rename the directory if necessary before you zip it.

More about this work:

“Painted in 1929, Composition No. III, with Red, Blue, Yellow, and Black is the inaugural canvas in a sequence of paintings–nine in total, all close variations on the same compositional type–that represents the very peak of Mondrian’s classicism and the culmination of the entire previous decade’s efforts. The artist had relocated definitively from Holland to Paris exactly ten years earlier and within months of his move had achieved his canonical neo-plastic vocabulary, a radically reduced set of formal means comprising straight black lines and planes of primary color or “non-color” (white, black, and gray). The difficult task that Mondrian set for himself thereafter and tirelessly pursued was to endow each of these elements with maximum intensity, while combining them in a dynamic, non-hierarchical equilibrium. With the present painting and the ensuing variants, produced over the course of three exceptionally productive years, Mondrian refined these means to the highest degree, attaining a level of purity and balance that would remain virtually unsurpassed in his subsequent oeuvre, as he began instead to explore denser and more syncopated rhythms.” [From Christie’s]

* One way to measure the sizes of shapes in Photoshop is to create rectangular selections with your mouse; the dimensions of these regions are displayed in the “Info” window, which you can access from Photoshop’s “Window” menu. For example, the kitten in this picture is reported as 317 pixels wide:


7. Assignment-01-B (Family Composition)

This Assignment, which will be uploaded to Autolab, is concerned with proportions. It is designed to strengthen your skills in applying arithmetic to variables, and connecting variables to graphical properties. 

It is well known from the science of developmental biology, and in particular, anthropometry, which is the comparative study of human body measurements and properties, that children have proportionally larger heads for their bodies than do adults. Likewise, in art-school life drawing classes, various mnemonic shortcuts are often taught for quickly eyeballing human proportions: for example, that an adult is “eight heads tall” (or eleven in fashion illustration). Consider the following diagram of “ideal” (ahem) proportions:


In this Assignment, you will use the proportions reported in the image above, normativity notwithstanding, to create a static p5.js composition of consisting of three (3) human figures of different ages, subject to the following conditions:


  • Select three different ages from the choices represented in the diagram. (For this assignment, kindly restrict yourself to these options.)
  • We will use very simple graphic primitives to render our family. Each person in the composition should be represented with a pair of ellipses (one for their head and one for their body). Additional visual elaboration is not requested at this time.
  • Your composition must use variables to control the height at which each person is rendered. In your code, create a variable called inch which represents some number of pixels. (For example, in the diagram above, an “inch” is approximately 9 pixels.)
  • Use arithmetic to create person-specific variables, based on the proportions reported in the diagram above. These variables should describe the “ideal” head size (in inches) for someone their age, and their “ideal” body height (expressed in age-appropriate heads). For example, you might have a variable called head10, which describes (in inches) the head size of a 10-year-old.*
  • Render your three persons, passing these variables into the ellipse() functions as appropriate.
  • Put the following information as comments at the top of your program:
    • Your name.
    • Your class section or time.
    • Your email address including
    • Assignment-01-B
  • Name your project UserID-01-B, e.g. if your Andrew ID is placebo, then your project name should be placebo-01-B. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-01-B.
  • Zip (compress) and upload your code to our course Autolab tool, using the provided instructions. Zip your entire sketch folder, please (including the p5.js libraries subdirectory).

* For example, since the 10-year-old has a 7.5-inch head, and has a body whose total height is 7 heads tall (including the head), then at 9 inches per pixel, their total height should end up being 472.5 pixels. For an idea of what your assignment might look like, here’s Golan’s version of the assignment, which features a 10, 3, and 15-year old, rendered at the scale of 5 pixels to one inch:  


This is just an example of an acceptable solution. You are free to use different colors, positions, ages, inch-to-pixel ratios, etc.

8. Project-01: Self-Portrait (Face)

In this Project, which you will upload to this WordPress blog, you’ll use p5.js to draw a face: a simplified (cartooned?) self-portrait. Our objectives are to deepen our familiarity with graphical primitives in p5.js, and to acquaint ourselves with the pipeline of authoring and publishing p5.js executables online.

The face is the most intimate, yet most public, of all our features. A significant portion of our brain is dedicated to processing and interpreting the faces of those around us. The face is one of the few visual patterns which, it is believed, is innately understood by newborn infants.


Kyle McDonald writes:

“One of the most salient objects in our day-to-day life is the human face. Faces are so important that the impairment of our face-processing ability is seen as a disorder, called prosopagnosia, while unconsciously seeing faces where there are none is an almost universal kind of pareidolia.”


  • Using p5.js, draw a self-portrait using approximately 10 graphic elements, such as lines, quads, ellipses, etc. You may use any graphical primitives you please, with the exception that you may not use drawing functions that require the loading of external assets (e.g. images, fonts). Experiment with the use of at least 2 colors in addition to the background color.
  • When you’re done, embed your p5.js sketch in a blog post on this site, using the instructions here. Make sure that your p5.js code is visible and attractively formatted in the post.
  • In your blog post, write a sentence or two reflecting on your process and product.
  • Categorize your blog post, Project-01-Face.