2. Creative Code

Summary of Deliverables & Due Dates

09/15 Thu: 2A, 2B (OpenProcessing Account; Looking Outwards)
09/20 Tue: 2C, 2D (Reading-Response I; Graphic Primitives)
09/22 Thu: 2E (Reading-Response II)
09/27 Tue: 2F (Generative Designs)
09/29 Thu: -- (No deliverable due this day)
10/04 Tue: 2G (Drawing Tool)
10/06 Thu: 2H (3-Button Mouse)

This assignment has 8 parts (distributed over three weeks), as follows:

• 2A. Create an OpenProcessing Account (5 minutes, due 9/15)
• 2B. Looking Outwards: Procedural Generative Art (45 minutes, due 9/15)
• 2C. Reading-Response I: Generative Art Narratives (45 minutes, due 9/20)
• 2D. Graphic Primitives (3 hours, due 9/20)
• 2E. Reading-Response II: Compton/Galanter (1 hour, due 9/22)
• 2F. Generative Designs (6 hours, due 9/27)
• 2G. Drawing Tool (5 hours, due 10/04)
• 2H. Get a 3-button mouse (5 minutes, due 10/6)

---

2A. Join our OpenProcessing Class

(5 minutes, due 9/15) OpenProcessing is a site for hosting and publishing artworks made with p5.js. Your work will be stored online, but privately (just for our class). Please complete the following before class on Thursday, 9/15.

• Locate the special link to join our OpenProcessing classroom. This link has been sent to you by email and in our Discord #Announcements channel.
• Once you follow this link, you will be asked to create an account at OpenProcessing.org if you don’t already have one. Create an account for yourself. It is recommended that you choose an anonymous public identifier.
• Bookmark our OpenProcessing classroom, whose URL is https://openprocessing.org/class/80814.
• Post a message via Discord, in the channel #2A-openProcessing, which includes a link to your OpenProcessing user page. (For example, the professor’s OpenProcessing account is https://openprocessing.org/user/6660.)

---

2B. Looking Outwards: Procedural Generative Art

(45 minutes, due 9/15) In this exercise, you will look at work by some artists who use code and procedural algorithms to generate visual work. In general, their work does not use artificial intelligence or machine learning. Instead, they write code which uses randomness to generate a variety of related results.

For each of the following artists, spend a solid 5 minutes browsing each of their online portfolios. Identify a project that you like. Post a message to the Discord channel #2B, with an image of the project and a sentence or two about why it caught your eye.

1. Zachary Lieberman
2. Manolo Gamboa Naon
3. Saskia Freeke
4. Takawo Shinsuke
5. Lia
6. Emily Xie

Note: some of these artists have hundreds of projects in their linked pages. To encourage you to make an effort to go beyond their first page of results, I state the policy: If two students write about the exact same artwork, neither student will receive credit.

---

2C. Reading-Response: Generative Art Narratives

(45 minutes, due 9/20) Skim the following four articles, written by artists describing their process of developing specific generative artworks. Select (just) one of the narratives, and in the Discord channel #2c-readings-narratives, write a few sentences describing your observations and feelings about that artist’s process.

• Robert Hodgin, Meander (2020)
• Casey Reas, Phototaxis (2001-2021)
• Vera Molnar, My Mother’s Letters (1988-1995)
• Aleksandra Jovanic, Chromatlas (2022)

---

2D. Graphic Primitives

(3 hours, due 9/20.) This exercise has two parts. Both are due by the beginning of class on 9/20. Your work will be reviewed in class.

Before beginning this project, spend 10 minutes browsing the p5.js Reference and Examples. If you’re stuck, give a shout in the #haaaalp channel in the course Discord.

1. “Toolchest” Composition

Create a p5.js project with a canvas whose dimensions are no larger than 800×600 pixels. Explore the p5.js graphics toolset by creating a static composition in which you draw at least one of each of the following types of graphical primitives: line segment, rectangle, rounded rect, ellipse, filled arc (pac-man), point (dot), triangle, Bézier curve, polyline, and polygon. Experiment with the shapes’ options and parameters, such as fill and stroke colors, line weight, transparency, etc. Add your sketch to the appropriate assignment (#1) in our OpenProcessing classroom. In the Discord channel #2d-graphic-primitives, post a screenshot of your OpenProcessing project.

• Note: You are neither asked nor expected to reproduce the above composition.
• Advanced students: optionally, link some properties of this composition to randomness or to the mouse coordinates.

2. Drawing from Life

Observe a real location (such as your room) for 5 minutes; you will use these observations to make a still life, interior, or landscape. You are encouraged to take ‘notes’ in the form of a drawing on paper; but in the work that follows, you are not permitted to trace a digital photo. Now, in a project whose canvas dimensions are no larger than 800×800 pixels, create a drawing of your scene using p5.js code. Add your sketch to the appropriate assignment (#2) in our OpenProcessing classroom. In the Discord channel #2d-graphic-primitives, post a screenshot of your p5.js project. (Images above: Coding from Life exercise by Laurel Schwulst.)

Here are some optional YouTube tutorials that may be helpful:

• 1.2 2D Primitives (Xin Xin)
• 1.3 RGB Color & Blendmode (Xin Xin)
• 1.3 Shapes & Drawing (Coding Train)
• 1.4 Color (Coding Train)
• 9.18 p5.js with OpenProcessing (Coding Train)
• Basics of OpenProcessing (Dane Webster)

---

2E. Reading-Response II: The Oatmeal Problem & Generative Art Theory

“Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.” — Philip Galanter

(~1 hour, due Thursday 9/22.) For this deliverable, you will read two texts, and briefly respond to a few questions. In Discord posts in the #2e-compton-reading and #2e-galanter-reading channels, you are asked write brief (50-word) responses to the following questions, which are below.

#2e-compton-reading

Locate the article by Kate Compton, “So you want to build a generator…” (2016, PDF here). Compton’s article appears in its [complete] original here, but I only ask that you read the two-page section near the bottom which begins, “Aesthetics: the toughest challenge”, where she discusses oatmeal. I have also uploaded a PDF of this excerpt for you here: kate-compton-oatmeal. Now respond to the following question in the Discord channel #2e-compton-reading:

Question 2E-1. Please re-explain Compton’s “10,000 Bowls of Oatmeal Problem” in your own words. Can you think of a scenario in which this might be an actual “problem”, and another in which it isn’t? Speculating for a moment, what do you you think are some artistic or technical strategies for overcoming this problem?

#2e-galanter-reading

Read the first 20 pages, and skim the final 10 pages, of the 30-page article, Generative Art Theory (2003) by Philip Galanter. This article appears as Chapter 5 (pages 146-175) in A Companion to Digital Art, Edited by Christiane Paul, 2016 by John Wiley & Sons, Inc. This PDF/eBook is available at: here (PDF) or at the (online) library here. Now respond to the following questions in the Discord channel #2e-galanter-reading:

Question 2E-2. Be sure to have read the first 20 pages of “Generative Art Theory” (p.146-166). In your own words, and in just a few sentences, discuss an example of something you like which exhibits effective complexity. (It doesn’t have to be something made by people.) Where does your selection sit between total order (e.g. crystal lattice) and total randomness (e.g. gas molecules, white noise, static)? Include an image which illustrates your selected thing.

Question 2E-3. Skim the remaining 10 pages of Galanter’s article, in which he outlines 9 different problems with generative art (The Problem of Authorship; The Problem of Intent; The Problem of Uniqueness; The Problem of Authenticity; The Problem of Dynamics; The Problem of Postmodernity; The Problem of Locality, Code, and Malleability; The Problem of Creativity; The Problem of Meaning). Select one of these problems for which you yourself feel some sort of internal conflict or personal stake. Discuss your internal conflict. Which side of the argument do you come down on?

---

2F. Generative Designs

(6 hours, due Tuesday 9/27. Code sketches in OpenProcessing, plus write-ups in Discord)

• This assignment has four sub-parts, all of which should be submitted through OpenProcessing. Give yourself adequate time. We will briefly discuss all of the work, but 2F-4 “Pattern” is the main creative project that will be discussed in depth next Tuesday.
• In the Discord channel #2f-generative-designs, please put screenshots of all four sketches.
• You will likely find these helpful tools, helpful. Did you look at them?
• In the exercises in this section, I recommend you use the following structure of interaction for testing and developing your work. Whenever the user clicks, a new random drawing is made. (This is accomplished with the alternating use of noLoop() and loop().)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background("lightgray"); 
  circle(random(width), random(height), 100); 
  noLoop();
}

function mousePressed(){
  loop(); 
}

2F-1. Face Generator

Consider the following:

• Matthias Dörfelt’s Weird Faces (2012) — The artist’s attempt to recreate his doodling drawing style in code.
• Herman Chernoff’s multivariate face visualizations (1973) — displays of multivariate data in the shape of a human face, whose individual parts represent values of the variables by their shape, size, placement and orientation.
• Hyphen Labs, Prescribed to Death (2016): An installation in which, every 24 minutes (the frequency of U.S. opioid deaths), a script directs an onsite CNC machine to carve a novel face into an additional pill.
• Larva Labs, Cryptopunks (2018): 10,000 unique, computationally generated faces, some of the first NFTs.

Now: In OpenProcessing, write code to design an image of a face, frontally viewed, that is parameterized by at least three dimensions of variability, but preferably more. Above you can see a face generator example I made.

For example, you might have variables that specify the size, position, color, or other visual characteristics of the eyes, nose, and mouth. The variations in these features may be used to alter things like the face’s expression (happy, sad, angry); the face’s identity (John, Maria); and/or the face’s species (cat, monkey, zombie, alien). Give special consideration to controlling the precise shape of face parts, such as the curves of the nose, chin, ears, and jowls, and/or characteristics such as skin color, stubble, hairstyle, blemishes, interpupillary distance, facial asymmetry, cephalic index, and prognathism. Consider having continuous parameters (such as size and position of features) and discrete parameters (such as the presence of piercings, or the number of eyeballs). Using the recommended code structure above, your sketch should generate a new face whenever the user presses the mouse button.

2F-2. Nested Iteration With Functions: Repeated Motif

The purpose of this exercise is to ensure that you are familiar with nested iteration, and (optionally) to give you practice creating your own functions. 

• In OpenProcessing, create a new sketch whose dimensions are no larger than 600 x 600 pixels.
• Write code that renders a simple, small visual motif, such as a leaf, face, heart, flower, strawberry, etc. You may use any colors and shapes you please; you do not need to copy the face motif shown here. Optionally, you can re-use the faces you generated in the first part (2F-1) of this assignment.
• Using “nested iteration”, write additional code that renders this motif numerous times, in a grid.
• Optionally, you can add some randomness so that each repeat of the motif is slightly different from the others.
• Optionally, you can encapsulate the code for your motif in a “custom function”. (For more information on creating your own functions, a process also known as functional abstraction, you may refer to Coding Train video 1 (12m), Coding Train video 2 (10m), this Example, or this Tutorial.) You are encouraged to give your function arguments that determine where the element will be positioned when the function is invoked. Using iteration, call your function to display a grid of these elements.

2F-3. Nested Iteration + Randomness Gradient: Recoding Schotter (1968)

The purpose of this integrative assignment is to combine problems in nested iteration and graphical transformations, and introduce experience developing a gradient. 

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. —Gerald King

In February 1965, Georg Nees (1926–2016) became the first person to ever exhibit artwork created with a computer. His programs were written on punched paper tape before being physically generated by a drawing machine, the Zuse Graphomat Z64 plotter. (His exhibit “aroused much controversy.”)

In this exercise, we will hone our skills by copying a masterwork. You are are asked to recreate Nees’ artwork Schotter (“Gravel”, 1968), in the collection of the Victoria & Albert Museum, London. In this work, Nees presents a grid of 12 by 22 squares which delineate a gradient from order to disorder. As the drawing of the squares progresses from top to bottom, the position and rotation of the squares become increasingly disordered.

• In OpenProcessing, create a sketch whose dimensions are 680 x 1000.
• To the best of your abilities, write a program which recreates the logic and aesthetics of Schotter. Pay attention to details like the number and size of squares, their amount of displacement, and the proportions of the margins. (Note: you are not expected to reproduce the specific positions and rotations of each square in Nees’ artwork).

2F-4. Generative Pattern

Images by Saskia Freeke.

Write code to generate “infinite” variations of a tiling pattern or repetitive textural composition, as for wallpaper or fabric. Your pattern should be designed so that it could be infinitely tiled or extended. Design something you would like to put on the walls or floor of your home, or that you could imagine yourself wearing.

Suggestions

Give consideration to:

• Symmetry, whether achieved through reflection or rotation. Experiment with 2D graphics transformations, such as rotation, scaling, and mirror reflections
• Rhythm. Try using nested iteration to develop 2D patterns or other gridlike structures
• Positive vs. negative space
• Foreground, middle-ground, and background “layers”
• Detail at multiple scales, i.e., variation at the macro-scale, meso-scale, and micro-scale.
• The potential for surprise through the placement of infrequent features
• Give attention to color. Feel free to use a palette creator, a palette extraction tool, etc.
• Precise control of organic and/or geometric shapes. Consider creating a helper function to abstract the way
  in which a complex visual element (such as a flower, animal, fruit, or fleur-de-lis) is rendered throughout your design.
• Randomness. Give consideration to the depth of variation in your pattern, and how randomness shapes the design. After how many viewings does your pattern become predictable? How might you forestall this as long as possible? At least 3 different parameters must be subject to variation.

Submission Details

Now:

• Check out these pattern inspirations and skim this article.
• Sketch first on paper.
• Create your pattern at OpenProcessing.
• Export 2 high-resolution images (4000-5000 pixels wide) using the code (see below).
• Create a Discord post in the channel, #2F-pattern.
• Write 100 words (3-4 sentences, roughly a paragraph) narrating your development process.
• Embed some images of your project in the post.
• Also include some scans or photos of your paper sketches.

---

2G. Drawing Tool

(5 hours, due 10/04)

Using p5js, create an artistic drawing tool, for use (or performance) by a human user. It can have a built-in aesthetic, but try to make your tool flexible enough that its user can produce different images with it. Your program should produce images that are impossible or difficult to make with a “standard” drawing application (e.g. like Photoshop). Note: On the submission day, we will use each others’ software to make new drawings.

• Using p5, in a canvas no larger than 800×600 pixels, make a drawing tool that incorporates input from the mouse and keyboard. Pressing the space bar should clear the canvas.
• Submit your project to assignment #7 in our OpenProcessing course site.
• Write some instructions about how to use your project. Put the instructions in a block of comments in your code. (Your peers may need these instructions in order to use your tool.)
• Create a series of drawings or digital paintings with your custom tool. In the Discord channel #2G-drawing-tool, paste screenshots of 2-3 drawings you’ve made with your tool. In the Discord, write a few sentences about what your tool does, and what you like about it.

Here’s a very simple drawing program to get you started:

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  if (mouseIsPressed){
    circle(mouseX, mouseY, 10); 
  }
}

Here’s another:

function setup() {
  createCanvas(400, 400);
  background(220);
  strokeWeight(5); 
}

function draw() {
  if (mouseIsPressed){
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

---

2H. Get a 3-Button Mouse (and a Hard Drive)

(5 minutes, due 10/06) Obtain a 3-button mouse. We will soon be using 3D applications like Blender and Unity. If you don’t have a 3-button mouse for your laptop, you will really hate life. I like the Logitech M100 wired mouse ($9, or $14 at the CMU Computer Store), though you may also need a USB-A to USB-C adapter ($14). Alternatively, you could get a USB-C wired mouse ($17) or a wireless mouse. It doesn’t really matter; just make sure you have a mouse with three buttons.

From the other 60-210 section, we are discovering that you will definitely soon need an External Hard Drive. Hopefully you still have the drive that you were required to get in EMS1.  You will be working with big files that can’t be stored on the lab computers or in the cloud. Having an external hard drive  will be essential to backing up your work and transporting it from home to school. A USB thumb drive is not recommended, both because of capacity and because they are so easily lost. The minimum specifications are: USB 3.0, 7200rpm or SSD, 1TB of capacity.

LACIE is a reliable manufacturer and produces rugged portable hard drives. An excellent solid-state drive recommended by our faculty is this one. Make sure it works with your personal computer and on the computer labs. If you work on mac and win and it’s empty, format it to exFat (it will erase the contents); other formatting modes may not allow access from both systems.