Category: MADT 201 Self-Directed Programming Project

The final stretch! This week I mostly worked on cleaning up my code and messing with colours and constraints for the project. I also wanted to do as many test runs as I could to be sure that it is running exactly how I want it to every time, and noticing things that could be better.

The first was I had to make sure that not only did my fullscreen function move everything to display dimensions, but that the program did too! I tightened up the constraints for the “computer drawing” as well, as I liked that it went off the screen and would come in and out sometimes, a lot of the tests I did would end up with a small pile of pixels at the bottom, and I would never see the drawing come back! I didn’t like having the contraints to close or within the display dimensions, as I felt each time the whole screen would get too messy. That still happens, but it’s more special when it does now.

I also experimented with a variety of colour combinations, but I ended up settling on these warm toned ones, I think with the audio driving a lot of this piece, I wanted to continue to push that warm feeling.

An example of the final product of the code!

But of course, a still doesn’t always capture it. I am so happy that I can create with this little machine, and it can create with me.

This week I’ve been working mainly on the audio component of my project, which has been the most challenging part of this process and has definitely taken the most persistence to get through.

I started by collecting some field recordings along with my own guitar playing. I wanted to capture a warm, home-like atmosphere that further emphasized viewers to look inwards. Edited both audio files in Audacity, and they were good to go in my project!

The code was where it got challenging though. Understanding the audio functionality of p5.js was pretty simple, and getting my first track to play for the entirety of the code running was easy enough.

For this project however, I wanted the music I recorded to play as the user drew, thinking I could just add song.play to my mouseIsPressed function was a mistake. It was also a mistake to forget to save the draft project I was working through these problems on!

Stellar! So had to reapproach how I was going to get this to work (after catching up on the other work I had lost). I knew the issue was that the draw feature was repeatedly trying to start the audio track each time it looped its function, crashing the whole site. So I needed to figure out a way to get the code to do a couple more checks before deciding whether to play the track or not. So, enter the Boolean, which assumes music is not playing, checks if the mouse is pressed, plays only once, and stops if the mouse is not pressed. This took a lot of trial and error to finally wrap my brain around how Boolean functions work.

As per my comments instructions, now that the music played while the mouse was pressed, I wanted the audio to pan in relation to where the cusor moved across the screen. I was particularily interested in this feature as the audio is a major component to this piece, and I am planning on exhibiting it in AUArts’ 8 speaker media arts gallery. Again, doing this required me to understand another new p5.js function: mapping.

This took a lot of persistence. And too be fair, I still am not quite sure what I have done here to get it to work, but it does so I am happy! For a while I had everything right except having my variable drawline defined in a constrain, and the second I included that everything decided to work and I now had a line that played audio as the user drew, and that audio panned left and right with the curser!

Now I have essentially everything I want this program to do doing what it needs to, my final week on this should just be cleaning everything up and refining a couple other points.

This week I’ve begun to actually play around with the code and work through a couple different experiments of getting it to develop the kind of shapes I wanted; it’s definitely posing a different way of thinking, the math likes to develop very rigid forms with very precise borders and locations!

It’s making me reflect on my relationship to this project and how in my trying to brute force a tiny code to draw like a human, I am instructing it to perform for me and it is working exactly as I tell it to. I’m thinking of sort of breaking this idea and having the computer make its own decisions is going to work in my favour (I guess it still is doing exactly as I say though, as I instruct it to have agency!)

This is when I came across this particular Coding Train video (https://www.youtube.com/watch?v=TaluaAD9MKA&t=3s) and I had gotten very interested in the interaction between having a viewer or performer directly affect the visual output of the code while the computer makes its own set of unique decisions, creating a completely different visual composition each time the program runs with or without a person interacting with it. 

It’s a little ironic, as I was playing with this code I realized that the solution to the coding problem Dan was presenting in the video (having a code run with trails while simultaneously run one without) was exactly what I needed to undo to have the code start making the types of forms I wanted it to. Goodbye clear canvas! Now seeing the trails the computer was “drawing itself”, I was happy to see the interesting forms it made randomly on its own.

Que 2 hours of hair-pulling trying to get fullscreening to work, had to look at my prof’s code and write the rest of my code around it to get it to work. I had tried inserting it exactly into my code with no success, but somehow writing my code around the fullscreen code did? Computers man.

This was then just a game of messing with the numbers until I had something that was starting to look like what I wanted. I had thought about working with individual pixels to create my forms, but found that on a large scale like this, generating the shapes themselves was working quite well.

So now I’v got a good foundation for my program. Each time I run it, it creates it’s own unique form and the user is able to draw alongside it!

I’m thinking a lot about how the mood of this piece is pretty quiet, personal, and introspective. This should help me inform the next main phase of the project: the audio!

This week I was mainly focused on gathering inspiration for a project that would challenge myself but I still felt was achievable within my current (quite limited) coding skillset. I wanted a project that still fit in with what I typically focus on conceptually in my other work; human idealism and relation to the material world, relationships and connections, and reciprocity. I also work a lot with explorations into audio, so I knew I wanted my project to have a strong audio component. 

I wanted to make a program that created random organic shapes that the viewer would have to interact with and connect to in some way. I wanted it to get viewers to look introspectively as they interacted with the piece and consider their relationship to the code and by proxy, to computers. 

At this stage I am still working out what exactly this will look like, but I’m hoping through research and experimentation this project will start to form itself. I’m interested in the experimental process leading me to a piece that speaks to my concept. In a way, I am hoping that the process of writing this code will be inextricable from the piece itself; that through my learning with the computer I am able to display my own meta-interaction with it.

Here’s a page of notes I was using to start to conceptualize what the piece was going to be.