[ICM] Week 5: Functions (Pet the Fish revamped)

in

Link to sketch: LINK

I’ll likely keep iterating upon this “pet the fish” scene as I continue to gain new skills and knowledge of different interactive components. This time, I wanted to try out the fish and hand with rasterized images. I used preload() and image() to import and place the images.

Next, I used a class constructor to make the clouds interaction organization more efficient. Instead of having a standalone series of moving ellipses. Each cloud had its own properties and placement. The x, y, w, h are self-explanatory, but ppf stands for pixels per frame (indicating a different movement speed for each. Whenever, createNewCloud() is called, it generates properties within a set range and pushes a new cloud into the clouds array stack. I separated these into two different functions so it would be easier to change the range of cloud sizes and positions without having to change the Cloud constructor / class itself.

I created an array of clouds (clouds[]) which is set to always have ~10 clouds. In the setup(), a for loop will push 10 clouds into the array and then within the draw() function, a for loop will parse through the clouds[]. This was the most challenging part of the code to work through so far. I wanted to make it so that if the cloud has fully passed the screen, it removed itself from the array. At first, I put clouds.length-1 within the for loop, but it kept generating way too many clouds. I think it’s because clouds.length was continually being updated as I added/removed from the array. Once I took that calculation out to be done before going into the loop, it solved my issue.

Lastly, I added a click counter to game-ify the interaction. I want to keep working on the visuals for this, for sure. This project is still yet to be fully realized. I want to bring back the petting fish mechanism / interaction again, but I was only able to complete the clouds so far.

[PCOMP] Midterm Project - Pop up Book (Preliminary Notes)

in

Title: “Three Little Pigs” Pop-up Book

Description: Based on the childhood story of Three Little Pigs, this project will bring the scene of the wolf blowing down the three little pigs’ house down to life, using light-up and interactive components

Schematic sketch for LED and flex sensor component

Schematic sketch for fan component

List of potential interactions: 

  • Flex sensor

    • When the flex sensor is stretched, book is closed (LED off) 

    • When the flex sensor is loose, book is open (LED on)

    • Backup sensors if this one doesn’t work: Photoresistor, stretch sensor

  • Button to change light mode on LED’s

  • Fan: Analog input → FSR press, Analog output → fan speed in motor

Pseudocode: 

  • If the flex sensor is loose (low reading), then the LED shines white 

  • If the button is pressed the first time, LED shines white

    • If the button is pressed the second time, LED shines red

    • If the button is pressed the third time, LED shines green

    • If the button is pressed the fourth time, LED shines blue

  • The stronger the FSR press, the faster the fan speed.


Timeline:

  • Week 1: 

    • Draw schematic

    • Build working circuit with LED’s and flex sensor

  • Week 2: 

    • Add Fan component

Pop up book paper prototype (the cover is cardboard and the flex sensor is attached on the bac where the spine is).

Working flex sensor wiring with FSR attached. The FSR hasn’t been attached to any computation or output yet.

Working code! Flex sensor method is a success. The flex sensor reading gave output from 150 (unbent) to 450 (bent). I mapped this reading to a 0 to 10 scale just to make it easier to decipher in the code. If the flex sensor gave an output to be greater than 3, then the declared boolean variable “bookOpen” will be true. This boolean “bookOpen” will be useful later on so that all the interactions only happen if bookOpen is true. All of the LED interaction that Chris has been working on this past week will go here. The number 3 was found using flex sensor testing of opening and closing the spine.

In the other parts of the code, I started working on fsr —> servo motor interaction, but it wasn’t working properly. I will continue to investigate why that may be this coming week.

[ICM] Repetition with loops

in

Link to sketch: LINK

For Week 5’s assignment, I wanted to practice using some new functions in p5 that I’ve seen in some classmates’ projects: modular functions, sliders, preloading images, etc). This ended up shaping my end result more than any creative idea itself. A lot of the coding work I did this round was unplanned and through experimentation. It was fun to work this way for a change, but I do think the end result would be stronger with more concept work and planning.

I grabbed a portion of this code from my previous retro tv assignment.

When trying to create a repeating design using for loops, I found it more challenging than expected. It was more so the math part that was difficult than finding the corresponding code for it. I racked my brain for anything I could remember from high school calculus BC… but my brain was empty. I officially have lost that knowledge. The distance code was a math calculation that I have forgotten and found in a p5 sample code online. I experimented with using distance to create an interactive design, but didn’t end up integrating it into my final work. Instead, I played with sliders.

I was drawn to how the design looked rotated. However, it was rotating across 0,0. I wanted to center the design so it would create a spiral around the middle. I did this by using push() and pop(). I also loaded up a background space image using preload() in setup().

The slider would change the scale of the spiral as it rotates. I thought it would be interesting to have it so that every time you clicked, a star would be left behind as part of the night sky. This would also make good use of my newClick() function.

Hooray for math calculations found online done by someone who is not me. If I didn’t find this code online, I likely would have settled with a circle or a quad.

It was a bit tricky to get the starStack array to work. I’ve done nested arrays before, but not in Javascript. I wasn’t sure exactly what properties and functions arrays had in Javascript. I kept a clickCounter to keep track of how long the array was. It took a bit of time to make sure the array was never called upon when empty and to make sure that the loop referencing the array’s components never referred to a null object. Once it worked out, it worked out well!

One of many end results:

[SEA-DP] Assignment 1

in

The first idea I have is an interactive data visualization on algorithmic bias found in AI generated stories. Heavily inspired by Joy Buolamwini's research and activism in the field, I hope to create an interactive piece developed using statistics found in the research papers “"Gender Shades: Intersectional Accuracy Disparities in Commercial Gender Classification” (Joy Buolamwini) and “Laissez-Faire Harms: Algorithmic Biases in Generative Language Models” (Evan Shieh). How does algorithmic bias in Chat GPT and facial recognition models exist and what are the dangers that they pose on our society, especially the youth that takes AI for granted as "objective" computation? How can we make more people cognizant of this algorithmic bias?

A potential extension of this project would be to create an application where people could type in prompts such as "top 10 famous artists, directors, etc." and find out what the demographics of the recognized figures reflect (which often bias Western + white public figures).

Artists to reference: Joy Buolamwini, Jonathan Zong









The second project is an electronic textile lion dance head sculpture illuminating the textile garment industry and history behind Chinatown. It will map a patchwork of found fabrics embedded with stories from local textile workers. Later on during Lunar New Year, it will contain a lion dance performance in Chinatown open to the public and inviting all those involved with the project.

Reference: The Chinatown Art Brigade, the WOW Project, Joy Mao



 

The third idea is a continuation of a project I've been working on "to you 100 years into the future. I wish to create a website archive and network of discarded fabrics and the stories / goodbye letters each person has written when discarding it.

“to you 100 years into the future”  currently contains a fabric stew of nostalgic colors and prints made from silk, polyester, cotton, denim, and others. Each discarded textile was transformed given a character to play—a bowl, a table, a monitor, a potted plant, a teacup—into a newly constructed home. The project explores the ways we transcribe our stories into permanence through the textiles that outlive us.

Textile contributions are traceable pre- and post- transformation through embroidered ID numbers, which will also be the organization method through which people can find each item as a link. Each household item is named “titem”, a play on the words “(t)ransformed item” and “totem”, followed by an ID number. Visitors of the site are encouraged to peruse the documentation of the transformation process and the memories recounted by contributors.

Website references include: Screenshot Garden, Handmade Web, Laurel Schwulst




[ICM] Rule-based Animation and User Interfaces

in

Link to sketch: LINK

For this assignment, I was working with my friend Khalinda who came up with the idea of a tv screen and remote that we can use to turn on and off an animation using a button. Khalinda prepared the drawing using a generous amount of translate(), push(), and pop() to allow for easy rotation without letting it affect all the other shapes being drawn.

Next, I changed up the colors and started working on the button interactivity. I created some global variables that I anticipated I would need.

We had a separate playAnimation() function to organize our code a bit. playAnimation() would only be called if the tv was on. It would draw an X shape of spinning squares centered in the middle of the tv screen. We used push() and pop() before and after it was being drawn because the squares were consistently being located.

Then I added another interactive yellow button that only works if the tv is already on. While the animation is playing, if the yellow button is pressed, it would slow down the spin (by reducing the rotateConstant).

Lastly, I added a repeating grid of squares to snazz up the design. The nested for loops helped me draw a square every 40 pixels. I realized I forgot to set the stroke and fill after I ran this code, but then realized I actually liked it better that way. It was cool to see the size and color change slightly as the buttons were being pressed and animations were being played as well.

[PCOMP] Speakers and Servos

in

I started out by setting out my materials and reading the lab. I’m still in the process of re-familiarizing myself with the different terms for sound (Hertz, period, frequency, etc). During class, I’m hoping Pedro will explain the in-depth understanding of why we can’t use analogWrite() to change the frequency and what tone() does differently to do that instead.

I forgot to take a picture of my setup, but my circuit was done according to this plan on the right. Note to self: I want to get better at drawing schematics from memory.

The first thing now that I have my setup connected is to test that the input is reading correctly. I do this by using the analogRead() command. It’s interesting to note that the analogRead() does not need a pinMode() in the setup() function as digital input/output does.

Input is confirmed to be working correctly.

After input is confirmed to be working, I check output next by asking the speaker to play just a regular one note tone.

Hooray! My input and output are both working correctly. Now, I can get into the more complicated stuff by changing up the computation. I followed the code suggested from the labs, but tried to code the for loop on my own, just to refresh my memory on programming in C++.

This code asks to play the melody just once using "pitches.h" as a reference library for all the notes.

After hearing the computation play the melody okay, I started preparing the breadboard to have multiple sensors so that the tones the speaker plays would be dictated by the analog input (using analogRead) instead of just the information stored from the code.

The code here reads whether each of the sensors are being activated, and if so, plays their designated note. I noticed that the speaker wasn't playing the note correctly until I set the threshold to 200 (so there was less noise) and added a delay(). Maybe next time, I will try using a counter against millis() instead to read the sensor every 20 ms instead of stopping the whole program for 20 ms every time the loop runs.

After finishing the speaker lab, I moved onto the servo lab. At first, I tried to connect power to the 5v prong instead of the 3.3v prong because I thought the servo would use more power and was confused why my components weren’t working. My board was powered on, but the analog reading wasn’t working properly. This was resolved as soon as I adjusted back to the 3.3v prong.

This is what the code looks likes when using analogRead() on the potentiometer and mapping it to a range that the servo is able to move (up to 180 degrees). This time, I am using millis() as suggested by the lab's code.

The servo moves! Even better when there’s a shark plushie attached on top so you can move the pot to make the shark look like it’s swimming. As my final part of the lab, I combined both the speaker and servo together into one code and one board. I also included my own song instead, choosing the most iconic line from “Take Me Home, Country Roads” by John Denver. I still wanted to keep the pot in to control the direction the shark faces when dancing at the end of the line. The way that I programmed it was to have the loop() parse through the melody array using a global counter (instead of playing the melody all at once in the setup() function). At the 15th and 16th note of the melody, the shark will move a step every time.

Note: I changed the mapping range from 0-1024 to 500-1024. I noticed that the full range the pot was giving from the analogRead() Serial printing was only within that range.

[SEA-DP] Week 2 Assignment

in

With the increased digitization of our lives, so many interactions of our everyday lives have become traceable than not. An interaction or conversation on the internet can feel private, especially in chatrooms, password-protected spaces, and personal websites, but I feel unnerved when I think that this privacy is only conditional and can easily / quickly be made public outside of my control. It’s become a habit for me to make information accessible online when I want it to be “public” and ask to have a conversation offline when I want it to be “private”.


In Radical Technologies’s chapter on Digitized Lives, they mentioned stacking as a commonly used method by tech giants to maintain control over every stage of the production, wrapping the variety of services, products, and devices we use under the umbrella of one power. With one company attempting to obtain ownership over many different aspects of our everyday life, they have a lot of variety in access to our data. In this one, what feels private is not private all, with all these invisible hands observing our data and customizing what they show us on our behalf.

[ICM] Animation and Variables

in

I started my animation with moving clouds from left to right. I used a variable “cloudXStart” to keep track of where the X coordinate of the first cloud was. After the clouds had fully run their cycle (I knew this was roughly 2.5 times the total X or width distance, I would set the cloudXStart to repeat by pushing it back to -50. The reason why I set it to -50 instead of 0 was because I wanted the center of the cloud to be before the left border and slowly move into the visible frame.

// Reset clouds to move again if it's been a while

if (cloudXStart > width * 2.5) cloudXStart = -50;

At first, I tried to draw a cloud using the beginShape() function, but the points kept ending up in spots I didn’t intend for them to be in, so I ended up using a series of ellipses to construct each cloud instead.

Picture of hand drawing work in progress.

To get a random hand color every time the program resets, I created variables that would be declared using the random() function inside setup().

//generate random hand color

handColorR = random(0,255);
handColorG = random(0,255);
handColorB = random(0,255);

Then, I would draw out the actual shapes in the hand with

fill(handColorR, handColorG, handColorB);

At first, I tried to rotate the thumb shape of the rand after drawing out the (rounded corner) rectangle shape. However, it kept rotating the thumb around the point (0,0). I’m not sure how to fix it, so I just left the thumb flat horizontal without rotating for now.

Next I created a blue sea rectangle and a fish swimming inside it. The fish’s color will be the opposite of the hand’s color (so it will be randomized each time as well). At first, I set the fish expression to be black, but realized that it was difficult to see when the fish was randomly generated to be a darker color. Because of this, I set the expression to be white, if the R G B numbers were collectively below a certain point.

// Make features white if color of fish is dark

let fishDarkColor = false;
if (handColorR > 100 && handColorG > 100 && handColorB > 100)
fishDarkColor = true;

For the mouse interaction, if you click and hold the mouse, the fish will smile. It is recommended to click and drag the mouse over the fish’s body back and forth, as if you were petting it.

[PCOMP] Input and Output

in

This lab, I worked with the Arduino and digital input/output and analog input. We started using the Arduino IDE for the first time, starting with the simplest commands, such as making the LED shine and blink. I used the basic blink code to make it so that when the switch is activated, the LED turns on. It worked for the LED, but not the tilt switch component given during class. Chris and I met up to chat about the wiring outside of class, but we weren’t sure why the tilt switch wasn’t working (pictured below on the left).

Next, I wired up to LED’s so that one LED lights up when the button is pressed, and the other one lights up when the button isn’t pressed. I used the code on the right. I thinking figuring out the code is the part I enjoy most about physical computing.

I then attempted to wire up a potentiometer to the LED using analog input into the Arduino to read and interpret the pot data for the LED. I was surprised to see the LED be able to respond to the subtle changes of the knob. If I twisted the switch towards the left (power side), it became brighter and had lower resistance. If I twisted the switch towards the right (ground side), it became dimmer and had higher resistance.

I soldered wires for the first time. I put off learning how to solder for a while, but it was more fun than I expected. It makes me intrigued to do more metalworking (perhaps in the context of jewelry making) in the future.

I soldered wires to try to get my speaker to work. I used the same code as the pot / LED exercise, but changed the terminology from brightness to frequency to avoid any potential confusion. It was cool to hear the sound come out and change with every knob turn. It was a less seamless gradation between the frequencies for the speaker than the gradation for the LED brightness, which was very seamless.

Next, I wired up two FSR’s and set them to send digital output to the LED’s. It made sense that the brightness needed to mapped to a different range (from whatever the input range was and to whatever the output range needed to be. I think currently, it is not too clear to me when I should use digitalRead vs. analogRead and digitalWrite vs. analogWrite.

Next, I attempted to find the sensorValue range for the photoresistor, but the values kept jumping all over the place. I tried a couple methods, first by setting a threshold and second by calculating the average of the readings (with Kaye’s help). However, there seemed to be too much noise and not much of a difference between when I covered the photoresistor with my hand (mimicking “darkness”).

Switching back to the button, everything read smoothly again. This part was pretty fun and I’m already seeing all the possibilities for making toys, keyboards, games using physical switches to map data into art pieces I want to make. It could even be as simple as a cookie clicker. Perhaps I will make a cookie clicker game with a button in the shape of a cookie.

I felt like I was talking to my good friend the computer, and the computer was talking back to me.

The analog input worked well for the FSR as well. I changed up the Serial print text format so that it would be easier for myself to read. Currently, I only vaguely understand how the math works (with threshold, noise, and peakValue). I’m looking forward to understanding it better conceptually tomorrow in class.

[SEA-DP] Week 1 Assignment

in

Socially engaged art is art constructed with the intention towards political or social change, social critique, and/or created in collaboration with community members. When speaking of socially engaged art in the context of digital or networked technologies, it uses digital media as the medium or referring to it as its main subject matter.

Teaching as an art practice can also be a socially engaged art, in its effort to create safe spaces where people from diverse backgrounds, especially youth, can engage meaningfully and learn from one another. Hosting technical skill-building opportunities at a low cost lowers the barrier of entry. They emphasize the importance of democratizing the web, increasing access and representation to technologies. I wonder if SFPC (an experimental school grounded in empowerment through a deeper technical and political understanding of the tools we use) or POWRPLNT (a media arts organization that frequency hosts free workshops to elevate digital literacy and encourage expression via technology) could be strong examples. They are primarily online-based spaces of learning that facilitate the study of art, code, software, hardware, or critical theory at low cost or with scholarship. They provide spaces where people can share things they know and increase digital literacy so that people can protect or advocate for themselves better.

[ICM] Screen Drawing

in

I want to use computation to build fictional environments through which people can explore, learn about themselves, and reflect on the physical world around them. I want to learn how we can build immersive worlds digitally that can be translated into physical and the reverse. How can we change our relationship to technology to one of care and humanity? How do people attempt to place sentimentality into emotionless objects? Is there a way to democratize the digital web?  I want to build beautiful worlds such as Taehee Wang’s Queer UV Map diagram, where they use the website to simulate navigation into their body, mortality, and fear. I’m inspired by net artists such as Olia Lialina and Lorna Mills, who use play and humor to inform their work, and Yeseul Song’s Thought Sculpture III, which invites participants to reflect on their senses as they experience digital forms. I love Laurel Scwulst’s philosophy behind creating a handmade web, and am oddly fascinated by broken websites and broken links—they highlight how the technology (often misinterpreted as a neutral third party) is imperfect too, just like the humans that build it. 

In my first prompt, to draw a self portrait, I first envisioned how I could simplify a depiction of myself into shapes. Would it be a QR code that leads to a link that’s significant to me? Should I re-draw an illustration I’ve done in the past, re-interpreting it into a series of numbers and functions? I decided to draw my home desk set-up using the same colors in this past illustration of a desk I’ve done. I’m often drawing and re-drawing my desk numerous times, in different mediums and different desk setups for each apartment I live in. It’s the space I see most frequently every day, the place I truly inhabit. This past August, I moved apartments (the shocking distance from one apartment in Astoria, Queens to another apartment in Astoria just a 6-minute walk away). I figured this would be the perfect opportunity to cement the ephemeral changing space of a desk set-up into yet another drawing. 

(Illustration initially drawn on Procreate, collaged with photo elements.)

As I started coding, I started to separate the parts of my illustration into basic shapes and identified the key colors that made up my illustration.  First, I drew parts of the desk, and then I drew the parts of the monitors. I based all my approximations on the (0, 0) coordinate being top left and (width, height) coordinate being bottom right.

I wanted to try making my drawing scalable, so instead of using exact points, I would approximate the locations using width and height variables. I noticed that my division started to get a little messy haha. I was placing my coordinates all based on eyeballing the placement and proportions.

  • //draw desk

    strokeWeight(0);

    fill(179,148,229);

    quad(width/5, 2*height/3, 4*width/5, 2*height/3, 4*width/5+width/8, 4*height/5, width/5-width/8, 4*height/5);

    fill(135, 89, 212);

    rect(width/5-width/8, 4*height/5, (4*width/5+width/8)-(width/5-width/8), height/15);

I tried to draw out a grid behind the monitors using a while() loop and for() loop, but both made my code crash. I gave up on automating a grid or dot pattern after that. I’m hoping to get answers on how to automate grid drawing next time in class.

  • //tried using loop to draw grid, made it crash

    while (i < 10){

    line(i*width/10, 0,i*width/10, height);} i++;

Then, I tried to make it so that the colors in the computer screens would change over time. I set r, g, and b as variables declared at the beginning of the code (I placed it outside of the functions and it seemed to work there…). As each draw() was called, the r, g, and b variables would either go up by one or go down by one. I also declared upr, upg, and upb as booleans to make sure that the r,g,b numbers stayed within the bounds of 1 and 254.

  • //set r in fill color of monitors

    if (upr==true) {

    r++;

    if (r>=255) upr = false;}

    else if (upr==false) {

    r--;

    if (r<=55) upr = true;}

Then, I added a circle in each of the monitor screens so that the drawing made a :| funny face.

Next, I fiddled with the background color. I landed upon a pale sky blue.

The web editor was quite intuitive to use. I wasn’t quite sure how GitHub would be incorporated into my process quite yet with the p5 web editor. I would also like to host my p5 project independently on a site outside of the p5 web editor someday as well. If I had more time, I’d like to map the coordinates for the rest of the shapes as well. It was more time consuming than I expected to draw out each shape.

[PCOMP] Getting Started

in

I was excited at the prospect of playing with wires and arduinos at first, but once I started sitting down with my first assignment and looking at the schematics… I was shaken. It’s been a long time since I’ve entered a space that felt so unfamiliar. While sitting in the shop going over my readings, I looked to my classmate next to me with dead eyes. “My background is in painting…” how did I find myself here?

I wish I could paint the resistors instead of connecting them. There’s a small fear inside me where I worry I’ll irrevocably damage the materials, but I know the stakes here are low. We are students. We are brought here to fail. Through failures come successes.

I started out by laying out the items all in front of me to differentiate which was which. I borrowed my dad's multimeter to help get started with the lab at home.

Next, I used the multimeter to measure the continuity and make sure all my tools were working. Very quickly, I realized I was missing some tools and decided to continue when I’m back on the floor for pcomp help from the residents.

I wired up a circuit to connect to the Arduino (which connected to my laptop as a power source). For the longest time, it seemed unclear why my LED lights weren’t working. I asked Kaye to take a look and after some inspection, they found that the top red wire wasn’t connecting the positive to the correct power source node on the Arduino. Once one LED was working, I wired up another LED to sit in series with the other one. I noticed the lights seemed a little dimmer, perhaps because the voltage provided was being split up into two loads instead of one.

Next, I added a normally open push button. It was exciting to see the LED’s flicker based on my interaction. After the one with the first LED worked, I added another LED to sit in parallel.

Next, I added a potentiometer (the three prongs representing input, output, and ground respectively) in place of where I had the resister. The more I turned the knob right, the higher the resistance got and the dimmer the LED became. The more I turned the knob left, the lower the resistance got and the brighter the LED became.

Three push buttons set up in series. All buttons must be pushed for the LED to light.

Three push buttons set up in parallel. As long as one of the buttons are pushed, the LED will light.

After experimenting with the LED lights, I wanted to try out using a DC power source as well (not just the Arduino). It’s very likely I will want to demo a project without leaving my laptop behind, so setting up a project that could be connected to a standard outlet will be good to know. I forgot to take a picture but I disconnected the micro USB cable and added a voltage regulator (IGO), which then connected to wires of the DC power cable adapter. which connected to the DC power cable, which connected to the outlet.

At this point, I got to the DC Motor part of the lab. I attempted to connect the component, but somehow it failed to spin. The LED light is still shining when I press the button so I know that the circuit is properly closed. It seems that something about the DC motor is not connected properly. It will be good to get an answer during my class tomorrow. Over time, I hope to be more proficient at using the multimeter and reading/writing schematics.