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 and computer language:

This topic explores the ambiguity in human language, as well as the gap between human language and computer language. Even with the advancement of computer-generated imagery, exemplified by OpenAI’s ChatGPT and Google’s Gemini, the same text prompt will still generate a wide variety of different outputs, revealing the differences between how humans and computers process information.

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 in 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 simple shapes (rectangles, squares, circles, ellipsesovals, pointsarcs, lines, etc) and writing down what color each shape should be.
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.