Home                  Contact                                                                                                                                                                                                                                                                                                

WEEK 13/14 


Final Project

Datamoshing Site

Link to the site is HERE


           CONCEPT:

I wanted to create a 2000s-era, web-based site that generates glitch art. I really miss the simplicity of the early internet, where our collective limitations created really special aesthetics.

DUAL GLITCH SYSTEM:

The website has two different ways to mess up your image.

The first way grabs random little squares from your photo and makes the colors look flat and chunky (like a bad photocopy lol), then puts those squares back in a different spot (just a bit offset from where they started. This is what makes the image look like it's falling apart. :))

The second way grabs other random squares and either blurs, flips the colors, makes it black and white, etc. Then after it also puts them back in slightly the wrong place.

Every second, the computer picks one of these two systems at random and does it eight times. So your image gets glitched eight times/second. After just a few secs, you've got a bunch of these little corruptions piling up over each other. That's how you go from a normal photo to something beautifully broken. :)))) 


CHANGES AFTER USER TESTING:

    Initially, I had the instructions positioned below the image viewer, but I noticed that many people never scrolled down to reference them, and although the flow of the site is intuitive enough, I thought it might be nice to place the instructions right next to the picture box, so it's always visible. 




    ISSUES THAT CAME UP:
    Okay, this is where I hit a wall. Originally, I wanted one button that switched between "Start" and "Stop," and you'd press the spacebar to save your image. Sounds simple! But I kept running into this annoying bug. When you pressed spacebar to save, the button would change to say "Continue Moshing" even though the glitching was still happening. The button was basically lying about what was going on! Claude tried to help me with the spacebar issue, but no luck! They helped me with the buttons, though! 

    I spent way too long trying to fix this and honestly, just couldn't figure it out. So instead, I went with the simpler solution: three separate buttons. One to start (▶️), one to pause (⏸️), and one to save (💾). Each button does exactly one thing. 







    WEEK 12


    Final Project Prototype

    Datamoshing Site

    Link to the site is HERE


    Glitch Art HTML Site
    I created an HTML datamosh web-based app that allows users to upload images and watch their pictures get all glitched out.  


    ASPECTS OF THE SITE:
    Upload File- You can select and load a picture of any size. constraints and canvas scaling were applied! Images are set to automatically resize to fit the window while keeping their aspect ratio of 90% width and 70% height.

    Glitch Modes- Filter effects: Applies random filters (threshold, grayscale, invert, posterize, blur) to image sections. 

    Interactivity- You can toggle moshing on/off with a button and press spacebar to capture and download PNG snapshots. 

    Late 90s-2000s aesthetic- Comic Sans, neon colors, animated GIF background, and nostalgic web design elements. :))))) 



    ABOUT THE CODE SPECIFICALLY:
    Key variables for glitch control:
    javascript
    let regionSize = 64; //size of glitch areas
    let areaSize = 90;  //size of filter effect areas
    let offsetMax = 10;    // Max area offset for datamosh
    let crushMax = 10;   // Max area offset for filters
    frameRate(8);      // speed of glitching

    The draw loop randomly chooses between glitch styles (50/50 probability), creating chaos. :)))) 




    STILL FIGURING OUT:
    • Balance between the two glitch styles (currently 50/50 random)
    • Working on the general shape and size of the mosh area. 
    • Figuring out if the glitch speed (frameRate) feels right 
    • Most importantly, whether users understand the spacebar save feature without testing it first
    • How to make it so that people can save PNGs on mobile. 

    USER TESTING Qs:
    Does a user understand they need to click "MOSH IT" to start?
    Do they figure out the spacebar save function on their own?
    Do they understand the Mosh it and Stop Moshing buttons on their own? 



    WEEK 10


    SOUND SYNTHESIS

    Using numbers instead of Chord Symbols to play oscillators  
    (to make songwriting feel more accessible)  

    Link to the P5 sketch is HERE


    Earlier this week, I was listening to La Fille aux Cheveux de Lin, L. 33, and thinking about how Debussy is JAZZ. When I found the p5 sketch for this gorgeous synth, I decided that I had to use it (because maybe it would be bad luck not to). The original sketch uses Debussy-style chord structures, which feel SPICY AND SOPHISTICATED. The effects (i.e., tremolo) are also extremely tasteful. 

    To make the synth my own, I adjusted several of the parameters, more specifically, I adjusted the attack, delay, sustain, and release (or ADSR if you’re at all familiar with synthesizer terminology). 
    This helps shape how the oscillator (basically different versions of wiggly air) behaves at the start and end of notes. For example, if you turn up the attack on a synth, you’ll notice it takes a moment to come in. That’s a stylistic choice I often make because I enjoy playing behind the beat (and dragging a bit).  

    The original sketch cycled through the chords randomly when the user clicked on various points of the canvas (the chords weren’t mapped to any buttons or regions). I made a version that mapped them to buttons (during the iteration process), and that helped me compose the song after that (I needed order)!! I chose to add the lyrics and “chord” numbers as if it were an Ultimate Guitar-style sheet. Meaning: where there are numbers, there would normally be chord symbols. I did this partially because I really love the idea of making music more accessible (and because it’s easier to have them right there instead of having to stare off somewhere else). There are so many people who would probably make the most incredible music if they felt a little more confident or just had the right tools to demystify things.

    Code Specific: 


    - p5 is handling the visuals, canvas, camera, and keyboard/mouse input.
    - Tone.js is handling the sound synthesis and effects.
    - Pressing keys 0–5 plays different Debussy-style chords, while the webcam shows in the background, and lyrics are drawn on top.

    Visual Side:
    - p5.js draws the webcam feed and overlaid text (instructions + lyrics).

    Interaction:
    - Click once to unlock audio.
    - Press keys 0–5 to trigger different chords.

    Audio side:
    - 7 Tone.Synth oscillators, each assigned to one note of a chord. A chord here is essentially 7 separate synths playing 7 different pitches simultaneously, forming a large stack.
    - They’re spread across the stereo field with PanVol.
    - Routed through tremolo + reverb + volume nodes to the master output.

    An example of a tone.js thing happening: 
    Here we’re declaring a bunch of effects (tremelo is the wobbly effect you hear in the synth). 


    parseInt turns text into a key, and the functions here say: play the chord when the corresponding key is pressed, and stop playing the chord when you lift it: 




    Some extra thoughts:


    I think we learn more easily when we flow with what's familiar. What if you can remember the sound, shape, or feeling of a chord but not how to play it traditionally? Maybe using numbers is a way to remove the stress of music theory. Some of the best musicians don't know anything about theory and don't need it at all. :)

    I think music belongs to everyone. It's something we're born knowing how to do, a basic instinct, like crying. We come into the world with that instinct intact: crying out for help. And like crying, sometimes the world beats it out of us, and we have to relearn how to do it. Maybe you always knew how to communicate through music, but the world made you feel silly or told you it had to be done a certain way. Look at you! Now you're finding your way back! 


    P.S. 


    Feel free to comment out my lyrics and “chords” and to add your own : ) 




    REFERENCES:




    WEEK 9


    BODY

    Using ml5.handPose + tone.js
    (to track my finger and make a granulator)

    Link to the P5 sketch is HERE


    I was really excited for this week’s assignment because I decided to step into the web audio zone, something I’ve been both afraid of and looking forward to. I’ve come to know that some of the best things in life arise from a combination of those two things (fear and curiosity). :)) 

    I started by digging into my archives and pulling out an audio recording I made a few months ago. My goal was to build a simple granulator using Tone.js. This sketch combines ml5.js’s HandPose model and Tone.js’s GrainPlayer to create a sort of “granulator” effect for whichever .mp3 you upload. The sketch tracks the position of your index fingertip, and based on where you place your fingertip along the X-axis, it changes the playback rate and “grain” parameters of the audio. 

    To be more code-specific: 
    - The hands[ ] array contains two objects: one for the left hand and one for the right hand.
    - Inside the main draw loop, each hand object is assigned to a variable called hand.
    - Within that loop, the code fetches the index finger tip, which is keypoint #8 in the HandPose reference page. Although the original ml5 HandPose example tracks all 21 points on the hand, I simplified it by focusing only on the index finger tip. Here’s the diagram from the handPose references:

    ISSUES: While testing, the sketch would give me a “Range Error” from Tone.js (boooo!!):
    It turns out that when the fingertip’s x position moves outside of the canvas (the canvas we can see), the map() function returns a negative value, which is something Tone.js doesn’t allow within the context of the playbackRate logic. The solution was straightforward: I just needed to add some “constraints” to the draw() function:

    fingie.x = constrain(fingie.x, 0, width);
    pb = constrain(pb, 0.001, 4);
    grain = max(grain, 0.001);
    overlap = constrain(overlap, 0.001, 1);






    If I were to expand on this sketch:

    - I’d map the y-position to something like reverb or a filter cutoff.
    - Use both hands for panning. 
    - Maybe track all hand points so the music is being affected by more parameters. 


    Try uploading your own .mp3 file and play with the granulator. : )) 





    REFERENCES:





    WEEK 8


    Parts of a Whole

    Adding Filters and Distorting Pixels

    Link to the P5 sketch is HERE 

    OH no... I discovered filters. I really loved this assignment because I’m a fan of glitch and feedback art, and it gave me a chance to experiment with corrupting an image in a way that felt uncontrolled. I love any creative process that makes me feel unsure of what the outcome will be. :)

    I decided to use a picture of my favorite actor, Steve Buscemi. < 3 

    I made an array called filters[ ] that stores a list of filters: THRESHOLD, GRAY, INVERT, POSTERIZE, and BLUR. From what I understand, they each hold built-in effects that you can use to create CHAOS in your sketch. : ))))  As if that wasn’t enough, I used the random( ) function and passed in that filters array, which means it’ll select a filter at random each frame. 🙈


    Here are the filters I used and a bit about them:
    • POSTERIZE limits the number of colors in the image. 
    • THRESHOLD converts the image to black and white.
    • BLUR blurs the image.
    • ERODE reduces the light areas.  


    The basic flow of the sketch is: 
    - Pick a random spot on the image.
    - Grab a little square of pixels from that spot.
    - Apply a random filter.
    - Then redraw that piece somewhere nearby, just a little offset.


     I also found out that if you find the default frame rate to be moving too quickly, you can just adjust it by adding something like “frameRate(5);” way up in the setup() function (this will slow it way down).  

    Try adjusting the values in the if statement’s random ranges to see how each filter reacts. : )) 



    WEEK 7


    Organic Iteration

    Adding a Volume Slider to the Exercise from Week 5

    Link to the P5 sketch is HERE

    Hi! I used my creative sketch from Week 5 as a starting point and then added: 

    - an .mp3 file from one of my lil music improv sessions 
    - a volume control slider 
    - the line( ) function, which serves as a visual representation of what is happening with the music: 

    left side = volume lower 
    right side = volume higher

    Audio Queing-up: preload() and mp3.loop() loads and plays the mp3 on a loop  
    Volume Control: mp3.setVolume() changes the volume based on the starX / mouseX position 
    Mouse Function: if (mouseIsPressed) and line() draw a line from starX to the mouse when pressed
    starX variable: tracks the X-axis position to see where the line will start 


    WEEK 6
    Simulation

    "Patient Zero": Viral Spread

    Link to the P5 sketch is HERE


    Whenever I explain my motivation for these assignments, I start to sound like one of those recipe blogs where you have to scroll past a thousand words about childhood memories to get to the actual ingredients. So I’ll keep this short, I promise! 

    This is my attempt at simulating what a virus might look like in p5. Obviously, I have zero experience with viruses (unless you count the 6 months I spent washing my groceries). 😅

    Here’s the gist of the sketch: 
    • Using the array people[ ], the sketch simulates 100 “people” moving around randomly on a 600×600 canvas. 
    • One random person is “patient zero”. They start sick, and when they touch other people, they spread the virus. 
    • When two people touch (their circles overlap), the illness spreads: either one being sick makes both sick. 
    • A glow effect makes sick people red and healthy people green.
    • Live counts of healthy and sick display in the top-left.
    • A faint motion trail effect shows where they’ve been (this is the function I’ll expand on a bit): 

    Lately, I’ve been so intent on getting my sketches to run that I’ve overlooked focusing on some of the aesthetic details that might give them more character. That’s why I’ve chosen this particular function to highlight; it may seem frivolous to the core logic, but it’s what gives the sketch that 🦠virus🦠 feel🦠.
     

    show( ) method (defined inside the Person class):

    • .sick holds a boolean value (true/false), show( ) decides how the people will be drawn:
    • If this.sick is true, the if condition runs and that draws the person RED. If this.sick is false, the else runs, which draws the person GREEN.
    • The function drawGlow (it’s made up!!!) is being called here and is defined with the parameters: x, y, size, and c.

    Below that, I’ve defined (the made-up) drawGlow function: It’s defined with the parameters (x, y, size, c), so in this case: 

    •  x = this.x
    • y = this.y 
    • size = this.size 
    • c = color(either red or green). 

    The drawGlow for loop: 

    • glowAlpha sets the circle’s transparency.
    • glowSize makes each circle larger.
    • fill() sets the color and transparency.
    • ellipse() draws the circle at (x, y).

    The 3 glowing circles: 

    • when i = 3, biggest, faintest circle (drawn first at the bottom (outer glow).
    • when i = 2, smaller, less faint circle (drawn next in the middle).
    • when i = 1, smallest, brightest circle (drawn last on top).


    LET ME KNOW IF THIS MAKES SENSE!!!!





    WEEK 5
    Time

     SunriseSunset


    Link to the P5 sketch is HERE



    I have chronic insomnia, so this one feels pretty true to life. 😬 Seeing the day come again when it was just the day is 🙃.

    In this sketch, everything runs in a loop (like the sunrise/sunset).  🥲 The hour variable keeps increasing a little bit every frame, so the scene moves through night, sunrise, day, and sunset over and over. 

    The drawSky function changes the background color depending on the time: dark blues for night, orange for sunrise and sunset, and bright blue for daytime. 

    Then drawSun figures out where the sun should be and moves it across the sky in an arc-ish shape, rising on the left side and setting on the right.

    The draw function pulls it all together. It calls the sky and sun functions, shows the current time at the top, and keeps the animation looping endlessly. The code is simple, but it builds a tiny world that keeps moving.  🏃‍♀️☀️


    WEEK 4
    Patterns

    NIGHT SKY


    Link to the P5 sketch is HERE


    In this version of the code, the main structure stays the same. There’s a variable that increases each frame, and a random y value that shifts up and down to keep things unpredictable. Inside the draw() loop, instead of connecting the coordinates with line() (like initially did below), I used point(x, y). That small change means each frame just plots a single pixel of color instead of a segment, creating scattered dots across the screen. As the loop runs and resets, these points appear and disappear quickly against the black background, which gives the whole thing a sparkly, almost star-like effect. Maybe part of me is just wishing I were able to see a true night sky from New York City. :( 




    Here is my original iteration of this exercise. I found that I had the easiest time with the line and mouse-follow assignment this week, so I decided to use the line() function as a starting point. There was something about having one side anchored and being responsible for the other that made the concept easier to understand. It felt intuitive, balancing something that’s fixed on one end while experimenting with what happens on the other. I decided to see what would happen if I combined random() and line() inside a loop.

    If I were to expand on this idea, I’d love to turn this into a seismograph simulator, where the line records imaginary tremors or data spikes.

    References: for line(), point(), and random().



    WEEK 3
    Choices

    PET CAT OR WIN LOTTERY???


    Link to the P5 sketch is HERE


    The timing of this assignment was interesting because I recently learned that the human brain makes about 35,000 decisions daily (and I’m exhausted just thinking about it). On a busy NYC street, most of those choices will be about whether to pivot right or left around people (among a bunch of other choices we probably don’t even realize we’re making). The choices I remember the most have to do with my interactions and how I show up in the world. And just like you, a lot of those interactions will happen in bodegas, which is why I chose these images. :))    Edit: learned how to add to the style.css file from our assignment share today, so I’m experimenting with fonts, etc. < 3 

    The code itself declares 6 variables, including page, pic1-3, and cat, lotto; the last two are used in the button setup.

    When I was making the basic sketch, all I had written under the draw block were functions that showed images after a button was pressed. After I took a break and came back, I noticed a couple of things were happening: 

    a) When I would reload the sketch, it would automatically default to pic2, which showed the angry cat/bodega man. This meant that it was not defaulting to ‘page’ 0 (the one that lists the two buttons/initial choice). 

    b) The buttons would remain on the screen no matter which button was pressed. 

    I solved both issues by a) placing “page = 0” in the setup function and  


    b) by making 3 conditional statements that hid buttons if the program returned ‘page’ 1 or ‘page’ 2:
     



    WEEK 2
    Opposites Animation 

    SLOW/FAST


    Link to the P5 sketch is HERE


    When I started thinking about what kind of opposite I should choose, the Tortoise and the Hare fable came to mind right away. It’s a story about a race between a naturally fast Hare and a naturally slow Tortoise. At the beginning of the race, the Hare confidently passes the Tortoise. While it seems certain that the Hare will win, the Hare ends up taking a nap by a tree, leaving the Tortoise to win the race (slowly). The story is meaningful to me because it reminds me to stick to my own pace/authenticity/mission, regardless of outside pressure. It also reminds us never to underestimate the underdog. :) 

    The code itself declares 4 variables, including let pinkY; let yellowY; (because they’re both moving along the Y axis, let pinkSpeed; and let yellowSpeed; to declare the variable for their respective speeds. In the setup function,  I establish pinkSpeed = -2; and yellowSpeed = -5; which indicates that the yellow circle is moving at a faster rate than the pink circle.  


    In the draw function, I wrote conditional statements that tell the yellow circle to move until a certain point. It basically says “if the yellow circle passes a point lower than 250 on the y axis, then it should stop”. 




    The pink circle movement pinkY = pinkY + pinkSpeed; is basically just telling it to continue at its normal speed. 


    Legend has it, the pink ball is still moving, slowly but steadily, like the Tortoise.  🐢





    WEEK 1
    Self Portrait

    Link to the P5 sketch is HERE


    ORIGINAL SKETCH 

    P5 PORTRAIT





    What did you do?
    I created a simple sketch using blue(25, 54, 220) for the elements and white for the background. I started by using the ellipse() function for the head, point() function for the eyes, line() for eyebrows and lips, then moved onto more difficult functions like curve(), bezier(), and arc() for the shirt, neck, and hair. I’m inspired by monochrome graphic novel animation, so I decided to go with one color. 

    What worked?
    Because I’m new to P5, I found the point(), ellipse(), and line() functions to be the most intuitive. I’m guessing this is because there are fewer arguments within the functions, all of which at most use 4 or so arguments. 

    What didn’t work, and what steps did you take to try to solve the issue?

    It’s worth mentioning that I wish I had seen the P5 visualization tool that was linked on the class GitHub before proceeding. I definitely thought I had read through every detail, but it seems like I missed it. I definitely will be using that in the future!

    I got a bit ahead of myself and ended up using the curve() and bezier() functions for the hair and body details, and completely skipped the simpler 2D primitive functions for the body elements. It was a bit bewildering at first, but it allowed me to get a deeper understanding of the x, y axis and exactly what happens in the sketch when we change the argument values. Although we learned these basics in class, when you dive into a more complicated function, like a bezier(), it can be disorienting to start adjusting things randomly if we don’t take the time to understand what is happening in the code. For example, I had to keep reminding myself that a larger X numerical value moves to the right, a smaller X moves to the left, a larger Y number moves down, and a smaller Y moves up. It’s simple to understand, but it can be difficult in practice. Because there are eight arguments in the bezier() and curve() functions, it’s more disorienting. In hindsight, I would have started with simpler functions with fewer arguments to get a better handle on how things move around on the axis before jumping to the more complicated ones.  

    Cite your sources:
    P5 references, YouTube, Google







    ICM

    WEEK 8

    Parts of a Whole

    Adding Filters to Distort an Image

    Link to the P5 sketch is HERE
    Oh no! I discovered the filter( ) function!