Month: February 2025

I decided to make an experience based on a flower shop. Users can go into the shop, select flowers they like, make a bouquet, and buy flowers. I also want to implement a money system such that you need to purchase everything within the budget, and if you go over the budget, you can’t buy the bouquet. Right now, I’ve implemented being able to walk in and out of the store using a door (enter) and rug (exit), being able to select the flower stand and select flowers you like from a menu into your cart, and going to the checkout. I want to draw all the images, backgrounds, and items in this experience, but right now, I just simple stand-in pictures I drew. I’ll replace these shabby ones in the future, but I just wanted to get the mechanisms of my system working before beautifying it.

Jotting  down  ideas  before  starting:Lots of things ended up changing. I originally wanted to make everything pixel art too, but I think I’m gonna stick with more a freeform style.

Fear:

I had a lot of difficulty displaying and un-displaying different elements in the project. For example, I have a hover effect I’m proud of as it helps indicate what’s clickable to users. However, that means turning things on and off in terms of displaying them, which is a lot more complicated to implement than it intuitively feels to use. I knew I was gonna spend a lot of time figuring out how these mechanisms were gonna work, so I wanted to start early on these instead of the visual sophistication of the project. That’s why I created really simple sketches and blobs to fill in the final drawings.

I’m also not sure if I want to implement a budget; the minimum viable product should be being able to make a bouquet with flowers you chose without worrying about the money, but it’d be nice to have. Having these milestones is important because then you feel less overwhelmed. Each tiny detail can take a long time to implement, so it can feel very daunting. However, I can steadily make progress through these milestones.

Computer Vision

The articles juxstaposing of computer vision with human vision was very interesting. While some aspects are similar, such as a common use of types of lenses for both recording video and through retinas, the image processing appears to be where differences begin to proliferate.

An interesting point I found the article made was that videos are inherently recorded to store pixel information, but not necessarily scene information. For instance, a night sky is recorded as lots of black pixels–rather than some encoding of a night sky parameter enabled. This fundamental concept means that complex algorithms must be constructed to reconstruct and interpolate the scene information from pixel values. Furthermore, there are still many video encoding formats (e.g., H.264, H.265), so standardization is further lacking in this regard–introducing additional complexity to the process.

One of the techniques I found intriguing is the background subtraction technique, where an initial reference image of the set is first captured. Then, the reference is used to systematically distinguish which objects belong to the scene, and which do not.

The surveillance art, which monitored the Golden Gate Bridge, sparked considerable reflection. I found the author’s point particuarly pointed, when it was revealed that the art had captured a considerably higher number of suicides than what was noticed through traditional systems. However, I can also see how recording these events is also uniquely invasive to the subjects, who are likely unaware that they have become part of an art piece–and did not sign up to be so. This work was only made possible through computer vision.

Computer vision algorithms are not general-purpose and rely on specific assumptions about the video input, while human vision is adaptable and can interpret a wide range of visual stimuli. Unlike humans, computers cannot inherently understand or extract semantic information from visual data without additional programming. Additionally, computer vision systems may struggle with ambiguous or poorly defined scenes, whereas humans can often infer meaning from context.

Techniques to enhance computer vision include controlled illumination to improve contrast, using brightness thresholding to distinguish objects based on their brightness, and employing background subtraction to isolate moving objects. Additionally, surface treatments like high-contrast paints can make objects more detectable. Simple object tracking algorithms can also be implemented to follow specific features, such as the brightest pixel in a video frame.

Computer vision’s tracking and surveillance capabilities enable interactive art to engage audiences by responding to their movements and expressions, creating immersive experiences. However, this capacity raises ethical concerns regarding privacy and consent, as participants may be unaware of being monitored. Artists must balance the innovative use of tracking technology with responsible practices to ensure a respectful and enjoyable interaction.

How Computer Vision is Different from Human Vision

Computer vision and human vision work in very different ways. People can see and understand images quickly because our brains recognize patterns, shapes, and objects naturally. We also understand depth, colors, and movement easily. Computers, however, need special instructions to “see” things. They analyze images by looking at tiny dots called pixels and using math to find patterns. Unlike humans, computers have trouble with things like bad lighting, unclear backgrounds, or objects that look similar. This means computer vision needs special tricks to work well in different situations.

How We Help Computers See and Track Objects

Since computers do not see like humans, we use special techniques to help them track objects. One method is frame differencing, where the computer looks at two pictures and spots the differences to detect movement. Background subtraction helps the computer ignore things that do not change and focus only on moving objects. Another technique is brightness thresholding, where the computer finds objects based on how bright or dark they are. More advanced methods use color tracking or infrared cameras to improve accuracy. These tools help computers find and follow objects better, even in complex scenes.

How Computer Vision Affects Interactive Art and Surveillance

Computer vision is used in art to make interactive experiences where people can control things with their movements. For example, in Myron Krueger’s Videoplace, people’s shadows on a screen could interact with digital images. Artists also use computer vision to explore serious topics like surveillance. In Sorting Daemon, David Rokeby used it to study how cameras track people in public places. Another example, Suicide Box, recorded people jumping off a bridge to show how some events are ignored by society. While computer vision makes art more exciting, it also raises questions about privacy and how technology watches people without their permission.

My Concept:

For my midterm project, im attempting to bring Bikini Bottom to life through an engaging and nostalgic digital experience. The project features the three iconic homes from SpongeBob SquarePants, SpongeBob’s pineapple house, Squidward’s stone home, and Patrick’s simple rock. The project is a tribute to childhood memories, capturing the essence of the beloved cartoon that many grew up watching. I plan to make it more interactive by making users solve different problems using hints, enabling them to interact with different objects.

Design:

For my design I hope to closely mirror the original aesthetic of SpongeBob SquarePants, using vibrant colors and playful elements to capture the cartoon’s distinct underwater atmosphere. The houses are placed in a scene that resembles Bikini Bottom’s sandy ocean floor, with blue gradients representing the ocean background as shown below: 

The interactive element plays a crucial role in this project. As the user moves their mouse over each house, the door lights up to indicate interactivity. When a user clicks on the door, an passcode input box pops up, where the user needs to type in the correct code to unlock it (by using hints). When a user interacts with the door, they enter the house where, depending on the house chosen, will have a different theme and interactive objects that match the vibes/themes of the character. This will also be done by changing the genre of music inside each house.

Challenges:

One of the main challenges was making the opening door action simple and easy to use. Instead of just clicking the door, I had to add an input field that only appears when needed. Managing this input box so it doesn’t always stay on the screen was tricky. Another challenge was handling incorrect passcodes. I made the program display “Incorrect” on the screen. This required making sure the message only appears when needed and resets when the user tries again.

Finally, I had to ensure that when the correct passcode is entered, the screen updates immediately. This meant making sure the input box and button disappeared at the right time while smoothly transitioning to the next screen.

let doorX, doorY, doorWidth, doorHeight;
let isUnlocked = false;
let correctPasscode = "1234"; //the passcode
let userInput = "";
let message = "";

function setup() {
  createCanvas(300, 200);
  
//door position
  doorX = width / 2 - 40;
  doorY = height / 2;
  doorWidth = 80;
  doorHeight = 120;

//input box
  inputBox = createInput('');
  inputBox.position(width / 2 - 50, height / 2 + 50);
  inputBox.hide(); //hidden at the start

//create submit button
  submitButton = createButton('Enter');
  submitButton.position(width / 2 + 60, height / 2 + 50);
  submitButton.mousePressed(checkPasscode);
  submitButton.hide(); //initially hidden
}

At the moment the dimensions for clicking the door is not perfect at all, but it’s just to give an idea. (click at the bottom of the door)

passcode is “1234”