CLASS
PROJECT
CLASS
PROJECT
DESIGN 6400
Research Prototyping: Online Interactive AI Ethics Exhibition
BACKGROUND
The project was to create and present a project combining emerging technologies and topics of their choosing to explore, extend, and/or integrate one or more of their previous design research concepts or projects. The project should have a clear emphasis on making, with a balance between prototyping, functionality, speculative concepts, and design research.
Project description is from DESIGN 6400 Course's Syllabus by the professor, Matthew Lewis at Department of Design in Ohio State University.
LINK TO THE PRESENTATION
KEY LEARNINGS
Deeply intrigued by the dual nature of artificial intelligence. I am equally concerned about AI’s potential to strip away the human essence from our interactions and decisions. Through virtual online exhibition, I invite viewers to explore the often-overlooked harms of AI by interacting with the p5.js interactive art poster series. By leveraging emerging technology and the creative possibilities of p5.js, I unveiled the forbidden stories of AI—stories that challenge us to think critically about its role in shaping our future.
I chose to learn p5.js, a creative coding platform. Initially, I only knew that p5.js could create interactions and sound. Since my research interests lie in AI and AI art, I was curious about how p5.js could connect to AI. As I delved deeper into p5.js, I discovered that it could also "generate" art, much like generative AI. When I explored artwork created with p5.js, I saw its potential to produce pieces that were more organic, complex, and abstract compared to AI-generated images. I was fascinated by how p5.js could transform data into art, offering a process like generative AI, where rapid prototyping and experimentation are possible without limitations.
Inspired, I began creating multiple artworks just like I did with the second project with generative AI. I now aspire to learn how to develop AI and integrate AI models into p5.js to create real-time AI interactions. The idea of interacting with data in real time is particularly exciting to me, as it engages and stimulates the audience in unique and memorable ways, making the data feel more tangible.
At the beginning of this class, I was hesitant and intimidated by the idea of learning new technology. However, I’ve come to realize that understanding emerging technologies is crucial because they shape our present and future. When new technologies emerge, they create gaps that scholars and professionals must recognize and address through research. This class has provided me with the opportunity to explore these technologies and their related systems, which are becoming an inevitable part of our society.
I am grateful for the chance to learn, and I will continue acquiring knowledge until it transforms into wisdom!
Week 1
I first used Microsoft Word document to take notes while learning from YouTube tutorials. Most of my initial learning came from watching the YouTube channel “The Coding Train,” recommended by Professor Matt Lewis. I completed tutorials on variables, increment operators, and the random function. After gaining some basic skills and knowledge, I decided to explore tutorials on the official p5.js website. At one point, I fell into a slump, questioning why I was even learning p5.js. It was hard for me to learn something new without a clear purpose. That’s when I revisited my initial idea of creating an AI ethics guideline or AI literacy tool for children. I originally thought of focusing on AI literacy but began to wonder how I could approach it with using p5.js. I started searching what other people are making with p5.js and I found out there are a lot of interactive generative art series made with p5.js. So I started to build up ideas on creating interactive art with p5.js.
Week 2
Now, I’ve paused watching YouTube tutorials and have dived deeper into the p5.js website tutorials. I’ve been reading them thoroughly and practicing the examples on my own.
For my prototype, I’m considering creating AI literacy tools or AI ethics guidelines for children using p5.js. For instance, I could design toolkits like how Design Ethically's Toolkit uses illustrations to explain concepts.
While thinking about introducing AI to children, I started questioning: When is the right time to teach kids about AI? My own child is in second grade and knows very little about AI. During a previous assignment, I asked him to help me create a prompt for generating an image using Discord, but I had to rewrite and refine his version because it lacked the necessary details. I didn’t want to talk to him about the harms or ethics of AI yet, as he doesn’t even know what AI is.
I came across an article titled How Young is Too Young to Teach Students About AI? which raised some thought-provoking points. I wished the article had also surveyed parents and children who already know or use AI. According to the article, teachers, district leaders, and principals generally recommend introducing AI concepts between 6th and 12th grades. However, challenges like academic demands, social-emotional learning priorities, and safety concerns often leave little room for teaching about AI.
I wonder if these challenges are still the same today, especially since AI usage has become much more widespread.
Week 3
I continued studying examples from the p5.js website and followed the tutorials step by step. While trying to create nine squares in p5.js, Matt advised me to focus on learning how to generate multiple squares dynamically, rather than typing out each one individually. It’s easy for me to draw and arrange shapes in Illustrator, but I needed to understand why I was using p5.js instead of Adobe Illustrator.
I started exploring what other people had created with p5.js by searching on Google and YouTube. I found many generative art examples made with p5.js, and I thought, "Why not create generative art myself?" I’ve always loved art, and the p5.js creations I saw felt more organic compared to the generative art made by AI in tools like MidJourney. They had a more abstract and expressive quality.
Week 4
I knew I wanted to create something related to AI and make it public-facing. That’s when I thought: What if I create interactive art pieces that explore AI ethics? Excited by the idea, I started brainstorming with ChatGPT. I shared my vision:
"I’m a p5.js artist opening an exhibition featuring a creative series of interactive art posters about AI literacy and AI ethics."
ChatGPT suggested various themes for AI ethics and interactive graphic elements. I liked some of the suggestions but decided to explore how p5.js features could represent different aspects of AI ethics. After researching articles on AI principles, ethics, and literacy, I came up with keywords that I wanted to express through art:
Transparency – Using interaction with transparency.
Hallucination – Applying filters to photos.
Bias – Decluttering or debiasing data.
Privacy – Controlling sensitive data with sliders.
Manipulation – Using mouse interaction to distort typography.
Over-dependence – (Still brainstorming ideas).
E-waste – Simulating falling data waste with a movable catcher.
Tamper Control – Controlling the hallucination with slider
Comparing AI and human art – guessing game
While coding, I encountered common mistakes like using lowercase letters instead of uppercase, forgetting parentheses, or reusing variables improperly. Debugging was tough, even with console error messages pointing to the problematic lines. I learned the importance of understanding the structure of basic code, such as the purpose of setup() and draw() functions, and using let for global variables.
Understanding the order of drawing elements was especially tricky for me, and when math equations came into play, I panicked.
Here are some benefits and downfalls that I thought of using p5.js.
Most Beneficial Aspects of Using p5.js
Interactive visualizations.
Beginner-friendly for first-time coders.
Web-based, making it easily accessible.
Free and open source.
Encourages creativity with code.
Less Appealing Aspects
Configuring image and text placement using numbers can be tedious.
Requires math knowledge for more advanced code.
Doesn’t support AI natively but can integrate with external libraries.
Only handles front-end development.
As I developed my ideas, I enjoyed discovering the many possibilities of p5.js. Learning “Processing” and “three.js” also seems intriguing for the future.
While I am not entirely confident about becoming highly proficient in coding with p5.js, I am very interested in creating this interactive poster series. The ability to easily update or replace text by recoding it is particularly appealing, especially given the rapid changes in the AI industry.
For the future, I am interested in working on public events where participants guess and rate two interactive art works, one created by AI other by a human. Additionally, I am looking to conduct comparative research to explore whether AI truly enhances creativity for individuals who are already creative. This semester, as I delved deeper into the subject, I have uncovered significant potential in researching AI.
Resources
AI Ethics :
https://ai.google/responsibility/principles/
https://www.ibm.com/topics/ai-ethics
https://www.ibm.com/topics/ai-ethics
E-waste :
https://www.technologyreview.com/2024/10/28/1106316/ai-e-waste/
Official p5.js website :
Youtube channels :
The Coding Train : @TheCodingTrain
Dizicode @dizicode
Steve's Makerspace @StevesMakerspace
Patt Vira @pattvira
Chat GPT conversation link :
https://chatgpt.com/share/674d3e84-c718-8000-9b15-4c7783d210b7
P5js resource :
https://openprocessing.org/user/238026?view=sketches&o=108
learning p5.js :
https://3d-math.gitbook.io/p5jscodeanddesign/undefined
Copyright © Borami Kang 2025