Code, Decolonized x POWRPLNT Symposium 2022

New ways of learning and teaching programming languages for the web

11 min readJun 13, 2022

A group of 22 people are in front of a brick building with large glass doors. They stand around a storefront sign that reads “Pioneer Works. Code, Decolonized with Power Plant” and smile into the camera. — Workshop facilitators and participants gathering for a group photo in front of Pioneer Work at Red Hook Labs

Code, Decolonized is a teaching practicum course offered at Parsons Design & Technology at the New School. Initiated by shawné michaelain holloway and Xin Xin in 2021, the project researches, experiments, and practices new ways of learning and teaching programming languages for the web through perspectives that are traditionally overlooked and under-recognized in the technical classroom.

In 2022, Xin Xin co-taught the spring semester course with new Code, Decolonized member Dejohn Huffman, who brings in a breadth of experience in community organizing and trauma-informed training. The course centers discussion of pedagogy from both theoretical and practical frameworks, and is structured to transition students into teaching roles. After receiving feedback from Processing Foundation mentors Saber Khan, Lauren Lee McCarthy, Dorothy R. Santos, and Xiaowei R. Wang, Code, Decolonized students collaborated with POWRPLNT to facilitate a two-day public symposium at Pioneer Work / Red Hook Labs at the end of April.

This post recaps the workshops designed and facilitated by Code, Decolonized students, with external links to dive deeper into the workshop materials.

Instructors’ Bios

Photo of an outgoing African American male with a bald head and a gold-tee framing his upper lip and chin. Light brown eyes framing a face and nose that is fittingly sharp at the tip. He is sitting on a rail in front of the New School’s entrance attired in a white and brown tweed three quarter inch trench jacket, as he waits for his students to arrive. — Dejohn Huffman

Dejohn Huffman (he/him) is a lifelong nurturer of all walks of life and specializes in community engagement. He has been committed to building bridges across the tech divide for over 8 years. Dejohn is a BPI Bard College alumni, adjunct lecturer at Parsons school of design, SOS Survivor of The System administrator, former NYC Health + Hospitals Contact Tracer-II, and Community Outreach Specialist who helped the city regain its independence from the clutches of COVID-19. His drive to change the tech narrative has been paramount in his desire to find new and innovative ways to introduce technology to marginalized spaces in the inner city communities. He champions the proper balance of sensitivity toward the impact of race/ethnicity, gender, sexual orientation, and gender identity in his teachings. His current efforts continue to reflect his commitment to enhance diversity, equity and inclusion in the tech sector for all. Inclusion for him is not just something to be achieved, talked about, or theorized — it is the source of his growth and his best opportunity to continue to give back.

Photo of a non-binary Han Taiwanese descendent with black short haircut and bleached highlights. They have a diamond-shaped face, light-olive skin, almond-shaped eyes and a high nose bridge. They wear a black, unzipped jacket and a tiny earring consists of two intersecting rings. — Xin Xin

Xin Xin (they/them) is an interdisciplinary artist, designer, and organizer currently making socially-engaged software that explores the possibilities of reshaping language and power relations. Through mediating, subverting, and innovating modes of social interaction in the digital space, Xin invites participants to relate to one another and experience togetherness in new and unfamiliar ways.

Born in Taipei, Taiwan and raised in Massachusetts, United States. Xin identifies as a cross-cultural, non-binary, anarcho-feminist and will probably always have a genre-nonconforming practice. Xin received their M.F.A from UCLA Design Media Arts and teaches at Parsons School of Design as an Assistant Professor of Interaction and Media Design.

Jump into Drawing with p5.js: Cartesian Coordinates and 2D Shapes

Led by Aamina Palmer & Yiwen Xu

Workshop participants look at the projection on the wall while Aamina Palmer and Yiwen Xu explain the workshop activity. On the projection there is a photo of a dark grey water bottle and multiple blue ellipses and red rectangles that composite into the shape of that water bottle. — Jump into Drawing with p5.js workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 23, 2022

This workshop introduces p5.js, a JavaScript language, and two aspects involved in making your first sketches. You will learn about cartesian coordinates, and how to draw 2D shapes on the p5 canvas. From there, you can try drawing an object of your choice using simple shapes and see what comes out!

screenshot of a workshop presentation slide showing key p5 terminologies — sketch, coordinates, canvas, primitives, stroke, background, fill, parameters — Sample slide from the Jump into Drawing with p5.js workshop, created by Aamina Palmer and Yiwen Xu

Resources

Facilitators’ Bios

Aamina is smiling and cradles her chin in her hand. She has an afro and is wearing silver headphones. — Amina Palmer

Aamina (she/her) is an artist and designer based in Brooklyn, NY. She is currently attending Parsons at The New School, in pursuit of a Master of Fine Arts in Design + Technology. Coming from a photography background, she is drawn to making and using images in her works on and offline. Her work involves play and playfulness in approaching new topics or revitalizing familiar ones. In an effort to make creative coding more accessible, she has co-taught two workshops, as part of the Code Decolonized Symposium, held in April of 2022. The workshop introduced the JavaScript language of p5.js and guided newcomer and experienced coders through using the cartesian coordinate system to draw on a grid using 2D primitive shapes.

a person with black hair and green curls is smiling with one hand lightly touching her chin. — Yiwen Xu

Yiwen got her bachelor’s degree in Digital Interactive Art at China Academy of Art. Then she came to the U.S. to continue her study in the major of Design and Technology at Parsons School of Design. She was a UI/UX designer who once worked as an all-media intern at People’s Daily, China. But she really wants to be an artist. She had some teaching experience in guiding teenagers with creative design at small art studios during undergraduate study. As a participant in Code Decolonized Symposium, she taught a p5.js workshop at Red Hook Labs with co-teacher Aamina Palmer on April 23 & 24th, 2022.

Let’s Learn about Variables and IF Statements!

Led by Gina Lee & Zoyah Shah

Workshop participants look at the projection on the wall while Zoyah Shah explains the computer programming concept “variable”. On the projection there are images of name cards with different names. — Let’s Learn about Variables and IF Statements! workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 23, 2022

This workshop provides an introduction to variables and IF statements by using real life examples. You will learn about why variables and IF statements are important, and how to use them in p5.js.

Screenshot of a workshop presentation slide describing computer programming concept variables. Header at the top reads “Variables are a container that holds information that you can access and change.” On the left side of the screen there is a cartoon drawing of a basket holding 4 apples. On the right side of the screen a description reads “Variables: numbers of apples in the basket.” — Sample slide from the Let’s Learn about Variables and IF Statements! workshop, created by Gina Lee and Zoyah Shah.

Screenshot of a workshop presentation slide describing computer programming concept IF statements. Header reads “If statements are a form of cause and effect. They are decision making statements that tell a program what to do based on a set of rules”, followed by an image example showing a green traffic light, a right arrow emoji, and a yellow car emoji. — Sample slide from the Let’s Learn about Variables and IF Statements! workshop, created by Gina Lee and Zoyah Shah.

Resources

Facilitators’ Bios

a person with long straight black hair and gold highlights is smiling and sitting on a large bridge. Behind her is the city skyline of Manhattan. — Gina Lee

Gina (she/her) is currently studying Communication Design at Parsons School of Design in New York City. As a lifelong learner, her education in both New York and Portland, Oregon, have shaped many of her values and ideals as both a student and teacher. She is committed to continuously learning how to be more mindful in creating and teaching with inclusivity and accessibility at the forefront.

a person in black t-shirt is sitting on top of a huge tree branch looking up in awe. She appears to be in a forrest and is surrounded by trees. — Zoyah Shah

Zoyah (she/her) is a designer currently studying communication design at Parsons School of Design. She grew up in the Bay Area in California, where she had the privilege of being introduced to coding at a very young age in school. She wants other people to have this same opportunity, so she is learning how to make education more accessible.

GenZ(ine): a Beginner-Friendly Zine Playground

Led by Iley Cao & Munus Shih

A group of 11 workshop participants sit around a long rectangular table while listening to Iley Cao and Munus Shih going over “function”, a computer programming concept. The projection on the back wall reads “Functions are codes that accomplish a specific task. How many breads? What kind of bread? How long? How cooked?”, accompanied by an image of a bread making machine. — Genz(ine) workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 22, 2022

“It’s amazing how inexpensive a publication can be if it doesn’t need to pay for writing, editing, design, paper, ink, or postage.”
— Mega ‘Zines, Macworld (1995)”

This generative zine workshop guides participants to create zines that focus on digital identity and self-expression while making the coding and printing process accessible to everyone.
The workshop uses p5.zine (demo), a custom open-source tool to ease participants into learning functions (computer programming) and let everyone remix the zine template easily. This workshop welcomes everyone with different levels of coding knowledge.

screenshot of a workshop presentation slide with a text description that reads “zine layout: here is a format for the 8 page zine you will be creating. use this as a reference but feel free to play around with order!”. Below the text there is an image of an 8 page zine layout diagram and an image of a drawing that demonstrates how to fold the 8 page zine. — Sample slide from the GenZ(ine) workshop, created by Iley Cao and Munus Shih

Press enter or click to view image in full size

A GenZ(ine) created by workshop participant and designer Theingi Thann

Resources

Facilitators’ Bios

a person with glasses, white ear buds and short blonde hair brushed to one side, is wearing a black t-shirt and standing in front of a black and white ripple virtual background. — Munus Shih

Munus Shih (he/him) is a Taiwanese-born designer that collaborates with contextual data and bespoke algorithms. With an interdisciplinary background in Design and Engineering, his works encompass interactive and customizable brand identities, campaigns, and user interfaces.

Aside from professional work, he is an active member of many creative coding and design communities. He dedicates to curating workshops, publishing articles, and hosting lectures based on the idea of design as a liberal art or cultural media through a decolonized and inclusive lens. You can find more about his teaching and community work here.

Medium shot portrait of an East/Southeast Asian person with half blonde hair on top and black hair underneath, wearing green winged eyeliner, false eyelashes, and lightly colored lipstick. They are smiling at the camera at a 45 degree angle. — Iley Cao

Iley Cao (she/they) is a New York based, Chinese & Vietnamese multimedia designer and storyteller studying at Parsons and working at Milk Makeup. Their mission is to produce work and enact dialogue that is culturally and environmentally engaging and intersectional. Her specific interests lay in sustainable practices, beauty, lifestyle, and food systems, and she likes to try out new banana bread recipes.

Mouse Paintbrush with p5.js

Led by tee topor & Sloane Dove

Workshop participants look at the projection on the wall while tee topor and Sloane Dove go over the workshop objectives. On the projection there is a list that reads “1. Briefly discuss the history of the computer mouse and human computer interaction. 2. introduce the preload() function to add images to our sketches. 3. Make an image move with our mouse! 4. Draw and erase with our mouse using the mousePressed() function. 5. Save the image with keyPressed()!”. — Mouse Paintbrush with p5.js workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 22, 2022

The screen and mouse are modes of seeing, created specifically to make things easier handling a computer. The mouse both simplified and complicated matters, making assumptions about the ways in which people see and erasing the possibilities of deeper understanding of the machines individuals are using every day, sacrificing autonomy. Doug Engelbart invented the computer mouse in 1961, not even knowing how to use a keyboard as that task was delegated to women. This placed women “close to the metal” as defined by Emma Rae Brumml Norton as a means of getting into the hardware, being able to get into the chip and understand its switches before layers of abstraction start to cover its mechanics. In the 1970’s it was women who were typing into computers when they were the size of desks.”

This is a workshop meant for beginners and a means of getting closer to the metal.

screenshot of a workshop presentation slide demonstrating how to add an image in p5.js. In the p5 code editor there is a block of code that loads and displays the image. In the p5 preview window there is photo of one slice of pepperoni pizza displayed on the screen. — Sample slide from the Mouse Paintbrush with p5.js workshop, created by tee topor and Sloane Dove.

Resources

Facilitators’ Bios

person with orange hair, wearing a black shirt with teal flames, holding a computer keyboard, standing behind a large image of 3D twisting teal pipes and green blobby organic shapes covered in a wireframe. — tee topor

Tee studied film at Boston University and Design and Technology at Parsons School of Design, where they are returning to teach net art and digital fabrication in the Fall of 2022.

Visualizing Recurring Events with for Loops

Led by Jessica Jabr

Workshop participants look at the projection on the wall while Jessica Jabr goes over the building blocks of a for loop. — Visualizing Recurring Events with for Loops workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 23, 2022

This workshop introduces the building blocks of the “for Loop” structure and how ‘for Loops’ are used within creative applications through visual repetition.

screenshot of a workshop slide breaking down the structure of the for loop building blocks — 1. Declare a variable. Declare a variable to keep track of your pattern, and initialize it to the number your pattern starts at. 2. Condition. Write a test that evaluates to a boolean value of false whenever the pattern should stop. 3. Reassign the variable. So that it follows the pattern — increment / decrement. — Sample slide from the Visualizing Recurring Events with for Loops workshop, created by Jessica Jabr

Resources

Facilitator’s Bio

mid thirties female, with dark brown wavy mid length hair, smiling, wearing black top — Jessica Jabr

Jessica is a creative technologist and experience designer. Her work revolves around human-computer interaction. She loves to play with physical computing, machine learning, and interactive experiences. She’s a serial idea-generator, who speaks product, and is obsessed with web3 technologies. Prior to pursuing her MFA in Design & Technology, she worked in programs and product management.

As a teacher, she cares about empowerment the most. Her goal is for students to leave her class feeling that they have the tools to achieve things in life. She wants her impact on students to sound like: “the sky is the limit”; from there it’s on every student to take what they want from her class. She has been influenced by amazing teachers throughout her life, especially in high school, and to this day she appreciates and remembers those teachers with the utmost respect and gratitude. Some of those teachers have shared valuable information that stuck with her to this day, and others whose interactions with her were remarkable, as a student who didn’t fit the mold.

She considers teaching as an outlet to impact others. Some of her objectives in leading a classroom:

Opening the eye of students to things they might not have thought of or crossed their minds
Changing predicted behavior
Influencing by motivating
Positive outlook on the future and the endless possibilities in the world

Nested for Loop and Permutation Design

Led by Roy Yang

Roy Yang, who wears a bucket hat, glasses, and a surgical mask, is teaching a workshop in front of a group of participants. Behind him the presentation slides contains a diagram that explains the computer programming concept nested for loop. In the top section, marked in yellow there is a box with text that reads “this is a loop”. In the bottom section, marked in blue there is a box with text that reads “this is another loop”. — Nested for Loop and Permutation Design workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 23, 2022

This workshop introduces nested for loop in an accessible way for people new to coding. Using Nested For Loop Visualization, a custom software made in p5.js, this workshop guides participants to understand the principles and execution process behind a computer programming concept that is conventionally challenging for beginners. Once participants get some practice with creating nested for loops, the workshop explores the concept of permutation design by inviting participants to create a table of logo variants.

an animated GIF showing the Nested For Loop Visualizer in action. On the left side there is a flow chart that allows user to change variables and values. On the bottom there is a play toggle that lets you start / stop animation and adjust animation speed. On the right side there is a block of nested for loop code with different parts being highlighted while the animation runs. On the bottom there is canvas, visually drawing cells along the grid. — A demo of the Nested For Loop Visualization Software

a p5.js sketch visualizes a colorful 3 by 3 grid. Each cell contains a 10 by 10 grid displaying a different visual variation of an ellipse intersecting with a rectangle. — Example of permutation design, created in p5.js by Roy Yang

Resources

Facilitator’s Bio

A person wearing a bucket hat, a scarf, and a light grey vase is leaning against a red outdoor chair. He is standing in front of a snowy scenery with a bridge and tall buildings in the background. — Roy Yang

Roy Yang is a designer, engineer, and gamer committed to finding a balance in interdisciplinary areas that adopt technology in practice creatively, playfully, and carefully. He received bachelor’s degrees in Electronic and Electrical Engineering from University of Glasgow and University of Electronic Science and Technology of China. He is currently a Master of Fine Arts student at Parsons School of Design majoring in Design and Technology. He intends to join the industry as a product designer meanwhile approach teaching and holding workshops part-time.

polyMorph — a Primer

Led by Jay Tobin

Jay Tobin, who has curly hair and wears a black mask and t-shirt, is teaching a workshop in front of a group of participants. Behind him the presentation slides reads “generative music is music made using a process, usually without a predetermined outcome. The goal is for music that’s ever-evolving and theoretically endless. Here’s an example, and here’s another! There are tons of interesting things that go into making generative music, but today we’ll be looking at musical gestures…” — Polymorph — a Primer workshop held at the Code, Decolonized x POWRPLNT Symposium on Apr 23, 2022

Music-making software has a gatekeeping problem: built on the understanding that users are familiar with traditional western music theory and possess a firm background in navigating digital interfaces, digital audio workstations (DAWs) actively stifle rather than support the creation of art. polyMorph is a project that exists beyond the piano keyboard and the timeline sequencer — using gestures and phrases, polyMorph empowers first-time music-makers to create endlessly expansive works of experimental music.

screenshot of the polyMorph main interface, made up by 4 larger squares: sand Piper, tape Loop, audio In, and audio In; 4 smaller sound effect squares: reverb, munger, comb, delay; and 4 smaller control center squares. — polyMorph

This workshop will introduce attendees to polyMorph and generative music. We’ll cover gestures and randomness as compositional elements in music, and put together our own definition of what generative music is. The goal is to give attendees some insight into making their own procedural music, while introducing polyMorph as a fun, accessible tool for making their own work.

Resources

Facilitator’s Bio

A person with dark brown curly short hair is wearing a beige sweater. In the background are brown, brick condos and a canopy of trees. — Jay Tobin

Jay Tobin is a creative technologist and programmer from New York. An audiovisual artist, his work spans from live sets at Ars Electronica to custom music production software. His interest is in building community by lowering barriers of access in tech, and bringing people together by treating education as a conversation. He taught a course on polyMorph, his custom-built generative music production app, during the 2022 Code, Decolonized Symposium.

Code, Decolonized x POWRPLNT Symposium 2022

New ways of learning and teaching programming languages for the web

Instructors’ Bios

Jump into Drawing with p5.js: Cartesian Coordinates and 2D Shapes

Resources

Facilitators’ Bios

Let’s Learn about Variables and IF Statements!

Resources

Facilitators’ Bios

GenZ(ine): a Beginner-Friendly Zine Playground

Resources

Facilitators’ Bios

Mouse Paintbrush with p5.js

Resources

Facilitators’ Bios

Visualizing Recurring Events with for Loops

Resources

Facilitator’s Bio

Nested for Loop and Permutation Design

Resources

Facilitator’s Bio

polyMorph — a Primer

Resources

Facilitator’s Bio

Written by Processing Foundation

No responses yet