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. 🙈

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).  

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: 

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 

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).

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.

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:
 

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. 

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