Catalog view is the alternative 2D representation of our 3D virtual art space. This page is friendly to assistive technologies and does not include decorative elements used in the 3D gallery.
Artist: Kyle Ang, Rane Bieker, Katie Liu, Angela Rong, Myrah Sarwar, Jonathan Tolentino, Angie Yang, Annie Zheng
↓ Curatorial statement co-written by Angela Rong and Qianqian Ye ↓
Softness could be a cloud / ephemeral form
Softness could be a dune / morphing landscape
Softness could be the rounded corner of buttons
Softness could be the gradient background on the screens
Softness could be the almost illegible font
Softness could be the tactility when petting the keyboard and mouse
Softness could be the dizzy comfort of welcoming red error messages
Softness could be the fuzzy edge of unknown feelings
Softness could be subtle frustration of wanting more
Softness could be a polite refusal of the right way
Softness could be the brave moment of oversharing
Softness could be the sudden zero-g after admitting your fear
Softness could be a safe place to land
Softness could be the hands that are there to catch us
Can software be … soft?
Softness can seem like an elusive quality in technology, a frivolous whisper in a gallery of glass screens. We want to know comfort, yet also fear being vulnerable in our moments of rest. But how might softness be more than just a temporary respite? As we mix and blur together lines of code, how might we reawaken, relaxed, to new possibilities of living, sleeping, and dreaming?
This exhibition invites visitors to experience the web-based artworks of artists and coders in USC Media Arts + Practice’s IML 300 and 400 classes, as we look beyond the sterile finality of definitions and labels. Cocooned inside brackets, braces, and parentheses, SoftErr is a group exhibition that resonates with the warm, welcoming embrace of our communities -- both digital and in-person. Out of focus, eye to eye, we emerge from the heady fog of coding, cradling our projects of being and becoming. We hope that SoftErr shines a light on the pearl that is your existence and envelopes you in the glowing presence of many. Rest your head for a while; we're making software soft. Let's err on the softer side, softly.
Instructor: Qianqian Ye
Student Assistant: Jay Borgwardt
Music credit: Harvey Moon
A dark soft dune.
My take on a cybernetic garden! Rearrange the images to create your "digital face". Find the Magic 8 ball that will tell you your fate.
Handraw, the website where you draw with your hand! Made using p5.js and ml5.js. Use different hand poses to draw, erase, or change colors! The tracking is pretty bad, though.
Blow a kiss and say something! I trained two different poses and coded the canvas using p5.js.
Created on p5.js, this poster seeks to evoke discussions surrounding sexual assault. The words "Please Don't Touch Me" are displayed with two animations. When researching the phrase, I realized it was associated a lot with internet "meme" culture and I wanted to bring attention to the phrase and its relationship to sexual assault. I also read the experience with the phrase from April, a sexual assault survivor, and whose quote I used in my poster from the article she wrote. The first animation is on the word "touch." Touch is scrolling from right to left but never touches me. "Me" changes size from small and large. When deciding what size to make "me," I both thought me should be small because for victims of sexual assault the situation can make one feel small. However, it is also big because when a situation like that occurs, one's feelings and experiences are the most important. It is also pulsing like a heart.
I wanted to make a poster that captured how the Red Scare never disappeared -- it persists and continues to mutate in the form of sinophobia. Interested in the aesthetics of newsprint and broadcast television, I chose a font that simulated the block font of breaking headlines, which can dilute entire histories into sensationalist headlines. I also implemented a background of shifting letters that respond to mouse interaction. Pausing the poster only allows the words to multiply in number, suggesting that Western journalism does not care for material analysis, but ultimately serves the ruling imperialist class to manufacture consent for war.
A digital archive delving into my personal growth and relationship with the internet. The user is able to move through three different phases and drag around the elements on the page.
A slitscan p5.js sketch. I think this is the funniest thing I've ever made, and I've spent a lot of time fooling around with it.
This camera filter allows you to customize the emojis on your eyes, nose, and ears. Play around and have fun!
My website inspired by "All Watched Over By Machines Of Loving Grace." My idea was a robot eden with AI gods. And what do you do with gods? You pray. Think of it like a magic 8-ball type of website.
Otomania's rereleased version of "Ievan Polkka" is playinig.
My launch page. A pretty true representation of my aesthetics. Background video is a Project Diva: Arcade PV feature a model I modded.
Hachiouji-P's "Sweet Devil" is playing.
Manipulate various slit scans of yourself that run at the same time! Move your mouse up and down or side to side on various parts of the screen to see what changes!
A website expressing my personal idea of digital care: calming background, funny music to cheer you up, and a chatbox where messages disappear and everyone is anonymous.
This is a p5.js sketch that is controlled by the voice commands "up, down, right, left, clear." Move the line through the blocks to change its color.
this was really fun to mess around with. I found that the first slit scan rotates a little. Then I overlaid a second slit scan on top. The top one in front overlaid aims to capture the eyes of the person sitting on the webcam. I was supposed to make it horizontal, but for some reason it turned out like this instead. I set a variable for each slit scan (Slit Scan A and B) to create two of them. The Copy function still is a little confusing to me, even though I know it's supposed to be video (source), then x1, y1, width and height copying to the source of the video.
//tutorial by Colorful Coding, How to make a flow field in p5.js As the year of 2020 broke through, we've faced a lot of racial violence, and especially within the Asian community. With the outbreak of the coronavirus, I wanted to take the phrase, "HATE IS A VIRUS," and use this animated poster to depict the way hate spreads through a flow field animation on p5.js. The more hate, the more we blur the picture of what our world needs to be. The more we spread hate, the more our communities suffer.
A collective digital care space! Experience this with your friends by getting them to load the webpage at the same time! While you draw, you'll hear your own notes at the same time as your friend's notes. Try to duet them while painting something together!
A website that uses node.js and socket.io for a multi-person drawing experience. Users will always see their own drawings as rainbow and other users' drawings as grey.
An experimental look at the artist's thoughts and experiences with body dysmorphia and related insecurities. The website has little to no instructions, so click around with your mouse or even raise your wrists to explore.
this code takes the pixels of the video from your webcam and maps out a grid with the circles. It has two for loops that draw the circle and is interactive when you move in the x direction to make the circles smaller or larger, making the video clearer or more abstract. I learned better what the map function does with the start and stop bounds, and how the nested loops work for initiation, condition and incrementation. //tutorial and help came from Jeff Thompson
A p5.js sketch using PoseNet. It draws circles on every point of the skeleton, with size and color being determined by the music's amplitude.
"The Grave" by Black Tiger Sex Machine is playing.
This Cybernetic Garden is an illustration of how I perceived and interpreted the poem, "All Watched Over By Machines of Loving Grace" by Richard Brautigan. I felt that there was a kind of ominous tone, and the idea of recreating the natural in the digital world is an interesting one, where the flowers here in the work are glitchy and flickering — not completely transparent, and truly imperfect. The idea of machines and organic matter such as us humans and our natural environment ever living in harmony is an interesting yet idealistic idea. This cybernetic garden depicts that feeling.
Make A Wish is inspired once again by radical digital care. Enter the scene to play with a shooting star cursor, and then make a wish. Once you make a wish, you can see if others are making a wish as well when you see trailing colors of shooting stars. Only your wish is visible to you — with the age-old idea of, "Don't say your wish out loud or else it won't come true!" I went along with that to inspire this work.
Collaborate and draw with your friends using words. This is a creative and fun way to chat with others as a means of digital care. With technology becoming more controversial as a tool or as a weapon, the practice of digital care becomes apparently here in this fun little glitch.me site.
I pretty much just played around with Coding Train's example. I wanted to add some interactivity so the colors of the points change depending on where the position of the mouse is. I added the lines that connect the dots because I think it adds more of the skeleton look, and I enjoyed just posing with it too and seeing how it tracked the parts of my body.
Often, when we use tech to express ourselves, the idea of motion is often overlooked. In this project inspired by Wassily Kandinsky's art, the use of body and motion are highlighted as a way to convey emotion and express sound. As a synesthete, (A person with synesthesia, a condition in which the normally separate senses are not separate. Sight may mingle with sound, taste with touch, etc. Other synesthetes hear colors.) Kandinsky's senses interwove sounds with shapes and colors. With hopes to give this experience to others with no synesthesia, I created this project to allow expression with both body movement and creating art with sound.
Often, when we use tech to express ourselves, the idea of motion is often overlooked. In this project inspired by Wassily Kandinsky's art, the use of body and motion are highlighted as a way to convey emotion and express sound. As a synesthete, (A person with synesthesia, a condition in which the normally separate senses are not separate. Sight may mingle with sound, taste with touch, etc. Other synesthetes hear colors.) Kandinsky's senses interwove sounds with shapes and colors. With hopes to give this experience to others with no synesthesia, I created this project to allow expression with both body movement and creating art with sound.
Created by Katie Liu, "The Gender Wage Gap Game" seeks to be a game to provoke and teach viewers about the gender wage gap that exists in America. According to the 2019 Census Bureau data, women earned on average 82 cents for every $1 earned by men. This gap is even more significant for women of color.
Welcome to my cybernetic garden. Hover over the "yikes" to read some of my cringiest texts. Don't get poked by the cactus or the cringeworthy-ness of my texts.
Part 2: Welcome to my cybernetic garden. Hover over the "yikes" to read some of my cringiest texts. Don't get poked by the cactus or the cringeworthy-ness of my texts.
Sing together with your friends! There are some classics on the left to inspire you or sing your own song. Try with another person! Your voice will make circles on your own screen and your friend(s) voice will make squares on your screen! Sing louder to make larger shapes!
Create drawings using a generative pattern. You are able to upload your drawing as a saved "collective" using the power of Firebase.
animated poster using WEBGL This p5.js "poster" uses WEBGL to create 3D shapes. The mouse turns the "camera" of the panel to reveal the answer to the riddle.
My cyber garden with seeds made up of moments from my memory.
Make up the funniest stories with your friends depending on the emoji provided!
One of a type scanner!
This project is created based on a poem called Wilder by Rupi Kaur. It is short but powerful for it promotes self-love and encourages individuals to be confident about themselves. I love the words in this poem and decide to give it a special twist for users to read the poem through creative coding.
part of environment
Visual interactive poem that uses a recursion tree in p5.js to simulate a blown dandelion.
Experimental narrative using ml5.js, BodyPix. Based off a poem about self identity. The sketch uses the "frameRate(24);" script hence the choppy look; decided to keep it in. The BodyPix distorts from my code and delays the original outline of your body, leaving behind a silhouette of yourself.
p5.js sketch that overlaps and inverts two slit scans to create a final image.
Interactive emotion visualizer that uses speech input and real-time hand detection.
This face filter creates a rain cloud above your head with falling raindrops that double as teardrops.
This multi-user experience explores collective digital care through the idea of a modern-day shared desktop. Invite your friends and play around as live customizations on one desktop affect all other active sessions!
A shareable weekend outing. Cooped up inside and wish you could hang out with your friend? Watch the weekend unfold together in this meditative, communal outing.
feet on grass, nature sounds.
This website plays on the idea of a community garden -- computer desks replace individual plots of land. I solicited these photos from friends, with the idea of us still being connected via our computers despite physical distance. With the context of a community garden, we transform the narrative of individualized disparate screens into a new display of interconnectedness and community.
I was interested in creating a color viewfinder, as the camera filter itself is already an abstraction of form and color through noise. Move the cursor around to move the pixel viewfinder around. Play hide-and-seek, discover new parts of yourself.
for all its touted relaxation purposes, journaling can be hard. finding appropriate stationary, organizing your thoughts, the physical act of writing. your journal room removes those extra steps, utilizing your computer microphone to write down anything you have to say and think about the space you exist within. none of your words will be saved, unless you yourself would like to save a page. let your words flow in a stream of consciousness. there's power in speaking and submitting your thoughts to existence.