ICM FINAL PRESENTATION

My ICM final project is the p5 code part of my pcomp project — a holographic installation, aimed to show the legacy of the 80s/90s AIDS epidemic losses and the enduring cultural effect left by the generation of LGBTQ people that disappeared, champions the queer triumphs of that era as our shared inheritance to pay homage to lost lives, serving as a beacon for the present generation, ensuring the persistence of the lost inheritance.

The Physical Setup:
The main display is using pepper’s ghost to project a hologram inside the display case, there will be one rotary encoder (dial) and one button on the pedestal connected to an Arduino. The Arduino is connected to a laptop, which will be screen mirroring into an iPad. The ipad and a thin acrylic piece will do the trick of light to show the hologram. The hologram content is a video, the video is controlled by and run on p5js. The dial and the button will send data to the serial port to be processed by p5, and that’s how we control the video display with the arduino.

Step-by-step user experience

1. The user approaches the installation, then will notice the hologram video playing.

2. Upon viewing, the user will know that this is a video showing people who passed away and their occupations.

3. The user will notice the rotary encoder and the button on the pedestal.

4. As they turn the encoder, the main memorial video on the screen responds by adjusting its playback time, allowing the user to explore different moments in the video, going to different people in the video.

5. When they choose to press the button, the main memorial video seamlessly transitions to an individual legacy video that further introduces the cultural influence of the person that was on display.

6. The user will notice the specific legacy video shown corresponds to the whoever was on screen in the main memorial video.

7. Now when the legacy video finishes playing, it will loop again. The user could try to get back to where they were in the main video, and realize turning the encoder won’t help.

8. Then the user will try to press the button again, they will find that it smoothly transitions the display back to the main memorial video.

9. Importantly, the playback resumes from the exact point where the user left off, continuing in the main narrative.

10. The user can choose to navigate further, exploring more stories or simply absorbing the experience as a whole, or just watching without interaction.

11. When the user leaves the installation, they will hopefully remember this meaningful tribute to those who faced the AIDS epidemic and their enduring inheritance to the LGBTQ community or even the world.

Ideal Interaction:
The user will catch the beginning of the main video, instantly understanding what this experience is about. Then the user will watch the video for a while, then decides to interact with the dial or the button. After finding out what the button and dial do, the user will combine the use of both, to navigate through different videos and introductions. Eventually the user will get to know the legacy of every person they are interested in.

User Choice:
As soon as the video starts, the user can start making choices. But mostly, they will start to make the choice when they see a person that they are intrigued about. After finding out the usage of the dial and the button, the use will make other choices like going back in the video timeline with the dial to a certain someone they missed, or just press the button and watch the individual personal achievement of someone repeatedly.

The p5 code link.

ICM CODING WEEK 06

Work Sheet:
Midterm crunch! Left for next week! Pcomp taking all spaces!

Midterm:
For my midterm, I'm introducing the sketch I did last week a.k.a. the bubbles and text. I zoomed Mimi and asked about how to talk about codes, how to present my sketch. I cleaned out my codes, I took the codes that calls the class out of the function because it was logically bizarre just to keep things tidy and clean. And here is the link to the sketch, all the preparations and my presentation lines are basically all in there:
https://editor.p5js.org/joshwaitwhat/sketches/fI_4A32DU

ICM CODING WEEK 05

Work Sheet:
This week’s is really easy. But also, what function isn’t portable?

Sketch
This week’s videos are LONG, but by watching I also learned a lot.
class() seems like an upgraded function(), which is cool and amazing to use.
Loving the introduction of this.x, seems finally something can help hold the random() value.
array is cool too but much more complicated, really need worksheet assignment to help practice.
I basically just expanded on the bubble thing in the video.
Trying to attach the highlight onto the bubble and succeeded, love that this.x/y helped a lot.

ICM CODING WEEK 04

Work Sheet:
Challenge 1, I do find the while( ) loop smoother, logically.

Challenge 2, I stayed with my while( ) loop, I tried to change the condition in while( ), not realizing a simple “&&“ in if( ) could solve it.

Challenge 3, I could not continue with my while( ) loop, what is wrong? Example of failed while loop

Challenge 5, I was trying to make a function that you can set up a few layers of ripples, but instead I just got one ripple going out and that's it. How do I make the function generate multiple ripples that can stay? Also, when I tried the dumb way to call my function multiple times in draw, it seems all the variables got mixed up altogether. Sketch here

As for the homework sketch, I just looked at the 10PRINT codes, and I read through and I understood what it was doing and how it was doing it. So I just kept the skeleton, and swapped in my own idea of patterns, instead of drawing lines, I'm drawing texts. To be honest I don't know what I'm doing actually, it seems okay.

I think generally, I do have some issues with the constant drawing 60 times per second, with how frequently it's updating and whether if the background is drawn or not. A lot of times people would tell me to just leave the background out of it, or to change where or when do you draw the background, but to me I don't think that is solving the problem, to me that is literally just putting a blanket on or under. I guess challenge 5 would be a good example, I should get that sorted out.

ICM CODING WEEK 03

Work Sheet:
For challenge 2, I think I did it okay, but I did set a bunch of switches and conditions. Yes it’s longer than others’, but I think it’s stable, it’s easy to understand. I think I will always write in a way that’s cognitively sane.

For challenger 3, I think my switch system is really pretty and carefully made, the background color could get better tho. Still writing a lot to get it right but it’s right.

For challenge 5, I did it but I am indeed confused about the wording of the two little challenges, they sound identical: Challenge: Make the ball’s fill color bounce back and forth fading from white through gray to black and then back to white again. Challenge: Make the fill color bouncing back and forth sync up with the ball bouncing back and forth.
For the fading color part, I've basically wrote math equations, I wonder if there is some more coding-esque way to do it?

Paired Sketch

For the paired sketch Xinyu and I teamed up. Me being me, just told her that I want to do something magical or princessy. I proposed the idea of a few floating crystal balls, and when you hover your mouse over it it changes color, and when you click on it it will divine your future for you.
And since we need to divide our tasks into input and output parts, of course I delegated the slightly more brain gymnastic part of setting up the input conditions to Xinyu, that it was a tough job. Because the balls have to be floating casually, at the same time when your mouse hover above it, it has to react precisely to the circle areas, not to the Square area that contains the circle, as I've done and have seen in other people's homework.

Her part of the coding is very important to me, because I am relying on the conditions she is setting to do my own [mouse is pressed] output part. After her party was finished, it got increasingly easy for me to put out the light waves pulsing behind the crystal ball when it's clicked on.

I really wanted to do twinkly stars to decorate the night sky we set in the background, but the only thing I know that could do the job was to set up randomly drawn dots, but they are being drawn way too fast to provide the vibe. Again, I tried to find codes to help me slow things down or delay the command, but it just doesn't seem as easy as with Arduino. Why can't you just type delay and set for the time period?

We used the gradient function, but personally I don't really understand it, this is a note for me to look into it. ChatGPT's version is almost saying that it's drawing infinite squares of varying colors from one end to another, that's insane.

The image above showcases the two problems or questions I have clearly:

1. Is there any way to push the drawing into different layers? Does it have to be clear logical chain of commands? Sometimes moving around blocks of codes will interrupt the train of thoughts while coding, can I just call for new things to be in the background easily? If I have to reposition where some draw commands go just to layer things right, the codes won't make much sense if someone else is reading it, because the normal logical order will be broken to prioritize the correct layer orders.

2. Also is there a way to set up two sets of frameCount? I am using the frame count to fade out the light waves in each individual crystal ball, so when the mouse click on either ball, it will reset the frame count. And yes you can see in the image, the lightwave that went out first just got refreshed to be less transparent: because I clicked on the smaller ball later, generating a new light wave from the smaller ball but also refreshed the opacity of the light waves that came from the first ball earlier. I know it might sound insane asking for two sets of frame count, but is it possible? Or is there something similar can help me with this?

ICM CODING WEEK 02

Things I need to figure out:
I didn't quite understand var( ) in class, so I took notes and read about it on ChatGPT after class. But still, when it’s related to us, the newbies, what’s so different between var( ) and let( ) if we usually just put them both at top — being universal?

When I change variables within push() and pop(), the variables outside of that still get affected. Is there a way for me to reset the variables when they are out of the push & pop space so I don't have to create a bunch of them to use?

Things I figured out:
For the worksheet assignment I was initially confused about how challenge 5 was solved, then I thought about it as a math problem then I suddenly understood. after that, challenge 6 became very easy, my thought process:
Don't see these 4 lines as separate lines, see them as 4 points that are related to each other, because basically from any point, the other three would be this point’s parameter plus or minus half of the canvas, so you can even set a center point even though you are not drawing a rectangle, the four points’ parameters would simply be the center point’s x, y plus or minus 1/4 of canvas width or height.

Homework
I kinda just put everything I watched in the videos and what I did in the worksheets into it, I have to admit it’s very hard to think about aesthetics when I have two other group projects due and barely alive.
I did start another sketch just to practice things I learned in the videos. Link below:
https://editor.p5js.org/joshwaitwhat/sketches/jEnPdX56e

For the main homework initially I wanted to do a heart-shaped button, when you pressed on it, it will radiate heart-shaped waves. From what you can see, this attempt clearly failed before I even dare to begin. Even for the rainbow waves I generated from the round button, I couldn't keep them coming if I don't want to type endless amount of ellipse codes. Is there a way to steadily generate the same thing one after one with a slight delay and non-stop? Because right now the only thing I can do is to adjust the size of the circles to create a very immature illusion for a hot second…

One personal issue I want to sort out is: I did all the work sheet sketches, I watched the videos that are listed, but still, looking at what other people could do (not just in our class), I just have this strong FOMO like I really missed something. Did I miss anything? Or maybe it's just my foundation isn't quite solid, so I just get really uneasy and unconfident when doing this? I feel like I definitely missed something but I cannot pinpoint. Anyway, that's week 2, I'm sure next week I will have more time to really absorb whatever I should learn better.

ICM CODING WEEK 01

Part 1 | computation and my interests
To be honest, I don't have a full grasp of what computation can do. I mean of course I know in general, but I have never thought about it in a sense that it has to do with me until school started. So maybe let's just try listing my interests and see how computation can help evolve or explore them.

First and foremost, graphic design, advertising and a little bit of motion graphics are my background. And they're not just my background, I do care and enjoy do those. As I said before, I love making pretty things. One of the many reasons I quit my old job for was that I didn't have enough opportunities to create visually exciting, aesthetically appealing content. And then, I'm a huge theater nerd, I have seen countless musicals and plays and sitting in the theater really makes me feel at home. Living through the stories acted by actors live on stage right in front of you it's such a cure for my soul, every time I step out of the theater I feel alive. Somehow other people’s stories can wash away the jadedness and cynicism I get from daily life, those special moments on stage can keep me feeling not so unspecial for a while. If we want to talk about social causes, what I care about the most are definitely topics surrounding communities that I am personally in, like immigrants, foreigners, Asians and LGBTQIA+. I've done projects about the rising Asian hate in this country, if I have more opportunities I would love to expand on my old projects. And I have always wanted to create something that's interactive and impactful for the pride month for the past few years, but I never had a good enough insight or capability in technologies at the same time to create anything.

So based on these listed interests (so many not even mentioned), I would love to create kinetic typography and mature motion design through codes, let the world of design become alive and interactive. Or to explore what new expressiveness computation can bring into the theater performing space rather than just screens or projections, but honestly projection mapping is not used enough in theater world in my personal opinion and I would love to explore that. I also want to explore that through digital experiences and interactive activities, can we bring the theater experience to so many people that don't have access to that? Last but not least, I couldn't get it out of my head that a whole generation of gay men vanished from history during the AIDS pandemic, I could not stop thinking about what could've been what should've been, if they are still here today who will they be? These dream scenarios would be something I want to create or curate through computation and interactive design, to remember and to not forget.

So in summary, I guess I want to create projects that are pretty and meaningful and in a way that can provide people with an experience and later on stay with them.

Part 2| Self portrait
My initial thought on this assignment was merely: let's create something pretty. So one thing led to another, this assignment became much more difficult than I expected, by my own hands. I know that I shot myself in the foot but here we are, grin and bear it.

Since I'm not an illustrator, I just searched online for simple vector self portraits that I personally liked. And then I dragged one into Photoshop, cleaned it up and changed it up to look like me, then I colored it simply. And this will be the basis for our coding portrait.

Then it turned out that this is quite challenging for me. I am super and extremely new to coding, I don't know what delusion pill I was taking when I decided to do this portrait and thinking it's going to be a piece of cake. The reality was that I had to use photoshop’s path tool and the guides to constantly defined the areas and to cut everything up into smaller shapes for me to better understand what I need to put in the codes. Here you can see that the skin area is formed by countless ellipses, not very efficient but it does the job. These paths help me canvas the colors and outlines I need to draw, since I don't have any other advanced tools to help, they also help me think about the structure of the image.

Ellipse by ellipse, I'm slowly building up the portrait. This is definitely not the quickest or smartest way, but it is what I know. So far everything has been about ellipse, rectangle and quad, but there is soon I'm going to cross into the unknown: rotate, Bezier, arc, push and pop…

When creating some special curls of the hair or some skin shadow color areas, I run into troubles of rotating the shapes. Reading upon a few webpages of how to rotate the shapes wasn't that helpful because it was quite difficult to understand the use of angleMode or how to redefine the center of rotation. Also I was running out of patience.

So I asked ChatGPT to explain how he would work, initially the answer wasn't clear, then I asked it to specify as if I want to only rotate one shape among many, and then it told me about how to use the push and pop command. The example was clear, so I tried it, redefined the center of the shapes within the push and pop command, and it worked beautifully. Now I can rotate!

Now I'm drawing the curves, and it's very hard to understand the control points and anchor points. It was difficult to find out how control points control the curve. I asked ChatGPT for examples, I didn't get anything comprehensible.

Then I just went on some reading on Bezier curve, and turned out the code examples that ChatGPT gave me wasn't about Bezier curve, it was just about curve, so that’s why I have been getting reversed results? Do x1 y1 mean something else here? But it shouldn't be, as stated online or by ChatGPT, the curve command seems the same as the Bézier curve command. But they yield different results even though I gave them the same coordinates.

But anyway, I realized I don't have to use the curve yet, I can just use arc to solve most of the line problems. Arc is actually much more useful for me, and measuring the angles in Photoshop isn't that hard. But I would still love some assistance on getting the specs, it was a lot of work and it was repetitive, the process felt awkward since I had to measure tons and tons of angles.

Then I went into the outline drawing frenzy, and I really got the hang of Bezier curves now! It's just very inefficient that I have to measure all the anchor points in Photoshop by dragging the guidelines around. There must be an easier way to do this, there has to, right? After doing the rotation inside push and pop, connecting countess Bezier curves, I was getting closer and closer. Also I have grasped the gist of it. I even started doing rotated arc, rather than just ellipse.

Finally I finished my self-portrait, it was incredibly hard and difficult to get every little detail right, but I think I've accomplished 95% of my goals. I am getting much more comfortable with coding in p5, and I am also getting used to adjusting my code just by eyeing the results. Which made me feel much braver than hours ago. Just look at the long codes I wrote!

It was time and energy consuming for me to pack this difficult portrait to re-create in codes, but I'm glad that I did it, because I learned so much from doing that and I also learned new ways of learning, which will be valuable in the classes to come.

Also, now I think of it, how the hell does the curve command work?