JESSIE ZHAI

Digital artist

A documentation page of rambling and experimenting.

@jessiehaseyes
jessiejiranzhai@gmail.com
07 AI
ICM WEEK7



GO TO:
GENAI EXPERIMENT
P5.JS SKETCH



For Week 7’s creative assignment GENAI, I kept on working on my webcam project from the previous week.





PREVIOUSLY ON..

For last week’s assignment I was able to create an audioreactive webcam using pixels and FFT to map color pixels and sound frequency. My goal this week is to incorporate more creative elements, and give the users more creative control as well. Initially, my idea is to create buttons that changes between different modes of the camera.



While I was exploring, I found this reference that I would love to use as a visual reference for this week’s experiment.


THINGS TO FIX

  • I’m not the biggest fan of the colors from the webcam, especially last week while I was presenting the room was too dark for the sketch to capture much.
  • Create more dynamic shapes other than the ellipse, when an object is in front, it rotatesor another motion.
  • Create animation that makes the dots “travel” through the grids.
  • Create a button that allow users to change different modes of the camera.

PROCESS

To change the color of the pixels, I created a color palette and used array to use color only from this list.

The initial try was not exactly successful when I told the AI to “detect obejects that are in front of the camera based on the previous code. It completely disregard the previous code and changed the style of the sketch to only serve the purpose of detetcing what is in front of the webcam.



So I had to be more specific. Next, I asked it to strictly base the code on the previous sketch. Other than incorporating the colors in my color array, I asked it to create more contrast on the canvas between different brightness in front of the camera, and leave the bright areas completely blank, this gave me a nice outline of the object in front (me). This kind of looks like a skettle vomit since the size of the ellipse are changing too much.



I gave it the coding train’s checked mirror code and asked it to reference it in my code.





It created a nice effect that distinctively made shapes around the area that is dark, also imitating the checked mirror and added a slider to change the threshold.



Now that I have an i deal effect, I asked it to add more variety to the shapes, incorporate heart shapes, triangles into the sketch. 



Then I asked it to uniform the size of the shapes, instead of letting the size of the shapes to respond to the sound frequency, alter the shapes more frequently when the frequency value is high. And added rotation to the shapes when the frequency is high.

I then went into examine the code myself, got rid of the slider, and changed the maximum shapes that will appear on screen each time. I had an idea to offset the shapes and create an outline of the appearing shapes.



I tried a couple times, each time phrasing the prompt differently. Sadly it didn’t understand what I mean by an outline. But this is cool too!

Go back to where we were at, added a couple different modes using only specific shapes and colors, so the camera can switch between modes!











REFERENCE


Webcam - Patt Vira

FFT - The Coding Train

Checked Mirror - Coding Train

ChatGPT


SOLVED PROBLEMS

 
  • Adding more artistic touches
  • Adding different modes to the sketch for them to switch between


THINGS TO IMPROVE

  • Compared to my reference, I’m missing more graphical elements like the pixels forming and changing in shapes.
  • I would also love to make the pixels “travel” like the snake video game, but I don’t think I understand how to communicate that to an actual person or AI.
  • I would love to connect this to my phone and use it as a camera.
  • Do I really understood what the AI was doingw with my code? Some..but I need to go back and read everything over again.

INDEX  NEXT
JESSIEZHAI