Lost and Found

The Necklace. Made in p5.js by Ardak Mukanova.

Introduction

We remember the past through words and images. When we describe a memory to a friend, our spoken words construct an image in their mind. This image is their interpretation of our memory and, most likely, will look very different from the actual image in our mind.

If I ask you to describe your friend’s face to me, you might say, “brown hair, brown eyes, freckles,” but that description applies to many people, and might not help me identify your friend when I run into them next time. Humans can communicate imperfectly and still convey meaning because we expect and accept some level of ambiguity. In contrast, when we communicate with a computer through code, we must be very precise because it doesn’t interpret or infer the way a human does.

For example, this is how a smiley face is described in human language (what we might say) versus computer language (code):

Human Language	Computer Language
The person is looking straight ahead	noFill();
and carrying a smile.	strokeWeight(4);
	stroke(0);
	ellipse(200, 200, 100, 100);
	arc(200, 215, 33, 30, 0, PI);
	fill(0);
	ellipse(180, 190, 10, 10);
	ellipse(220, 190, 10, 10);

This topic explores the ambiguity in human language and the gap between how humans and computers understand it. Even with the advancement of computer-generated imagery, like OpenAI’s ChatGPT, DALL-E, and even AI-generated TikTok filters, the same text prompt will still generate a wide variety of different results, revealing the differences between human intention and machine interpretation.

Completed in pairs of two, you will work with a partner and exchange detailed descriptions of a personal object you have lost in the past. Then, based on the descriptions, you will re-create the object for your partner using computer code with p5.js.

Premise

Draw an object described to you in plain language through code.

Learning Objectives

Grade 6~8

• Foundational understanding of the p5.js Editor environment and basic drawing features.
• Gaining insights into assembling complex shapes using primitive shapes only.
• Comprehending visual arts vocabularies, including shape, size, color, composition, symmetry, and asymmetry.
• Comparing tradeoffs between allowing information to be public and keeping information private and secure.
• Ability to explain potential security threats and security measures to mitigate threats.

Grade 9~12

• Comprehending and translating between different representations of data abstractions in color.
• Gaining insights into transformation features in p5.js.

Technical Terms & p5.js Elements

Grade 6~8

• setup(), draw()
• Cartesian coordinate system
• rect(), ellipse()
• Anchor point
• rectMode(), ellipseMode()
• fill()
• stroke(), noStroke()
• Arithmetic operators: +, -

Grade 9~12

• colorMode()
• blendMode()
• scale(), translate(), push(), pop()

References & Artworks for Discussion

• Pumpkin, 2018, Yayoi Kusama
• Exploring Kara Walker’s Radical Use of Silhouettes, Art21
• Book from the Ground, Xu Bing

Timeline

This project will take approximately three to four 45-minute sessions:

1. Discussing art references, warm-up Exercise, introduction to p5.js.
2. Assigning partners. Exchanging detailed descriptions of lost objects.
3. Recreating the partner’s lost object using p5.js.
4. Sharing out.

Warm-Up Exercise

Planning your Lost & Found Project

1. Students exchange written descriptions of their objects with one another.
2. Then, each partner draw the object on paper by using ellipses and rectangles only.
3. After 5 minutes of drawing, students take turns showing their drawing to the other for feedback. Feedback should be minimal and should not add too many complicated elements to the original drawing.